<template>
    <div class="app-container" id="agreement">
        <el-row style="width: 100%">
            <el-col :span="18">
                <el-button type="primary" size="mini" @click="handleExport1"
                    >租赁明细导出</el-button
                >
                <el-button type="primary" size="mini" @click="handleExport2"
                    >丢失明细导出</el-button
                >
                <el-button type="primary" size="mini" @click="handleExport3"
                    >维修明细导出</el-button
                >
                <el-button type="primary" size="mini" @click="handleExport4"
                    >报废明细导出</el-button
                >
                <el-button type="warning" size="mini" @click="handleExportAll"
                    >全部明细导出</el-button
                >
                <el-button type="success" size="mini" @click="handleAdd"
                    >提交</el-button
                >
            </el-col>
            <el-col :span="4">
                <el-button
                    type="danger"
                    size="mini"
                    style="float: right"
                    @click="handleBack"
                    >返回</el-button
                >
            </el-col>
        </el-row>
        <div style="color: rgb(217, 0, 27); font-weight: 700; padding: 20px 0">
            结算费用合计：¥{{ costAll }}，租赁费用¥{{ leaseCost }}，维修费用¥{{
                repairCost
            }}，报废费用¥{{ scrapCost }}，丢失费用{{ loseCost }}。
        </div>

        <div>
            <el-table
                :data="leaseList"
                @selection-change="handleSelectionChange"
            >
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="租赁费用明细" align="center">
                    <el-table-column
                        label="序号"
                        align="center"
                        type="index"
                        width="60"
                    />
                    <el-table-column
                        label="结算单位"
                        align="center"
                        prop="unitName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="结算工程"
                        align="center"
                        prop="projectName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="设备名称"
                        align="center"
                        prop="typeName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="规格型号"
                        align="center"
                        prop="modelName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="计量单位"
                        align="center"
                        prop="nuitName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="租赁单价"
                        align="center"
                        prop="leasePrice"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="租赁数量"
                        align="center"
                        prop="num"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="租赁日期"
                        align="center"
                        prop="startTime"
                        :show-overflow-tooltip="true"
                    />
                    <!-- <el-table-column label="归还数量" align="center" prop="" :show-overflow-tooltip="true" /> -->
                    <el-table-column
                        label="归还日期 "
                        align="center"
                        prop="endTime"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="租赁天数"
                        align="center"
                        prop="leaseDays"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="外部租赁费用"
                        align="center"
                        prop="costs"
                        :show-overflow-tooltip="true"
                    />
                </el-table-column>
            </el-table>
            <div style="width: 100%; text-align: right; padding: 20px 20px"
                >租赁费用小计：{{ leaseCost }}</div
            >
        </div>

        <div>
            <el-table
                :data="repairList"
                @selection-change="handleSelectionChange"
            >
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="维修费用明细" align="center">
                    <el-table-column
                        label="序号"
                        align="center"
                        type="index"
                        width="60"
                    />
                    <el-table-column
                        label="结算单位"
                        align="center"
                        prop="unitName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="结算工程"
                        align="center"
                        prop="projectName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="设备名称"
                        align="center"
                        prop="typeName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="规格型号"
                        align="center"
                        prop="modelName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="计量单位"
                        align="center"
                        prop="nuitName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="维修状态"
                        align="center"
                        prop="repairStatus"
                        :show-overflow-tooltip="true"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.repairStatus == 0"
                                >未审核</span
                            >
                            <span v-if="scope.row.repairStatus == 1"
                                >已审核</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="维修数量"
                        align="center"
                        prop="num"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="维修费用"
                        align="center"
                        prop="costs"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="类型"
                        align="center"
                        prop="partType"
                        :show-overflow-tooltip="true"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.partType == 0">不收费</span>
                            <span v-if="scope.row.partType == 1">收费</span>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <div style="width: 100%; text-align: right; padding: 20px 20px"
                >维修费用小计：{{ repairCost }}</div
            >
        </div>

        <div>
            <el-table
                :data="scrapList"
                @selection-change="handleSelectionChange"
            >
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="报废费用明细" align="center">
                    <el-table-column
                        label="序号"
                        align="center"
                        type="index"
                        width="60"
                    />
                    <el-table-column
                        label="结算单位"
                        align="center"
                        prop="unitName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="结算工程"
                        align="center"
                        prop="projectName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="设备名称"
                        align="center"
                        prop="typeName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="规格型号"
                        align="center"
                        prop="modelName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="计量单位"
                        align="center"
                        prop="nuitName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="报废数量"
                        align="center"
                        prop="num"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="报废原因"
                        align="center"
                        prop="scrapType"
                        :show-overflow-tooltip="true"
                    >
                        <!--   <template slot-scope="scope"> -->
                        <!--   <span v-if="scope.row.scrapType == 0">自然</span> -->
                        <!--   <span v-if="scope.row.scrapType == 1">人为</span> -->
                        <!--   </template> -->
                    </el-table-column>
                    <el-table-column
                        label="报废费用"
                        align="center"
                        prop="costs"
                        :show-overflow-tooltip="true"
                    />
                </el-table-column>
            </el-table>
            <div style="width: 100%; text-align: right; padding: 20px 20px"
                >报废费用小计：{{ scrapCost }}</div
            >
        </div>

        <div>
            <el-table
                :data="loseList"
                @selection-change="handleSelectionChange"
            >
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="丢失费用明细" align="center">
                    <el-table-column
                        label="序号"
                        align="center"
                        type="index"
                        width="60"
                    />
                    <el-table-column
                        label="结算单位"
                        align="center"
                        prop="unitName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="结算工程"
                        align="center"
                        prop="projectName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="设备名称"
                        align="center"
                        prop="typeName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="规格型号"
                        align="center"
                        prop="modelName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="计量单位"
                        align="center"
                        prop="nuitName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="丢失数量"
                        align="center"
                        prop="num"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="丢失费用"
                        align="center"
                        prop="costs"
                        :show-overflow-tooltip="true"
                    />
                </el-table-column>
            </el-table>
            <div style="width: 100%; text-align: right; padding: 20px 20px"
                >丢失费用小计：{{ loseCost }}</div
            >
        </div>

        <!-- 审批弹窗 -->
        <el-dialog
            title="费用结算提交"
            align="center"
            :visible.sync="applyVisible"
            width="1200px"
        >
            <div>
                <el-table
                    :data="applyList"
                    show-summary
                    sum-text="合计"
                    :summary-method="getSummaries"
                >
                    <!-- <el-table-column type="selection" width="55" align="center" /> -->
                    <el-table-column
                        label="序号"
                        align="center"
                        type="index"
                        width="60"
                    />
                    <el-table-column
                        label="结算单位"
                        align="center"
                        prop="unitName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="结算工程"
                        align="center"
                        prop="projectName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="租赁费用"
                        align="center"
                        prop="leaseCost"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="维修费用"
                        align="center"
                        prop="repairCost"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="报废费用"
                        align="center"
                        prop="scrapCost"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="丢失费用"
                        align="center"
                        prop="loseCost"
                        :show-overflow-tooltip="true"
                    />

                    <el-table-column
                        label="增项费用"
                        align="center"
                        prop="addCost"
                        :show-overflow-tooltip="true"
                        width="150"
                    >
                        <template slot-scope="scope">
                            <el-input-number
                                v-model="scope.row.addCost"
                                controls-position="right"
                                style="width: 100%"
                                :min="0"
                                @input="countNum(scope.row)"
                            ></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="减免费用"
                        align="center"
                        prop="subCost"
                        :show-overflow-tooltip="true"
                        width="150"
                    >
                        <template slot-scope="scope">
                            <el-input-number
                                v-model="scope.row.subCost"
                                controls-position="right"
                                style="width: 100%"
                                :min="0"
                                @input="countNum(scope.row)"
                            ></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="增减原因"
                        align="center"
                        prop="remark"
                        :show-overflow-tooltip="true"
                        width="150"
                    >
                        <template slot-scope="scope">
                            <el-input
                                v-model="scope.row.remark"
                                style="width: 100%"
                                maxlength="50"
                            ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="费用小计"
                        align="center"
                        prop="cost"
                        :show-overflow-tooltip="true"
                        width="120"
                    />
                </el-table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="applyVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitApply">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        getAgreementList,
        getUnitList,
        getProjectList,
    } from '@/api/claimAndRefund/receive'
    import { getSltInfo, submitFee, exportLease } from '@/api/cost/cost'

    export default {
        name: 'Agreement',
        dicts: ['sys_normal_disable'],
        data() {
            return {
                // 遮罩层
                loading: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 往来单位数据
                unitList: [],
                // 工程数据
                projectList: [],
                statusList: [
                    { id: '0', name: '请选择' },
                    { id: '1', name: '已结算' },
                    { id: '2', name: '未结算' },
                    { id: '3', name: '待审核' },
                ], //集合
                // 表格数据
                agreementList: [],
                // 弹出层标题
                title: '',
                // 是否显示弹出层
                open: false,
                // 日期范围
                dateRange: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    keyWord: undefined,
                },
                // 表单参数
                form: {},
                //图片上传
                uploadHeader: process.env.VUE_APP_BASE_API,
                imageUrl: '',
                imageName: '',
                fileList: [],
                field101fileList: [],
                dialogImageUrl: '',
                dialogVisible: false,
                //上传地址
                // uploadUrl:'http://192.168.0.14:21624/system',//线上服务器地址+system
                // uploadUrl:'http://112.29.103.165:21626/system',//线上服务器地址+system
                uploadUrl: process.env.VUE_APP_BASE_API + '/system', // 上传的图片服务器地址
                // 表单校验
                rules: {
                    contractCode: [
                        {
                            required: true,
                            message: '合同编号不能为空',
                            trigger: 'blur',
                        },
                    ],
                    signTime: [
                        {
                            required: true,
                            message: '签订日期不能为空',
                            trigger: 'blur',
                        },
                    ],
                    unitName: [
                        {
                            required: true,
                            message: '往来单位不能为空',
                            trigger: 'blur',
                        },
                    ],
                    projectName: [
                        {
                            required: true,
                            message: '工程名称不能为空',
                            trigger: 'blur',
                        },
                    ],
                },
                peopleOpen: false,
                noticeOpen: false,
                nform: {
                    notice: '',
                },
                nrules: {
                    notice: [
                        {
                            required: true,
                            message: '通知内容不能为空',
                            trigger: 'blur',
                        },
                    ],
                },
                leaseList: [], //租赁费用列表
                leaseCost: 0,
                repairList: [], //维修费用列表
                repairCost: 0,
                scrapList: [], //报废费用列表
                scrapCost: 0,
                loseList: [], //丢失费用列表
                loseCost: 0,
                costAll: 0,
                deptName: undefined,
                applyVisible: false,
                applyList: [],
            }
        },
        mounted() {
            let arr = JSON.parse(this.$route.query.rowData)
            this.rowData = arr
            this.getDataAll()
            //   this.getUnitList();
            //   this.getProjectList();
        },
        methods: {
            //获取单位类型 ,getUnitList, getProjectList
            getUnitList() {
                getUnitList().then((response) => {
                    this.unitList = response.data
                })
            },
            getProjectList() {
                getProjectList().then((response) => {
                    this.projectList = response.data
                })
            },

            /** 查询列表 */
            getDataAll() {
                getSltInfo(this.rowData).then((response) => {
                    // this.agreementList = response.rows;
                    this.leaseList = response.data.leaseList //租赁费用列表
                    this.leaseCost = this.countCost(this.leaseList)

                    this.repairList = response.data.repairList //维修费用列表
                    this.repairCost = this.countCost(this.repairList)

                    this.scrapList = response.data.scrapList //报废费用列表
                    this.scrapCost = this.countCost(this.scrapList)

                    this.loseList = response.data.loseList //丢失费用列表
                    this.loseCost = this.countCost(this.loseList)

                    this.applyList = response.data.relations
                    this.applyList.forEach((item) => {
                        item.cost =
                            Number(item.leaseCost) +
                            Number(item.repairCost) +
                            Number(item.scrapCost) +
                            Number(item.loseCost) +
                            Number(item.addCost) -
                            Number(item.subCost)
                    })

                    let costSum =
                        Number(this.leaseCost) +
                        Number(this.repairCost) +
                        Number(this.scrapCost) +
                        Number(this.loseCost)
                    this.costAll = costSum.toFixed(2)
                })
            },
            //计算金额1
            countCost(list) {
                let arrCost = 0
                list.forEach((item) => {
                    // arrCost += parseInt(item.costs)

                    console.log(item)
                    if (item.partType != 0 && item.scrapType != 0) {
                        arrCost = arrCost + Number(item.costs)
                    }
                })
                return arrCost.toFixed(2)
            },
            //提交按钮
            handleAdd() {
                this.applyVisible = true
            },
            //el-table-合计总费用
            getSummaries(param) {
                const { columns, data } = param
                const sums = []
                columns.forEach((column, index) => {
                    if (index === 9) {
                        sums[index] = '最终费用'
                        return
                    }
                    const values = data.map((item) =>
                        Number(item[column.property]),
                    )
                    // 只对amount这一列进行总计核算。
                    if (column.property === 'cost') {
                        if (!values.every((value) => isNaN(value))) {
                            sums[index] = values.reduce((prev, curr) => {
                                const value = Number(curr)
                                if (!isNaN(value)) {
                                    return prev + curr
                                } else {
                                    return prev
                                }
                            }, 0)
                            // sums[index] += ' 元';
                        } else {
                            sums[index] = '---'
                        }
                    }
                })
                return sums
            },

            countNum(row) {
                row.cost =
                    Number(row.leaseCost) +
                    Number(row.repairCost) +
                    Number(row.scrapCost) +
                    Number(row.loseCost) +
                    Number(row.addCost) -
                    Number(row.subCost)
            },

            //提交按钮
            submitApply() {
                let costAll = 0
                this.applyList.forEach((item) => {
                    costAll = costAll + item.cost
                })
                console.log(costAll)
                let param = {
                    relations: this.applyList,
                    cost: costAll,
                }
                console.log(param)
                submitFee(param).then((res) => {
                    console.log(res)
                    if (res.code == 200) {
                        this.$tab.closeOpenPage({
                            path: '/cost/cost/costApplyList',
                        })
                    }
                })
            },
            //返回
            handleBack() {
                this.$tab.closeOpenPage({
                    path: '/cost/cost/costApplyList',
                    query: {
                        isEdit: true,
                    },
                })
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map((item) => item.agreementId)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },
            /** 导出按钮操作 */
            //租赁
            handleExport1() {
                this.downloadJson(
                    'material/sltAgreementInfo/exportLease',
                    JSON.stringify(this.rowData),
                    `租赁费用明细_${new Date().getTime()}.xlsx`,
                )
            },
            //丢失
            handleExport2() {
                this.downloadJson(
                    'material/sltAgreementInfo/exportLose',
                    JSON.stringify(this.rowData),
                    `丢失费用明细_${new Date().getTime()}.xlsx`,
                )
            },
            // 维修
            handleExport3() {
                this.downloadJson(
                    'material/sltAgreementInfo/exportRepair',
                    JSON.stringify(this.rowData),
                    `维修费用明细_${new Date().getTime()}.xlsx`,
                )
            },
            //报废
            handleExport4() {
                this.downloadJson(
                    'material/sltAgreementInfo/exportScrap',
                    JSON.stringify(this.rowData),
                    `报废费用明细_${new Date().getTime()}.xlsx`,
                )
            },
            handleExportAll() {
                this.handleExport1()
                this.handleExport2()
                this.handleExport3()
                this.handleExport4()
            },
        },
    }
</script>
<style lang="scss" scoped>
    ::v-deep.el-table .fixed-width .el-button--mini {
        width: 80px !important;
        margin-bottom: 10px;
    }
</style>
