<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="warning" size="mini" @click="handleExportEach">各结算明细导出</el-button>
                <el-button type="primary" size="mini" @click="handlePrint">打印</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>

        <vue-easy-print tableShow ref="remarksPrintRef" class="print">
            <div style="margin: 20px 0">
                <!-- 基本信息表格 -->
                <table
                    border="1"
                    cellspacing="0"
                    cellpadding="6"
                    style="width: 100%; border-collapse: collapse; text-align: center; margin-bottom: 20px"
                >
                    <!-- 表头 -->
                    <tr>
                        <th colspan="11">结算费用</th>
                    </tr>
                    <!-- 单位 & 工程 -->
                    <tr>
                        <td style="width: 100px; text-align: center">结算单位</td>
                        <td colspan="10" style="text-align: center">{{ unitName }}</td>
                    </tr>
                    <tr>
                        <td style="text-align: center">结算工程</td>
                        <td colspan="10" style="text-align: center">{{ projectName }}</td>
                    </tr>
                </table>

                <!-- 租赁费用明细表格 -->
                <div class="table-container lease-table">
                    <!-- 固定表头 -->
                    <div class="table-header">
                        <table border="1" cellspacing="0" cellpadding="6" class="header-table">
                            <colgroup>
                                <col style="width: 60px" />
                                <col style="width: 150px" />
                                <col style="width: 150px" />
                                <col style="width: 60px" />
                                <col style="width: 80px" />
                                <col style="width: 80px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 80px" />
                                <col style="width: 120px" />
                                <col style="width: 100px" />
                            </colgroup>
                            <tr>
                                <th colspan="11">租赁费用明细</th>
                            </tr>
                            <tr>
                                <th>序号</th>
                                <th>设备名称</th>
                                <th>规格型号</th>
                                <th>计量单位</th>
                                <th>租赁单价</th>
                                <th>租赁数量</th>
                                <th>租赁日期</th>
                                <th>归还日期</th>
                                <th>租赁天数</th>
                                <th>租赁费用（元）</th>
                                <th>备注</th>
                            </tr>
                        </table>
                    </div>

                    <!-- 滚动数据区域 -->
                    <div class="table-body">
                        <table border="1" cellspacing="0" cellpadding="6" class="data-table">
                            <colgroup>
                                <col style="width: 60px" />
                                <col style="width: 150px" />
                                <col style="width: 150px" />
                                <col style="width: 60px" />
                                <col style="width: 80px" />
                                <col style="width: 80px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 80px" />
                                <col style="width: 120px" />
                                <col style="width: 100px" />
                            </colgroup>
                            <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>{{ item.leasePrice ? item.leasePrice.toFixed(3) : '0' }}</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>{{ item.costs ? item.costs.toFixed(2) : '0' }}</td>
                                <td>{{ item.unitName }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- 小计 -->
                <table
                    border="1"
                    cellspacing="0"
                    cellpadding="6"
                    style="width: 100%; border-collapse: collapse; text-align: center; margin-top: -1px"
                >
                    <tr>
                        <td style="text-align: center">费用小计： {{ leaseCost }}</td>
                    </tr>
                </table>
            </div>

            <div style="margin-bottom: 20px">
                <!-- 维修费用明细表格 -->
                <div class="table-container repair-table">
                    <!-- 固定表头 -->
                    <div class="table-header">
                        <table border="1" cellspacing="0" cellpadding="6" class="header-table">
                            <colgroup>
                                <col style="width: 80px" />
                                <col style="width: 150px" />
                                <col style="width: 150px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 140px" />
                                <col style="width: 120px" />
                            </colgroup>
                            <tr>
                                <th colspan="8">维修费用明细</th>
                            </tr>
                            <tr>
                                <th>序号</th>
                                <th>设备名称</th>
                                <th>规格型号</th>
                                <th>计量单位</th>
                                <th>维修数量</th>
                                <th>是否收费</th>
                                <th>维修费用（元）</th>
                                <th>备注</th>
                            </tr>
                        </table>
                    </div>

                    <!-- 滚动数据区域 -->
                    <div class="table-body">
                        <table border="1" cellspacing="0" cellpadding="6" class="data-table">
                            <colgroup>
                                <col style="width: 80px" />
                                <col style="width: 150px" />
                                <col style="width: 150px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 140px" />
                                <col style="width: 120px" />
                            </colgroup>
                            <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(2) }}</td>
                                <td v-else></td>
                                <td>{{ item.unitName }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- 小计 -->
                <table
                    border="1"
                    cellspacing="0"
                    cellpadding="6"
                    style="width: 100%; border-collapse: collapse; text-align: center; margin-top: -1px"
                >
                    <tr>
                        <td style="text-align: center">费用小计： {{ repairCost }}</td>
                    </tr>
                </table>
            </div>

            <div style="margin-bottom: 20px">
                <!-- 丢失费用明细表格 -->
                <div class="table-container lose-table">
                    <!-- 固定表头 -->
                    <div class="table-header">
                        <table border="1" cellspacing="0" cellpadding="6" class="header-table">
                            <colgroup>
                                <col style="width: 80px" />
                                <col style="width: 180px" />
                                <col style="width: 180px" />
                                <col style="width: 120px" />
                                <col style="width: 120px" />
                                <col style="width: 120px" />
                                <col style="width: 140px" />
                                <col style="width: 120px" />
                            </colgroup>
                            <tr>
                                <th colspan="8">丢失费用明细</th>
                            </tr>
                            <tr>
                                <th>序号</th>
                                <th>设备名称</th>
                                <th>规格型号</th>
                                <th>计量单位</th>
                                <th>扣款单价</th>
                                <th>丢失数量</th>
                                <th>丢失费用（元）</th>
                                <th>备注</th>
                            </tr>
                        </table>
                    </div>

                    <!-- 滚动数据区域 -->
                    <div class="table-body">
                        <table border="1" cellspacing="0" cellpadding="7" class="data-table">
                            <colgroup>
                                <col style="width: 80px" />
                                <col style="width: 180px" />
                                <col style="width: 180px" />
                                <col style="width: 120px" />
                                <col style="width: 120px" />
                                <col style="width: 120px" />
                                <col style="width: 140px" />
                                <col style="width: 120px" />
                            </colgroup>
                            <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.buyPrice">{{ item.buyPrice.toFixed(2) }}</td>
                                <td v-else></td>
                                <td v-if="item.num">{{ item.num.toFixed(2) }}</td>
                                <td v-else></td>
                                <td v-if="item.costs">{{ item.costs.toFixed(2) }}</td>
                                <td v-else></td>
                                <td>{{ item.unitName }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- 小计 -->
                <table
                    border="1"
                    cellspacing="0"
                    cellpadding="6"
                    style="width: 100%; border-collapse: collapse; text-align: center; margin-top: -1px"
                >
                    <tr>
                        <td style="text-align: center">费用小计： {{ loseCost }}</td>
                    </tr>
                </table>
            </div>

            <div style="margin-bottom: 20px">
                <!-- 报废费用明细表格 -->
                <div class="table-container scrap-table">
                    <!-- 固定表头 -->
                    <div class="table-header">
                        <table border="1" cellspacing="0" cellpadding="6" class="header-table">
                            <colgroup>
                                <col style="width: 80px" />
                                <col style="width: 150px" />
                                <col style="width: 150px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 140px" />
                                <col style="width: 120px" />
                            </colgroup>
                            <tr>
                                <th colspan="9">报废费用明细</th>
                            </tr>
                            <tr>
                                <th>序号</th>
                                <th>设备名称</th>
                                <th>规格型号</th>
                                <th>计量单位</th>
                                <th>报废数量</th>
                                <th>扣款单价</th>
                                <th>是否收费</th>
                                <th>报废费用（元）</th>
                                <th>备注</th>
                            </tr>
                        </table>
                    </div>

                    <!-- 滚动数据区域 -->
                    <div class="table-body">
                        <table border="1" cellspacing="0" cellpadding="6" class="data-table">
                            <colgroup>
                                <col style="width: 80px" />
                                <col style="width: 150px" />
                                <col style="width: 150px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 140px" />
                                <col style="width: 120px" />
                            </colgroup>
                            <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 v-if="item.buyPrice">{{ item.buyPrice.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>
                                <td>{{ item.unitName }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- 小计 -->
                <table
                    border="1"
                    cellspacing="0"
                    cellpadding="6"
                    style="width: 100%; border-collapse: collapse; text-align: center; margin-top: -1px"
                >
                    <tr>
                        <td style="text-align: center">费用小计： {{ scrapCost }}</td>
                    </tr>
                </table>
            </div>

            <div style="margin-bottom: 20px">
                <!-- 减免费用明细表格 -->
                <div class="table-container reduce-table">
                    <!-- 固定表头 -->
                    <div class="table-header">
                        <table border="1" cellspacing="0" cellpadding="6" class="header-table">
                            <colgroup>
                                <col style="width: 60px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 80px" />
                                <col style="width: 80px" />
                                <col style="width: 80px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 80px" />
                                <col style="width: 120px" />
                                <col style="width: 120px" />
                                <col style="width: 120px" />
                            </colgroup>
                            <tr>
                                <th colspan="12">减免费用明细</th>
                            </tr>
                            <tr>
                                <th>序号</th>
                                <th>设备名称</th>
                                <th>规格型号</th>
                                <th>计量单位</th>
                                <th>租赁单价</th>
                                <th>减免数量</th>
                                <th>减免开始日期</th>
                                <th>减免结束日期</th>
                                <th>减免天数</th>
                                <th>减免原因</th>
                                <th>减免费用（元）</th>
                                <th>备注</th>
                            </tr>
                        </table>
                    </div>

                    <!-- 滚动数据区域 -->
                    <div class="table-body">
                        <table border="1" cellspacing="0" cellpadding="6" class="data-table">
                            <colgroup>
                                <col style="width: 60px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 80px" />
                                <col style="width: 80px" />
                                <col style="width: 80px" />
                                <col style="width: 100px" />
                                <col style="width: 100px" />
                                <col style="width: 80px" />
                                <col style="width: 120px" />
                                <col style="width: 120px" />
                                <col style="width: 120px" />
                            </colgroup>
                            <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>
                                <td>{{ item.unitName }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- 小计和合计 -->
                <table
                    border="1"
                    cellspacing="0"
                    cellpadding="6"
                    style="width: 100%; border-collapse: collapse; text-align: center; margin-top: -1px"
                >
                    <tr>
                        <td style="text-align: center">费用小计： {{ reducCost }}</td>
                    </tr>
                    <tr>
                        <td 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: 'ApplyDetail',
    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('📋 ApplyDetail 组件挂载，接收到的 row 数据:', this.row)
        this.initData()
        //   this.getUnitList();
        //   this.getProjectList();
    },
    activated() {
        // 当组件被 keep-alive 缓存后重新激活时调用
        console.log('📋 ApplyDetail 组件激活 (keep-alive)，row 数据:', this.row)
        this.initData()
    },
    watch: {
        // 监听 row 数据变化
        row: {
            handler(newVal, oldVal) {
                console.log('📋 监听到 row 数据变化:', { newVal, oldVal })
                if (newVal && newVal !== oldVal) {
                    this.initData()
                }
            },
            immediate: false
        }
    },
    methods: {
        handlePrint(orientation = 'portrait') {
            // 设置打印方向（通过动态样式注入）
            const printStyle = document.createElement('style')
            printStyle.setAttribute('type', 'text/css')
            printStyle.innerHTML = `
                @page { size: A4 ${orientation}; margin: 10mm; }
            `
            document.head.appendChild(printStyle)

            // 临时取消滚动限制
            const tableBodies = document.querySelectorAll('.table-body')
            tableBodies.forEach(body => {
                body.dataset.originalMaxHeight = body.style.maxHeight
                body.style.maxHeight = 'none'
                body.style.overflow = 'visible'
            })

            this.$nextTick(() => {
                // 调用 vue-easy-print 组件打印
                this.$refs.remarksPrintRef.print()

                // 打印后恢复样式
                setTimeout(() => {
                    tableBodies.forEach(body => {
                        body.style.maxHeight = body.dataset.originalMaxHeight || '300px'
                        body.style.overflowY = 'auto'
                    })

                    // 移除临时 @page 样式
                    document.head.removeChild(printStyle)
                }, 300)
            })
        },
        // 初始化数据 - 统一处理数据解析和API调用
        initData() {
            if (!this.row) {
                console.log('📋 row 数据为空，跳过初始化')
                return
            }

            console.log('📋 开始初始化数据，row:', this.row)
            let arr = JSON.parse(this.row)
            console.log('📋 解析后的数据:', arr)
            this.rowData = arr
            console.log('📋 准备调用 getDataAll() 获取详情数据')
            this.exportName = arr.map(item => {
                const projectName = item.projectName || ''
                const unitName = item.unitName || ''
                const agreementCode = item.agreementCode || ''
                return `${projectName}_${unitName}_${agreementCode}`
            }).join(', ') // 用逗号和空格连接所有项

            this.getDataAll()
        },
        //获取单位类型 ,getUnitList, getProjectList
        getUnitList() {
            getUnitList().then(response => {
                this.unitList = response.data
            })
        },
        getProjectList() {
            getProjectList().then(response => {
                this.projectList = response.data
            })
        },
        /** 查询列表 */
        getDataAll() {
            console.log('🔥 开始调用 getSltInfo API，传入参数:', this.rowData)
            getSltInfo(this.rowData)
                .then(response => {
                    console.log('🔥 API 调用成功，返回数据:', response)
                    console.log('🔥 返回的详情数据:', response.data)
                    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 //减免费用列表
                    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
                })
                .catch(error => {
                    console.error('❌ API 调用失败:', error)
                    this.$message.error('获取结算详情失败: ' + (error.message || error))
                })
        },
        //计算金额1
        countCost(list) {
            let arrCost = 0
            list.forEach(item => {
                // arrCost += parseInt(item.costs)
                if (item.partType != 0 && item.scrapType != 0) {
                    arrCost = arrCost + Number(item.costs)
                }
            })

            return arrCost.toFixed(2)
        },
        //提交按钮
        handleAdd() {
            this.$modal
                .confirm('是否确认提交？')
                .then(() => {
                    let params = {
                        agreementIds: Array.isArray(this.rowData) ? this.rowData.map(item => item.agreementId) : [],
                        totalCostAll: this.costAll,
                        leaseList: this.leaseList,
                        repairList: this.repairList,
                        scrapList: this.scrapList,
                        loseList: this.loseList,
                        reductionList: this.reducList,
                        settlementType: this.rowData[0].settlementType || ''
                    }
                    console.log('2222222222222', params)
                    this.loading = true
                    submitCosts(params).then(response => {
                        this.loading = false
                        this.$message({
                            type: 'success',
                            message: '提交成功'
                        })
                        
                        this.$emit('isReset')
                    })
                })
                .catch(() => {})
        },
        //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`
            )
        },
        handleExportEach() {
            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/exportEach',
                { ...params },
                `${this.exportName}_各费用明细_${currentTime}.xlsx`
            )
        }
    }
}
</script>
<style scoped lang="scss">
.table-container {
    position: relative;
    border: 1px solid #dfe6ec;
    border-radius: 4px;
    overflow: visible; /* 取消滚动条 */
    margin-bottom: 0;
    background-color: #fff;
}

/* 表头 */
.table-header {
    position: relative;
    z-index: 10;
    background-color: #f8f8f9;

    .header-table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
        table-layout: fixed;

        th {
            background-color: #f8f8f9;
            color: #303133;
            font-weight: bold;
            padding: 8px 6px;
            border: 1px solid #dfe6ec;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            box-sizing: border-box;
        }
    }
}

.table-body {
    max-height: 300px;
    overflow: visible;
    overflow-y: auto;
    /* 隐藏滚动条 - Webkit 浏览器 */
    &::-webkit-scrollbar {
        width: 0px;
        background: transparent;
    }

    /* Firefox */
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
    -ms-overflow-style: none; /* IE 10+ 隐藏滚动条 */

    .data-table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
        table-layout: fixed;

        td {
            padding: 8px 6px;
            border: 1px solid #dfe6ec;
            background-color: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            box-sizing: border-box;
        }

        tr:hover td {
            background-color: #f5f7fa;
        }
    }
}

/* 表头和表体宽度统一 */
.header-table,
.data-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/* 文字换行、边框一致 */
th,
td {
    box-sizing: border-box;
    word-break: break-word;
    word-wrap: break-word;
}

/* 打印优化 */
@media print {
    @page {
        size: A4 landscape; /* 默认横向打印 */
        margin: 10mm;
    }

    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .table-container {
        border: none !important;
        overflow: visible !important;
        page-break-inside: avoid;
    }

    .table-body {
        overflow: visible !important;
        max-height: none !important;
    }

    .table-header {
        width: 100% !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    th,
    td {
        font-size: 12px !important;
        padding: 6px 4px !important;
    }

    /* 隐藏滚动条 */
    ::-webkit-scrollbar {
        display: none !important;
    }
}

/* 响应式（可选） */
@media (max-width: 1200px) {
    .table-container {
        overflow-x: auto;
    }
    .header-table,
    .data-table {
        min-width: 800px;
    }
}
</style>
