<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="handleExame"
                    >审批</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 }}:
            <div v-for="(item, index) in applyList" :key="index">
                租赁费用¥{{ item.leaseCost }}，维修费用¥{{
                    item.repairCost
                }}，报废费用¥{{ item.scrapCost }}，丢失费用{{
                    item.loseCost
                }},增加项费用¥{{ item.addCost }}，减免费用¥{{
                    item.subCost
                }}，增减原因：{{ item.remark }}
            </div>
        </div>

        <div>
            <el-table :data="leaseList">
               
                <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="mtUnitName" :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="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">
                <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="mtUnitName" :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">
                <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="mtUnitName" :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">
                <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="mtUnitName" :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="费用结算审核" :visible.sync="applyVisible" width="650px" append-to-body>
            <el-form ref="aform" :model="aform" label-width="120px">
                <el-form-item label="结算审核" prop="status">
                    <el-radio v-model="aform.status" label="1">通过</el-radio>
                    <el-radio v-model="aform.status" label="2">不通过</el-radio>
                </el-form-item>
                <el-form-item label="原因" prop="remark">
                    <el-input v-model="aform.remark" maxlength="100" placeholder="请输入" 
                    show-word-limit size="small" style="width: 350px" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button type="primary" @click="submitListForm">确 定</el-button>
                <el-button @click="applyVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

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

export default {
    name: 'Agreement',
    dicts: [],
    props: {
        row: { 
            type: [String, Number],
            default: () => {
                return "";
            },
        },
        rowId: {
            type: [String, Number],
            default: () => {
                return "";
            },
        }
    },
    data() {
        return {  
            // 往来单位数据
            unitList: [],
            // 工程数据
            projectList: [],      
            aform: { status: '1' },
            Id: '',
            leaseList: [], //租赁费用列表
            leaseCost: 0,
            repairList: [], //维修费用列表
            repairCost: 0,
            scrapList: [], //报废费用列表
            scrapCost: 0,
            loseList: [], //丢失费用列表
            loseCost: 0,
            costAll: 0,
            deptName: undefined,
            applyVisible: false,
            applyList: [],
            rowData: [],
        }
    },
    created() {
        let arr = JSON.parse(this.row)
        this.rowData = arr;
        this.Id = this.rowId;
        this.getDataAll(); 
    },
    methods: {
        //获取单位类型 ,getUnitList, getProjectList
        getUnitList() {
            getUnitList().then((response) => {
                this.unitList = response.data
            })
        },
        getProjectList() {
            getProjectList().then((response) => {
                this.projectList = response.data
            })
        }, 
        /** 查询列表 */
        getDataAll() {
            let param = {
                id: this.Id,
            }
            getSltExamInfo(param).then((response) => { 
                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 = response.data.cost
            })
        },
        //计算金额1
        countCost(list) {
            let arrCost = 0
            list.forEach((item) => {
                arrCost = arrCost + Number(item.costs)
                // console.log(arrCost)
            })
            // console.log(arrCost)
            return arrCost.toFixed(2)
        },
        //提交按钮
        handleExame() {
            this.applyVisible = true
        }, 
        // countNum(row){
        //   row.cost = Number(row.leaseCost)+Number(row.repairCost)+Number(row.scrapCost)+Number(row.loseCost)+Number(row.addCost)-Number(row.subCost)
        // }, 
        //提交按钮
        submitListForm() {
            // let costAll = 0
            // this.applyList.forEach(item=>{
            //   costAll=costAll+item.cost
            // })
            // console.log(costAll)
            let param = {
                id: this.Id,
                status: this.aform.status,
                remark: this.aform.remark,
            }
            console.log(param)
            settlementReview(param).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    this.$tab.closeOpenPage({
                        path: '/cost/cost/costList',
                    })
                }
            })
        },
        //返回
        handleBack() {
            // this.$tab.closeOpenPage({
            //     path: '/cost/cost/costList',
            //     query: {
            //         isEdit: true,
            //     },
            // })
        },
        /** 导出按钮操作 */
        //租赁
        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>
