<template>
    <!-- 月结记录弹框 -->
    <div>
        <el-dialog
            title="月结记录"
            append-to-body
            :visible.sync="monthRecordDialogVisible"
            :before-close="handleCloseMonthRecordDialog"
            width="80%"
        >
            <el-form inline :model="monthRecordParams" ref="monthRecordFormRef">
                <el-form-item label="结算月份" prop="dateMonth">
                    <el-date-picker
                        v-model="dateMonth"
                        type="month"
                        placeholder="请选择月份"
                        value-format="yyyy-MM"
                    />
                </el-form-item>
                <el-form-item label="费用承担方" prop="costBear">
                    <el-select v-model="monthRecordParams.costBear" clearable>
                        <el-option
                            v-for="item in costBearList"
                            :key="item.id"
                            :value="item.value"
                            :label="item.label"
                        />
                    </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
                border
                :data="monthRecordList"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" align="center" />
                <el-table-column
                    prop="unitName"
                    align="center"
                    label="单位名称"
                />
                <el-table-column
                    prop="projectName"
                    align="center"
                    label="工程名称"
                />
                <el-table-column prop="month" align="center" label="结算月份" />
                <el-table-column
                    prop="costBearingParty"
                    align="center"
                    label="费用承担方"
                />
                <el-table-column prop="costs" align="center" label="结算金额" />
                <el-table-column align="center" label="操作">
                    <template slot-scope="{ row }">
                        <el-button type="text" @click="previewDetails(row)"
                            >明细</el-button
                        >
                        <el-button type="text" @click="exportDetails(row)"
                            >导出明细表</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                :total="monthRecordTotal"
                :page.sync="monthRecordParams.pageNum"
                :limit.sync="monthRecordParams.pageSize"
                @pagination="getMonthRecordList"
            />

            <!-- 内层弹框 -->
            <el-dialog
                width="75%"
                title="明细"
                :visible.sync="innerVisible"
                append-to-body
                :before-close="handleCloseMInnerDialog"
            >
                <el-row :gutter="20" class="title-row">
                    <el-col :span="12">
                        领用单位：{{ monthDetailsInfo.unitName || '' }}
                    </el-col>
                    <el-col :span="12" class="pl-col">
                        月结月份：
                        {{ monthDetailsInfo.month || '' }}</el-col
                    >
                </el-row>
                <el-row :gutter="20" class="title-row">
                    <el-col :span="12">
                        工程名称：{{ monthDetailsInfo.projectName || '' }}
                    </el-col>
                    <el-col :span="12" class="pl-col" style="color: red">
                        费用承担方：{{
                            monthDetailsInfo.costBearingParty || ''
                        }}

                        {{
                            monthDetailsInfo.costBearingParty == '01'
                                ? '(项目)'
                                : '(分包)'
                        }}
                    </el-col>
                </el-row>

                <el-table border :data="monthDetails" max-height="600">
                    <el-table-column
                        label="序号"
                        align="center"
                        type="index"
                        width="55"
                    />
                    <el-table-column
                        prop="typeName"
                        label="设备名称"
                        align="center"
                    />
                    <el-table-column
                        prop="modelName"
                        label="规格型号"
                        align="center"
                    />
                    <el-table-column
                        prop="nuitName"
                        label="单位"
                        align="center"
                    />
                    <el-table-column prop="num" label="数量" align="center" />
                    <el-table-column
                        prop="leasePrice"
                        label="台班费单价 (元/天)"
                        align="center"
                    />
                    <el-table-column
                        prop="startTime"
                        label="开始日期"
                        align="center"
                    />
                    <el-table-column
                        prop="endTime"
                        label="结算日期"
                        align="center"
                    />
                    <el-table-column
                        prop="leaseDays"
                        label="结算天数"
                        align="center"
                    />
                    <el-table-column
                        prop="costs"
                        label="结算金额"
                        align="center"
                    />
                    <el-table-column
                        prop="realCosts"
                        label="本月暂记金额(元)"
                        align="center"
                    />
                </el-table>
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script>
import { getMonthRecordApi } from '@/api/cost/cost.js'
export default {
    props: {
        monthRecordDialogVisible: {
            type: Boolean,
            default: () => false,
        },
        agreementId: {
            type: [String, Number],
            default: () => '',
        },
    },
    data() {
        return {
            // 费用承担方
            costBearList: [
                { id: 1, label: '全部', value: '' },
                { id: 2, label: '01', value: '01' },
                { id: 3, label: '03', value: '03' },
            ],
            // 查询参数
            monthRecordParams: {
                startTime: '',
                endTime: '',
                costBear: '',
                agreementId: '',
                pageNum: 1,
                pageSize: 10,
            },
            // 列表数据源
            monthRecordList: [],
            // 复选框勾选后数据
            selectList: [],
            // 内测弹框
            innerVisible: false,
            // 列表数量
            monthRecordTotal: 1,
            // 筛选日期
            dateMonth: '',
            // 月结明细表头
            monthDetailsInfo: {},
            // 月结明细 列表
            monthDetails: [],
        }
    },
    created() {
        this.getMonthRecordList()
    },
    methods: {
        /** 获取月结记录列表数据 */
        async getMonthRecordList() {
            // console.log('99999')
            this.monthRecordParams.startTime = this.dateMonth[0] || ''
            this.monthRecordParams.endTime = this.dateMonth[1] || ''
            this.monthRecordParams.agreementId = this.agreementId
            // 调后台 Api 获取数据
            const res = await getMonthRecordApi([this.monthRecordParams])
            this.monthRecordList = res.data
            console.log(res, '月结记录---')
        },
        /** 查询 */
        handleQuery() {
            this.getMonthRecordList()
        },
        /** 重置 */
        resetQuery() {
            this.resetForm('monthRecordFormRef')
            this.dateMonth = []
            this.getMonthRecordList()
        },
        /** 批量明细导出 */
        handleBatchExport() {
            if (this.selectList.length < 1) {
                this.$message.error('请勾选需要导出的数据！')
                return
            }
        },
        /** 单个明细导出 */
        exportDetails(row) {
            console.log('导出--', row)
        },
        /** 列表勾选 */
        handleSelectionChange(list) {
            this.selectList = list
        },
        /** 关闭外侧弹框*/
        handleCloseMonthRecordDialog() {
            this.$emit('handleCloseMonthRecordDialog')
        },
        /** 关闭内测弹框 */
        handleCloseMInnerDialog() {
            this.innerVisible = false
        },
        /** 明细按钮 */
        previewDetails(row) {
            const { unitName, month, projectName, costBearingParty } = row
            this.monthDetailsInfo = {
                unitName,
                month,
                projectName,
                costBearingParty,
            }
            console.log(row, '明细')
            this.monthDetails = row.node
            this.innerVisible = true
        },
    },
}
</script>

<style scoped>
.title-row {
    min-height: 38px;
    line-height: 38px;
    font-size: 16px;
}
.pl-col {
    padding-left: 180px !important;
}
</style>
