<template>
    <div class="app-container">
        <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="handleExport3"
                    >维修明细导出</el-button>
                <el-button type="primary" size="mini" @click="handleExport4"
                    >报废明细导出</el-button>
                <el-button type="primary" size="mini" @click="handleExport2"
                    >丢失明细导出</el-button>
                <el-button type="primary" size="mini" @click="handleExport5"
                    >减免明细导出</el-button>
                <el-button type="warning" size="mini" @click="handleExportAll"
                    >全部明细导出</el-button>
                <el-button type="primary" size="mini" @click="handlePrint">打印</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> -->

        <vue-easy-print tableShow ref="remarksPrintRef" class="print">
            <!-- <div style="margin-top: 20px">
                <div class="tabelAllTop">
                    <div class="costTop">结算费用</div>
                </div>
                <div class="tabelAllTopUnit">
                    <div class="costTopUnit">结算单位</div>
                    <div class="costRightUnit">
                        {{ unitName }}
                    </div>
                </div>
                <div class="tabelAllTopUnit">
                    <div class="costTopUnit">结算工程</div>
                    <div class="costRightUnit">
                        {{ projectName }}
                    </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="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"
                        >
                            <template slot-scope="scope" v-show="scope.row.leasePrice">
                                {{ scope.row.leasePrice.toFixed(3) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="租赁数量" align="center" prop="num" :show-overflow-tooltip="true">
                            <template slot-scope="scope" v-show="scope.row.num">
                                {{ scope.row.num.toFixed(2) }}
                            </template>
                        </el-table-column>
                        <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">
                            <template slot-scope="scope" v-show="scope.row.leaseDays">
                                {{ Number(scope.row.leaseDays).toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="租赁费用（元）"
                            align="center"
                            prop="costs"
                            :show-overflow-tooltip="true"
                        >
                            <template slot-scope="scope" v-show="scope.row.costs">
                                {{ scope.row.costs.toFixed(3) }}
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>

                <div class="tabelAll">
                    <div class="columnAllNum">费用小计：</div>
                    <div class="columnAll">
                        {{ leaseCost }}
                    </div>
                </div>
            </div> -->

            <div style="margin: 20px 0">
                <table
                    border="1"
                    cellspacing="0"
                    cellpadding="6"
                    style="width: 100%; border-collapse: collapse; text-align: center"
                >
                    <!-- 表头 -->
                    <tr>
                        <th colspan="10">结算费用</th>
                    </tr>

                    <!-- 单位 & 工程 -->
                    <tr>
                        <td style="width: 100px; text-align: center">结算单位</td>
                        <td colspan="9" style="text-align: center">{{ unitName }}</td>
                    </tr>
                    <tr>
                        <td style="text-align: center">结算工程</td>
                        <td colspan="9" style="text-align: center">{{ projectName }}</td>
                    </tr>

                    <!-- 租赁费用明细表头 -->
                    <tr>
                        <th colspan="10">租赁费用明细</th>
                    </tr>
                    <tr>
                        <th style="width: 60px">序号</th>
                        <th>设备名称</th>
                        <th>规格型号</th>
                        <th>计量单位</th>
                        <th>租赁单价</th>
                        <th>租赁数量</th>
                        <th>租赁开始日期</th>
                        <th>租赁结束日期</th>
                        <th>租赁天数</th>
                        <th>租赁费用（元）</th>
                    </tr>

                    <!-- 租赁费用明细内容 -->
                    <tr v-for="(item, index) in leaseList" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.typeName }}</td>
                        <td>{{ item.modelName }}</td>
                        <td>{{ item.mtUnitName }}</td>
                        <td v-if="item.leasePrice">{{ item.leasePrice.toFixed(3) }}</td>
                        <td v-else></td>
                        <td v-if="item.num">{{ item.num.toFixed(2) }}</td>
                        <td v-else></td>
                        <td>{{ item.startTime }}</td>
                        <td>{{ item.endTime }}</td>
                        <td v-if="item.leaseDays">{{ Number(item.leaseDays).toFixed(2) }}</td>
                        <td v-else></td>
                        <td v-if="item.costs">{{ item.costs.toFixed(3) }}</td>
                        <td v-else></td>
                    </tr>

                    <!-- 小计 -->
                    <tr>
                        <td style="text-align: center">费用小计：</td>
                        <td colspan="9" style="text-align: center">{{ leaseCost }}</td>
                    </tr>
                </table>
            </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="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">
                            <template slot-scope="scope" v-show="scope.row.num">
                                {{ scope.row.num.toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="是否收费"
                            align="center"
                            prop="partType"
                            :show-overflow-tooltip="true"
                        />
                        <el-table-column
                            label="维修费用（元）"
                            align="center"
                            prop="costs"
                            :show-overflow-tooltip="true"
                        >
                            <template slot-scope="scope" v-show="scope.row.costs">
                                {{ scope.row.costs.toFixed(3) }}
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <div class="tabelAll">
                    <div class="columnAllNum">费用小计：</div>
                    <div class="columnAll">
                        {{ repairCost }}
                    </div>
                </div>
            </div> -->

            <div style="margin-bottom: 20px">
                <table
                    border="1"
                    cellspacing="0"
                    cellpadding="6"
                    style="width: 100%; border-collapse: collapse; text-align: center"
                >
                    <!-- 表头 -->
                    <tr>
                        <th colspan="7">维修费用明细</th>
                    </tr>
                    <tr>
                        <th style="width: 100px">序号</th>
                        <th>设备名称</th>
                        <th>规格型号</th>
                        <th>计量单位</th>
                        <th>维修数量</th>
                        <th>是否收费</th>
                        <th>维修费用（元）</th>
                    </tr>

                    <!-- 数据行 -->
                    <tr v-for="(item, index) in repairList" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.typeName }}</td>
                        <td>{{ item.modelName }}</td>
                        <td>{{ item.mtUnitName }}</td>
                        <td v-if="item.num">{{ item.num.toFixed(2) }}</td>
                        <td v-else></td>
                        <td>{{ item.partType }}</td>
                        <td v-if="item.costs">{{ item.costs.toFixed(3) }}</td>
                        <td v-else></td>
                    </tr>

                    <!-- 小计 -->
                    <tr>
                        <td style="text-align: center">费用小计：</td>
                        <td colspan="6" style="text-align: center">{{ repairCost }}</td>
                    </tr>
                </table>
            </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="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">
                            <template slot-scope="scope" v-show="scope.row.num">
                                {{ scope.row.num.toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="丢失费用（元）"
                            align="center"
                            prop="costs"
                            :show-overflow-tooltip="true"
                        >
                            <template slot-scope="scope" v-show="scope.row.costs">
                                {{ scope.row.costs.toFixed(3) }}
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <div class="tabelAll">
                    <div class="columnAllNum">费用小计：</div>
                    <div class="columnAll">
                        {{ loseCost }}
                    </div>
                </div>
            </div> -->

            <div style="margin-bottom: 20px">
                <table
                    border="1"
                    cellspacing="0"
                    cellpadding="6"
                    style="width: 100%; border-collapse: collapse; text-align: center"
                >
                    <!-- 表头 -->
                    <tr>
                        <th colspan="6">丢失费用明细</th>
                    </tr>
                    <tr>
                        <th style="width: 100px">序号</th>
                        <th>设备名称</th>
                        <th>规格型号</th>
                        <th>计量单位</th>
                        <th>丢失数量</th>
                        <th>丢失费用（元）</th>
                    </tr>

                    <!-- 数据行 -->
                    <tr v-for="(item, index) in loseList" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.typeName }}</td>
                        <td>{{ item.modelName }}</td>
                        <td>{{ item.mtUnitName }}</td>
                        <td v-if="item.num">{{ item.num.toFixed(2) }}</td>
                        <td v-else></td>
                        <td v-if="item.costs">{{ item.costs.toFixed(3) }}</td>
                        <td v-else></td>
                    </tr>

                    <!-- 小计 -->
                    <tr>
                        <td style="text-align: center">费用小计：</td>
                        <td colspan="5" style="text-align: center">{{ loseCost }}</td>
                    </tr>
                </table>
            </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="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">
                            <template slot-scope="scope" v-show="scope.row.num">
                                {{ scope.row.num.toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="是否收费"
                            align="center"
                            prop="partType"
                            :show-overflow-tooltip="true"
                        />
                        <el-table-column
                            label="报废费用（元）"
                            align="center"
                            prop="costs"
                            :show-overflow-tooltip="true"
                        >
                            <template slot-scope="scope" v-show="scope.row.costs">
                                {{ scope.row.costs.toFixed(3) }}
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <div class="tabelAll">
                    <div class="columnAllNum">费用小计：</div>
                    <div class="columnAll">
                        {{ scrapCost }}
                    </div>
                </div>
            </div> -->
            <div style="margin-bottom: 20px">
                <table
                    border="1"
                    cellspacing="0"
                    cellpadding="6"
                    style="width: 100%; border-collapse: collapse; text-align: center"
                >
                    <!-- 表头 -->
                    <tr>
                        <th colspan="7">报废费用明细</th>
                    </tr>
                    <tr>
                        <th style="width: 100px">序号</th>
                        <th>设备名称</th>
                        <th>规格型号</th>
                        <th>计量单位</th>
                        <th>报废数量</th>
                        <th>是否收费</th>
                        <th>报废费用（元）</th>
                    </tr>

                    <!-- 数据行 -->
                    <tr v-for="(item, index) in scrapList" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.typeName }}</td>
                        <td>{{ item.modelName }}</td>
                        <td>{{ item.mtUnitName }}</td>
                        <td v-if="item.num">{{ item.num.toFixed(2) }}</td>
                        <td v-else></td>
                        <td>{{ item.partType }}</td>
                        <td v-if="item.costs">{{ item.costs.toFixed(3) }}</td>
                        <td v-else></td>
                    </tr>

                    <!-- 小计 -->
                    <tr>
                        <td style="text-align: center">费用小计：</td>
                        <td colspan="6" style="text-align: center">{{ scrapCost }}</td>
                    </tr>
                </table>
            </div>

            <!-- <div>
                <el-table :data="reducList">
                    <el-table-column label="减免费用明细" align="center">
                        <el-table-column label="序号" align="center" type="index" width="60" />
                        <el-table-column
                            label="设备名称"
                            align="center"
                            prop="typeName"
                            :show-overflow-tooltip="true"
                        />
                        <el-table-column
                            label="规格型号"
                            align="center"
                            prop="modeName"
                            :show-overflow-tooltip="true"
                        />
                        <el-table-column
                            label="计量单位"
                            align="center"
                            prop="unitName"
                            :show-overflow-tooltip="true"
                        />
                        <el-table-column
                            label="租赁单价"
                            align="center"
                            prop="leasePrice"
                            :show-overflow-tooltip="true"
                        />
                        <el-table-column
                            label="减免数量"
                            align="center"
                            prop="reduceNum"
                            :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="days" :show-overflow-tooltip="true" />
                        <el-table-column label="减免原因" align="center" prop="remark" :show-overflow-tooltip="true" />
                        <el-table-column
                            label="减免费用（元）"
                            align="center"
                            prop="leaseMoney"
                            :show-overflow-tooltip="true"
                        >
                            <template slot-scope="scope" v-show="scope.row.leaseMoney">
                                {{ scope.row.leaseMoney.toFixed(3) }}
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <div class="tabelAllBottom">
                    <div class="columnAllNum">费用小计：</div>
                    <div class="columnAll">
                        {{ reducCost }}
                    </div>
                </div>
                <div class="tabelAllBottom">
                    <div class="columnAllNum">合计：</div>
                    <div class="columnAll">
                        {{ costAll.toFixed(2) }}
                    </div>
                </div>
            </div> -->

            <div style="margin-bottom: 20px">
                <table
                    border="1"
                    cellspacing="0"
                    cellpadding="6"
                    style="width: 100%; border-collapse: collapse; text-align: center"
                >
                    <!-- 表头 -->
                    <tr>
                        <th colspan="11">减免费用明细</th>
                    </tr>
                    <tr>
                        <th style="width: 100px">序号</th>
                        <th>设备名称</th>
                        <th>规格型号</th>
                        <th>计量单位</th>
                        <th>租赁单价</th>
                        <th>减免数量</th>
                        <th>减免开始日期</th>
                        <th>减免结束日期</th>
                        <th>减免天数</th>
                        <th>减免原因</th>
                        <th>减免费用（元）</th>
                    </tr>

                    <!-- 数据行 -->
                    <tr v-for="(item, index) in reducList" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.typeName }}</td>
                        <td>{{ item.modeName }}</td>
                        <td>{{ item.unitName }}</td>
                        <td v-if="item.leasePrice">{{ item.leasePrice }}</td>
                        <td v-else></td>
                        <td v-if="item.reduceNum">{{ item.reduceNum }}</td>
                        <td v-else></td>
                        <td>{{ item.startTime }}</td>
                        <td>{{ item.endTime }}</td>
                        <td>{{ item.days }}</td>
                        <td>{{ item.remark }}</td>
                        <td v-if="item.leaseMoney">{{ item.leaseMoney.toFixed(3) }}</td>
                        <td v-else></td>
                    </tr>

                    <!-- 小计 -->
                    <tr>
                        <td style="text-align: center">费用小计：</td>
                        <td colspan="10" style="text-align: center">{{ reducCost }}</td>
                    </tr>

                    <!-- 合计 -->
                    <tr>
                        <td style="text-align: center">合计：</td>
                        <td colspan="10" style="text-align: center">{{ costAll.toFixed(2) }}</td>
                    </tr>
                </table>
            </div>

            <div class="fillIn" style="margin-top: 20px; display: flex; justify-content: space-between">
                <div class="item" style="width: 33%">
                    <div>
                        <span>部门负责人：</span>
                    </div>
                </div>

                <div class="item" style="width: 33%">
                    <div>
                        <span>承租负责人：</span>
                    </div>
                </div>

                <div class="item" style="width: 33%">
                    <div>
                        <span>核算员：</span>
                    </div>
                </div>
            </div>
        </vue-easy-print>
    </div>
</template>

<script>
import { getSltInfo, submitFee,submitCosts } from '@/api/cost/cost'
import vueEasyPrint from 'vue-easy-print'

export default {
    components: { vueEasyPrint },
    name: '',
    dicts: [],
    props: {
        row: {
            type: [String],
        }
    },
    data() {
        return {
            // 往来单位数据
            unitList: [],
            // 工程数据
            projectList: [],
            leaseList: [], //租赁费用列表
            leaseCost: 0,
            repairList: [], //维修费用列表
            repairCost: 0,
            scrapList: [], //报废费用列表
            scrapCost: 0,
            loseList: [], //丢失费用列表
            loseCost: 0,
            reducList: [], //减免费用列表
            reducCost: 0,
            costAll: 0,
            deptName: undefined,
            applyList: [],
            projectName: undefined, //结算工程
            unitName: undefined, //结算单位
            exportName: '', //导出文件名
        }
    },
    mounted() {
        console.log('33333333333',this.row)
        let arr = JSON.parse(this.row)
        this.rowData = arr
        this.exportName = arr.map(item => {
            const projectName = item.projectName || ''
            const unitName = item.unitName || ''
            const agreementCode = item.agreementCode || ''
            return `${projectName}_${unitName}_${agreementCode}`
        }).join(', ') // 用逗号和空格连接所有项
        this.getDataAll()
        //   this.getUnitList();
        //   this.getProjectList();
    },
    methods: {
        handlePrint() {
            this.$refs.remarksPrintRef.print()
        },
        //获取单位类型 ,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.leaseList = response.data.leaseList //租赁费用列表
                this.projectName = response.data.projectName
                this.unitName = response.data.unitName
                this.leaseCost = this.countCost(this.leaseList)

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

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

                this.loseList = response.data.loseList //丢失费用列表
                this.loseCost = this.countCost(this.loseList)
                this.reducList = response.data.reductionList //减免费用列表
                console.log('111111111111111111',this.reducList)
                if(this.reducList!=null){
                this.reducList.forEach((item) => {
                    this.reducCost = Number(this.reducCost) + Number(item.leaseMoney)
                })
                }

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

                let costSum =
                    Number(this.leaseCost) +
                    Number(this.repairCost) +
                    Number(this.scrapCost) +
                    Number(this.loseCost)-
                    Number(this.reducCost)
                this.costAll = costSum
                this.subCostFlag = costSum
            })
        },
        //计算金额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)
        },
        //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 || 0) -
                Number(row.subCost || 0)
        },

        //返回
        handleBack() {
            this.$emit('goBackPage')
            // this.$tab.closeOpenPage({
            //     path: '/cost/costApplyList',
            //     query: {
            //         isEdit: true,
            //     },
            // })
        },
        /** 导出按钮操作 */
        //租赁
        handleExport1() {
          const formatTime = (date) => {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}${month}${day}_${hours}${minutes}${seconds}`;
          };

          const currentTime = formatTime(new Date());
            let data = _.cloneDeep(this.rowData);
            const params = {params:JSON.stringify(data)}
            this.download(
                'material/slt_agreement_info/exportLease',
                {...params,},
                `${this.exportName}_租赁费用明细_${currentTime}.xlsx`,
            )
        },
        //丢失
        handleExport2() {
          const formatTime = (date) => {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}${month}${day}_${hours}${minutes}${seconds}`;
          };

          const currentTime = formatTime(new Date());
            let data = _.cloneDeep(this.rowData);
            const params = {params:JSON.stringify(data)}
            this.download(
                'material/slt_agreement_info/exportLose',
                {...params,},
                `${this.exportName}_丢失费用明细_${currentTime}.xlsx`,
            )
        },
        // 维修
        handleExport3() {
          const formatTime = (date) => {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}${month}${day}_${hours}${minutes}${seconds}`;
          };

          const currentTime = formatTime(new Date());
            let data = _.cloneDeep(this.rowData);
            const params = {params:JSON.stringify(data)}
            this.download(
                'material/slt_agreement_info/exportRepair',
                {...params,},
                `${this.exportName}_维修费用明细_${currentTime}.xlsx`,
            )
        },
        //报废
        handleExport4() {
          const formatTime = (date) => {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}${month}${day}_${hours}${minutes}${seconds}`;
          };

          const currentTime = formatTime(new Date());
            let data = _.cloneDeep(this.rowData);
            const params = {params:JSON.stringify(data)}
            this.download(
                'material/slt_agreement_info/exportScrap',
                {...params,},
                `${this.exportName}_报废费用明细_${currentTime}.xlsx`,
            )
            // this.downloadJson(
            //     'material/slt_agreement_info/exportScrap',
            //     JSON.stringify(this.rowData),
            //     `报废费用明细_${new Date().getTime()}.xlsx`,
            // )
        },
        handleExport5() {
          const formatTime = (date) => {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}${month}${day}_${hours}${minutes}${seconds}`;
          };

          const currentTime = formatTime(new Date());
            let data = _.cloneDeep(this.rowData);
            const params = {params:JSON.stringify(data)}
            this.download(
               'material/slt_agreement_info/exportReduction',
                {...params,},
                `${this.exportName}_减免费用明细_${currentTime}.xlsx`,
            )
        },

        handleExportAll() {
          const formatTime = (date) => {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}${month}${day}_${hours}${minutes}${seconds}`;
          };

          const currentTime = formatTime(new Date());
            let data = _.cloneDeep(this.rowData);
            const params = {params:JSON.stringify(data)}
            this.download(
                'material/slt_agreement_info/exportAll',
                {...params,},
                `${this.exportName}_全部费用明细_${currentTime}.xlsx`,
            )
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
    width: 80px !important;
    margin-bottom: 10px;
}
.tabelAllTop {
  display: flex;
  border: 1px solid #dfe6ec;
  width:100%;
  height:50px;
  background-color: #f8f8f9;
  border-left: none;
  border-bottom: none;
  .costTop {
    display: flex;
    padding: 5px;
    border-left: 1px solid #dfe6ec;
    align-items: center;
    text-align: center;
    justify-content: center; /* 将内容对齐到中间 */
    width:100%;
    font-weight: bold; /* 添加字体加粗样式 */
  }
}
.tabelAllTopUnit {
  display: flex;
  border: 1px solid #dfe6ec;
  width:100%;
  height:50px;
  background-color: #f8f8f9;
  border-bottom: none;
 .costTopUnit {
    display: flex;
    padding: 5px;
    width:21.4%;
    border-left: none;
    align-items: center;
    text-align: center;
    justify-content: center; /* 将内容对齐到中间 */
    }
 .costRightUnit {
    display: flex;
    padding: 5px;
    border-left: 1px solid #dfe6ec;
    text-align: center;
    align-items: center;
    width:100%;
    justify-content: center; /* 将内容对齐到中间 */
    // padding-left: 20px; /* 添加左内边距 */
    }
}
.tabelAll {
  display: flex;
  border: 1px solid #dfe6ec;
  width:100%;
  border-bottom: 1px solid #dfe6ec;
  border-top: none;
  margin-bottom: 15px;
}
.tabelAllBottom {
  display: flex;
  border: 1px solid #dfe6ec;
  width:100%;
  border-bottom: 1px solid #dfe6ec;
  border-top: none;
}
.columnAll {
  display: flex;
  padding: 5px;
  border-left: 1px solid #dfe6ec;
  text-align: center;
  align-items: center;
  width:100%;
  justify-content: flex-end; /* 将内容对齐到右侧 */
  margin-right: 60px; /* 添加右边距 */
}
.columnAllNum {
  padding: 5px;
  text-align: center;
  width:21.4%;
  border-left: none;
}
/* 最后一列无右边框 */
.tabelAll .column:last-child {
  border-right: none;
}
</style>
