<template>
    <!-- 费用结算页面 -->
    <div class="app-container" id="costApplyList">
        <template v-if="isHome">
            <el-form
                :model="queryParams"
                ref="queryForm"
                size="small"
                :inline="true"
                v-show="showSearch"
                label-width="80px"
            >
                <el-form-item label="结算单位" prop="unitId">
                    <el-select
                        v-model="queryParams.unitId"
                        placeholder="请选择往来单位"
                        clearable
                        filterable
                    >
                        <el-option
                            v-for="item in unitList"
                            :key="item.unitId"
                            :label="item.unitName"
                            :value="item.unitId"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="结算工程" prop="projectId">
                    <el-select
                        v-model="queryParams.projectId"
                        placeholder="请选择工程名称"
                        clearable
                        filterable
                    >
                        <el-option
                            v-for="item in projectList"
                            :key="item.projectId"
                            :label="item.projectName"
                            :value="item.projectId"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="结算状态" prop="sltStatus">
                    <el-select
                        v-model="queryParams.sltStatus"
                        placeholder="请选择结算状态"
                        clearable
                        filterable
                    >
                        <el-option
                            v-for="item in statusList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleQuery"
                        >查询</el-button
                    >
                    <el-button
                        icon="el-icon-refresh"
                        size="mini"
                        @click="resetQuery"
                        >重置</el-button
                    >
                    <el-button
                        type="primary"
                        plain
                        size="mini"
                        @click="handleBatchExport"
                        >批量导出月结明细表</el-button
                    >
                </el-form-item>
            </el-form>

            <el-table
                v-loading="loading"
                :data="agreementList"
                border
                @selection-change="handleSelectionChange"
                ref="tableRef"
            >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column
                    align="center"
                    label="序号"
                    type="index"
                    :index="
                        indexContinuation(
                            queryParams.pageNum,
                            queryParams.pageSize,
                        )
                    "
                />
                <el-table-column
                    label="协议编号"
                    align="center"
                    prop="agreementCode"
                    show-overflow-tooltipp
                />

                <el-table-column
                    label="结算单位"
                    align="center"
                    prop="unitName"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="结算工程"
                    align="center"
                    prop="projectName"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="累计结算费用"
                    align="center"
                    prop="cost"
                    show-overflow-tooltip
                />
                <el-table-column label="结算状态" align="center">
                    <template slot-scope="{ row }">
                        <!-- <span v-if="scope.row.sltStatus == '1'">未结算</span>
                        <span v-if="scope.row.sltStatus == '2'">已结算</span>
                        <span v-if="scope.row.sltStatus == '3'">待审核</span> -->
                        <el-tag type="warning" size="mini" v-if="row.isSlt == 0"
                            >结算中</el-tag
                        >
                        <el-tag type="success" size="mini" v-if="row.isSlt == 1"
                            >已结算</el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="{ row }">
                        <el-button
                            size="mini"
                            type="primary"
                            style="padding: 5px 10px"
                            @click="handleMonthRecord(row)"
                            >月结记录</el-button
                        >
                        <el-button
                            size="mini"
                            :type="row.isSlt == 1 ? 'success' : 'primary'"
                            style="padding: 5px 10px"
                            @click="handleFinishCostAndDetails(row)"
                            >{{
                                row.isSlt == 1 ? '结算明细' : '完工结算'
                            }}</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />

            <!-- 批量导出月结明细 -->
            <ExportDialog
                :exportDialogVisible="exportDialogVisible"
                :exportParams="exportParams"
                @handleCloseDialog="handleCloseDialog"
                @handleSubmit="handleSubmit"
            />
            <!-- 月结记录弹框 -->
            <MonthRecord
                v-if="monthRecordDialogVisible"
                :monthRecordDialogVisible="monthRecordDialogVisible"
                :agreementId="agreementId"
                @handleCloseMonthRecordDialog="handleCloseMonthRecordDialog"
            />
        </template>
        <template v-else>
            <FinishAndDetails
                :currRowInfo="currRowInfo"
                :pageContent="pageContent"
                @closeCurrPage="closeCurrPage"
            />
        </template>
    </div>
</template>

<script>
import { getUnitList, getProjectList } from '@/api/claimAndRefund/receive'
import { getSltAgreementInfo } from '@/api/cost/cost'

import ExportDialog from './component/exportDialog.vue'
import MonthRecord from './component/monthRecord.vue'
import FinishAndDetails from './component/finishAndDetails.vue'

export default {
    name: 'CostApplyList',
    components: {
        ExportDialog,
        MonthRecord,
        FinishAndDetails,
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 往来单位数据
            unitList: [],
            // 工程数据
            projectList: [],
            statusList: [
                { id: '', name: '请选择' },
                { id: '0', name: '结算中' },
                { id: '1', name: '已结算' },
            ], //集合
            // 表格数据
            agreementList: [
                {
                    agreementCode: '测试',
                },
            ],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 日期范围
            dateRange: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                keyWord: undefined,
                sltStatus: '0',
                unitId: '',
                projectId: '',
            },
            // 批量导出月结明细弹框
            exportDialogVisible: false,
            // 月结记录弹框
            monthRecordDialogVisible: false,
            // 是否显示主页
            isHome: true,
            // 当前行信息
            currRowInfo: null,
            // 页面标题
            pageContent: '',
            // 查询月结记录的参数
            agreementId: '',
            // 批量导出的参数
            exportParams: [],
        }
    },
    created() {
        this.getList()
        this.getUnitList()
        this.getProjectList()
    },
    methods: {
        //获取单位类型 ,getUnitList, getProjectList
        getUnitList() {
            getUnitList().then((response) => {
                this.unitList = response.data
            })
        },
        getProjectList() {
            getProjectList().then((response) => {
                this.projectList = response.data
            })
        },

        /** 查询字典类型列表 */
        getList() {
            this.loading = true
            getSltAgreementInfo(this.queryParams).then((response) => {
                this.agreementList = response.rows
                this.total = response.total
                this.loading = false
            })
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = []
            this.resetForm('queryForm')
            this.handleQuery()
        },
        //结算申请
        handleApply(row) {
            let arr = [row]
            console.log(arr)
            console.log(this.ids)
            console.log(JSON.stringify(arr))
            this.$tab.closeOpenPage({
                path: '/cost/cost/costApplyAdd',
                query: {
                    rowData: JSON.stringify(arr),
                },
            })
        },
        handleApplyList() {
            if (this.ids.length > 0) {
                let arr = this.ids
                this.$tab.closeOpenPage({
                    path: '/cost/cost/costApplyAdd',
                    query: {
                        rowData: JSON.stringify(arr),
                    },
                })
            }
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item)
        },

        /** 批量导出月结明细表 */
        handleBatchExport() {
            console.log('批量导出月结明细表')
            this.exportParams = []
            if (this.ids.length < 1) {
                this.$message.error('请勾选需要导出的数据！')
                return
            }

            //  获取选中导出的协议 id 并组装参数
            this.ids.forEach((e) => {
                this.exportParams.push({
                    agreementId: e.agreementId,
                    costBearingParty: '',
                })
            })

            this.exportDialogVisible = true
        },
        /** 关闭弹框 */
        handleCloseDialog() {
            this.exportDialogVisible = false
        },
        /** 确定按钮 */
        handleSubmit(form) {
            if (form.length === 1) {
                this.exportParams.forEach((e) => {
                    e.costBearingParty = form[0]
                })
            }

            this.downloadJson(
                'material/sltAgreementInfo/exportSltInfoMonth',
                JSON.stringify(this.exportParams),
                `月结明细${new Date().getTime()}.xlsx`,
            )

            this.exportDialogVisible = false
            this.$refs.tableRef.clearSelection()
        },
        /** 月结记录 */
        handleMonthRecord(row) {
            this.agreementId = row.agreementId
            this.monthRecordDialogVisible = true
        },
        /** 完工结算  结算明细*/
        handleFinishCostAndDetails(row) {
            this.currRowInfo = row
            this.pageContent = '结算明细'
            this.isHome = false
        },
        /** 关闭月结记录弹框 */
        handleCloseMonthRecordDialog() {
            this.monthRecordDialogVisible = false
        },
        /** 关闭完工结算或结算明细页面 */
        closeCurrPage(isRefresh) {
            this.isHome = true
            if (isRefresh) {
                this.getList()
            }
        },
    },
}
</script>
