<template>
    <div class="" id="leaseCostRangeReportList">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
            <el-form-item label="查询时间范围" prop="startDate">
                <el-date-picker
                v-model="queryParams.startDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="开始日期"
                @change="() => queryParams.endDate = ''"
                style="width: 130px"
                />
            </el-form-item>
            <el-form-item>-</el-form-item>
            <el-form-item prop="endDate">
                <el-date-picker
                v-model="queryParams.endDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="结束日期"
                :picker-options="{ disabledDate: (t) => t.getTime() < new Date(queryParams.startDate).getTime() - 86400000}"
                style="width: 130px"
                />
            </el-form-item>
            <el-form-item label="协议号" prop="agreementCode">
                <el-input v-model="queryParams.agreementCode" placeholder="请输入协议号" clearable style="width: 180px"/>
            </el-form-item>
            <el-form-item label="结算状态" prop="settlementStatus">
                <el-select v-model="queryParams.settlementStatus" placeholder="请选择结算状态" clearable style="width: 160px">
                    <el-option label="未结算" value="0"></el-option>
                    <el-option label="已结算" value="1"></el-option>
                </el-select>
            </el-form-item>
          <el-form-item label="竣工状态" prop="isFinish">
            <el-select v-model="queryParams.isFinish" placeholder="请选择竣工状态" clearable filterable>
              <el-option
                v-for="item in proStatus"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <el-button type="success" icon="el-icon-download" size="mini" @click="exportExcel" :disabled="tableList.length === 0">导出Excel</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="tableList" border stripe :max-height="650">
            <el-table-column label="序号" align="center" type="index" width="60">
                <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="协议号" align="center" prop="agreementCode" :show-overflow-tooltip="true" width="150"/>
            <el-table-column label="分公司" align="center" prop="impUnitName" width="150px":show-overflow-tooltip="true"/>
            <el-table-column label="结算单位" align="center" prop="unitName" :show-overflow-tooltip="true" width="180"/>
            <el-table-column label="结算工程" align="center" prop="projectName" :show-overflow-tooltip="true" width="200"/>
            <el-table-column label="结算状态" align="center" prop="isSettled" width="90">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.isSettled === '1' ? 'success' : 'warning'">
                        {{ scope.row.isSettled === '1' ? '已结算' : '未结算' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="设备类型数" align="center" prop="equipmentTypeCount" width="100"/>
            <el-table-column label="设备总数量" align="center" prop="totalEquipmentCount" width="100">
                <template slot-scope="scope">
                    {{ scope.row.totalEquipmentCount ? parseFloat(scope.row.totalEquipmentCount).toFixed(3) : '0.000' }}
                </template>
            </el-table-column>
            <el-table-column label="总租赁天数" align="center" prop="totalLeaseDays" width="100"/>
            <el-table-column label="总租赁费用（元）" align="center" prop="totalLeaseCost" width="130">
                <template slot-scope="scope">
                    {{ scope.row.totalLeaseCost ? parseFloat(scope.row.totalLeaseCost).toFixed(2) : '0.00' }}
                </template>
            </el-table-column>
            <el-table-column label="日均租金（元）" align="center" prop="avgDailyRent" width="120">
                <template slot-scope="scope">
                    {{ scope.row.avgDailyRent ? parseFloat(scope.row.avgDailyRent).toFixed(2) : '0.00' }}
                </template>
            </el-table-column>
            <el-table-column label="查询开始日期" align="center" prop="queryStartDate" width="120"/>
            <el-table-column label="查询结束日期" align="center" prop="queryEndDate" width="120"/>
            <el-table-column label="最早租赁时间" align="center" prop="earliestLeaseTime" width="120">
                <template slot-scope="scope">
                    {{ scope.row.earliestLeaseTime || '-' }}
                </template>
            </el-table-column>
            <el-table-column label="最晚归还时间" align="center" prop="latestReturnTime" width="120">
                <template slot-scope="scope">
                    {{ scope.row.latestReturnTime || '-' }}
                </template>
            </el-table-column>
            <el-table-column label="结算时间" align="center" prop="settlementTime" width="120">
                <template slot-scope="scope">
                    {{ scope.row.settlementTime || '-' }}
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.remark || '-' }}
                </template>
            </el-table-column>
          <el-table-column label="竣工状态" align="center" prop="isFinish" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isFinish == 1" effect="plain">已竣工</el-tag>
              <el-tag v-else-if="scope.row.isFinish == 0" type="warning" effect="plain">未竣工</el-tag>
              <template v-else>-</template>
            </template>
          </el-table-column>
          <el-table-column label="竣工日期" align="center" prop="actualEndDate" :show-overflow-tooltip="true" min-width="100">
            <template slot-scope="scope">
              {{ scope.row.actualEndDate || '-' }}
            </template>
          </el-table-column>
            <el-table-column label="操作" align="center" width="100" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view" @click="handleViewDetails(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>



        <!-- 详情弹窗 -->
        <el-dialog
            title="租赁费用明细详情"
            :visible.sync="detailDialogVisible"
            width="90%"
            :close-on-click-modal="false">
            <div v-if="detailDialogVisible">
                <div class="detail-header">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="detail-info">
                                <span class="label">协议号：</span>
                                <span class="value">{{ selectedRowData.agreementCode }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="detail-info">
                                <span class="label">结算单位：</span>
                                <span class="value">{{ selectedRowData.unitName }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="detail-info">
                                <span class="label">结算工程：</span>
                                <span class="value">{{ selectedRowData.projectName }}</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <div class="detail-operations">
                    <el-button type="success" icon="el-icon-download" size="mini" @click="exportDetailExcel" :disabled="detailTableList.length === 0">导出明细Excel</el-button>
                </div>

                <el-table v-loading="detailLoading" :data="detailTableList" border stripe max-height="400">
                    <el-table-column label="序号" align="center" type="index" width="60">
                        <template slot-scope="scope">
                            <span>{{ scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="机具名称" align="center" prop="typeName" :show-overflow-tooltip="true" width="150"/>
                    <el-table-column label="机具规格" align="center" prop="modelName" :show-overflow-tooltip="true" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.modelName || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="物资编码" align="center" prop="maCode" :show-overflow-tooltip="true" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.maCode || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="租赁数量" align="center" prop="num" width="100">
                        <template slot-scope="scope">
                            {{ scope.row.num ? parseFloat(scope.row.num).toFixed(3) : '0.000' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="单位" align="center" prop="mtUnitName" width="80"/>
                    <el-table-column label="租赁单价（元）" align="center" prop="leasePrice" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.leasePrice ? parseFloat(scope.row.leasePrice).toFixed(2) : '0.00' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="计算开始时间" align="center" prop="calcStartTime" width="120"/>
                    <el-table-column label="计算结束时间" align="center" prop="calcEndTime" width="120"/>
                    <el-table-column label="租赁天数" align="center" prop="leaseDays" width="100"/>
                    <el-table-column label="租赁费用（元）" align="center" prop="leaseCost" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.leaseCost ? parseFloat(scope.row.leaseCost).toFixed(2) : '0.00' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="结算状态" align="center" prop="isSettled" width="90">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.isSettled === '1' ? 'success' : 'warning'">
                                {{ scope.row.isSettled === '1' ? '已结算' : '未结算' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="结算时间" align="center" prop="settlementTime" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.settlementTime || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="出场时间" align="center" prop="startTime" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.startTime || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="退场时间" align="center" prop="endTime" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.endTime || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" min-width="100">
                        <template slot-scope="scope">
                            {{ scope.row.remark || '-' }}
                        </template>
                    </el-table-column>
                </el-table>


            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="detailDialogVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
  getProjectList,
  getUnitList,
  getAgreementInfoById,
  getUnitListFilterTeam,
} from '@/api/back/index.js'
import { getLeaseCostRangeReportList, getLeaseCostDetails } from '@/api/cost/cost'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import ExcelJS from 'exceljs';

export default {
    name: 'LeaseCostRangeReportHome',
    components: { Treeselect },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 显示搜索条件
            showSearch: true,

            // 单位数据
            unitList: [],
            // 工程数据
            proList: [],
            // 表格数据
            tableList: [],
            // 查询参数
            queryParams: {
                unitId: null,
                projectId: null,
                agreementCode: null,
                isSettled: null,
                dateRange: null,
                startDate: null,
                endDate: null,
            },
            proStatus:[
              { id: 0, name: '未竣工' },
              { id: 1, name: '已竣工' },
              { id: 2, name: '空白' },
            ],
            // 详情弹窗相关
            detailDialogVisible: false,
            detailLoading: false,

            detailTableList: [],
            selectedRowData: {},
            detailQueryParams: {
                agreementId: null,
                startDate: null,
                endDate: null,
            },
        }
    },
    created() {
        this.initDefaultDateRange()
        this.GetUnitData()
        this.GetProData()
        this.getList()
    },
    methods: {
        // 初始化默认日期范围（当月第一天到最后一天）
        initDefaultDateRange() {
            const now = new Date()
            const year = now.getFullYear()
            const month = now.getMonth()

            // 当月第一天
            const firstDay = new Date(year, month, 1)
            const firstDayStr = this.formatDate(firstDay)

            // 当月最后一天
            const lastDay = new Date(year, month + 1, 0)
            const lastDayStr = this.formatDate(lastDay)

            this.queryParams.dateRange = [firstDayStr, lastDayStr]
            this.queryParams.startDate = firstDayStr
            this.queryParams.endDate = lastDayStr
        },

        // 格式化日期为 yyyy-MM-dd 格式
        formatDate(date) {
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            return `${year}-${month}-${day}`
        },

        // 处理日期范围变化
        handleDateRangeChange(dateRange) {
            if (dateRange && dateRange.length === 2) {
                this.queryParams.startDate = dateRange[0]
                this.queryParams.endDate = dateRange[1]
            } else {
                this.queryParams.startDate = null
                this.queryParams.endDate = null
            }
        },

        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.name,
                children: node.children,
            };
        },

        // 获取 来往单位 列表数据
        async GetUnitData() {
            const params = {}
            const res = await getUnitListFilterTeam(params)
            this.unitList = res.data;
            this.getAgreementInfo()
        },

        unitChange(val){
            setTimeout(()=>{
                this.queryParams.projectId=null
                this.queryParams.agreementCode = null
                this.GetProData()
            },500)
        },

        // 获取 工程名称 列表数据
        async GetProData() {
            const params = {
                unitId: this.queryParams.unitId,
            }
            const res = await getProjectList(params)
            this.proList = res.data;
            this.getAgreementInfo()
        },

        proChange(val){
            setTimeout(()=>{
                this.GetUnitData()
            },500)
        },

        // 获取 协议id
        async getAgreementInfo() {
            if (this.queryParams.unitId && this.queryParams.projectId) {
                const params = {
                    unitId: this.queryParams.unitId,
                    projectId: this.queryParams.projectId,
                }
                const res = await getAgreementInfoById(params)
                if (!(res.data && res.data.agreementId)) {
                    this.$message.error('当前单位和工程无协议！')
                    this.queryParams.unitId = null
                    this.queryParams.projectId = null
                    this.GetUnitData()
                    this.GetProData()
                } else {
                    this.queryParams.agreementCode = res.data.agreementCode
                }
            }
        },

        /** 查询列表 */
        getList() {
            this.loading = true
            getLeaseCostRangeReportList(this.queryParams).then((response) => {
                this.tableList = response.rows || []
                this.loading = false
            }).catch((error) => {
                console.error('获取租赁费用区间报表失败:', error)
                this.tableList = []
                this.loading = false
            })
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.getList()
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                unitId: null,
                projectId: null,
                agreementCode: null,
                isSettled: null,
                dateRange: null,
                startDate: null,
                endDate: null,
            }
            // 重新初始化默认日期范围
            this.initDefaultDateRange()
            this.resetForm('queryForm')
            this.handleQuery()
        },

        // 导出Excel
        async exportExcel() {
            if (!this.tableList || this.tableList.length === 0) {
                this.$modal.msgWarning('没有可导出的数据');
                return;
            }

            try {
                // 创建工作簿
                const workbook = new ExcelJS.Workbook();
                const worksheet = workbook.addWorksheet('租赁费用区间统计报表');

                // 定义列配置
                const columns = [
                    { header: '序号', key: 'index', width: 8 },
                    { header: '协议号', key: 'agreementCode', width: 18 },
                    { header: '分公司', key: 'impUnitName', width: 18 },
                    { header: '结算单位', key: 'unitName', width: 20 },
                    { header: '结算工程', key: 'projectName', width: 25 },
                    { header: '结算状态', key: 'isSettled', width: 10 },
                    { header: '设备类型数', key: 'equipmentTypeCount', width: 12 },
                    { header: '设备总数量', key: 'totalEquipmentCount', width: 12 },
                    { header: '总租赁天数', key: 'totalLeaseDays', width: 12 },
                    { header: '总租赁费用（元）', key: 'totalLeaseCost', width: 18 },
                    { header: '日均租金（元）', key: 'avgDailyRent', width: 18 },
                    { header: '查询开始日期', key: 'queryStartDate', width: 15 },
                    { header: '查询结束日期', key: 'queryEndDate', width: 15 },
                    { header: '最早租赁时间', key: 'earliestLeaseTime', width: 15 },
                    { header: '最晚归还时间', key: 'latestReturnTime', width: 15 },
                    { header: '结算时间', key: 'settlementTime', width: 12 },
                    { header: '备注', key: 'remark', width: 20 },
                    { header: '竣工状态', key: 'isFinish', width: 18 },
                    { header: '竣工日期', key: 'actualEndDate', width: 18 }
                ];

                worksheet.columns = columns;

                // 定义表头样式
                const headerStyle = {
                    font: { bold: true, color: { argb: 'FFFFFFFF' }, size: 11 },
                    fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF4472C4' } },
                    alignment: { horizontal: 'center', vertical: 'center', wrapText: true },
                    border: {
                        top: { style: 'thin', color: { argb: 'FF000000' } },
                        bottom: { style: 'thin', color: { argb: 'FF000000' } },
                        left: { style: 'thin', color: { argb: 'FF000000' } },
                        right: { style: 'thin', color: { argb: 'FF000000' } }
                    }
                };

                // 定义数据行样式
                const dataStyle = {
                    alignment: { horizontal: 'center', vertical: 'center' },
                    border: {
                        top: { style: 'thin', color: { argb: 'FF000000' } },
                        bottom: { style: 'thin', color: { argb: 'FF000000' } },
                        left: { style: 'thin', color: { argb: 'FF000000' } },
                        right: { style: 'thin', color: { argb: 'FF000000' } }
                    }
                };

                // 设置表头样式
                worksheet.getRow(1).eachCell((cell) => {
                    cell.style = headerStyle;
                });

                // 添加数据行
                this.tableList.forEach((row, index) => {
                    const dataRow = {
                        index: String(index + 1),  // 转换为字符串，避免被格式化为小数
                        agreementCode: row.agreementCode || '',
                        impUnitName: row.impUnitName || '',
                        unitName: row.unitName || '',
                        projectName: row.projectName || '',
                        isSettled: row.isSettled === '1' ? '已结算' : '未结算',
                        equipmentTypeCount: row.equipmentTypeCount || '',
                        totalEquipmentCount: row.totalEquipmentCount ? parseFloat(row.totalEquipmentCount) : 0,
                        totalLeaseDays: row.totalLeaseDays || '',
                        totalLeaseCost: row.totalLeaseCost ? parseFloat(row.totalLeaseCost) : 0,
                        avgDailyRent: row.avgDailyRent ? parseFloat(row.avgDailyRent) : 0,
                        queryStartDate: row.queryStartDate || '',
                        queryEndDate: row.queryEndDate || '',
                        earliestLeaseTime: row.earliestLeaseTime || '',
                        latestReturnTime: row.latestReturnTime || '',
                        settlementTime: row.settlementTime || '',
                        remark: row.remark || '',
                        isFinish:  row.isFinish === '1' ? '已竣工'
                          : (row.isFinish === '0' ? '未竣工' : ''),
                        actualEndDate: row.actualEndDate || ''
                    };

                    const newRow = worksheet.addRow(dataRow);

                    // 设置数据行样式
                    newRow.eachCell((cell) => {
                        cell.style = dataStyle;
                    });

                    // 设置数字格式
                    newRow.getCell(7).numFmt = '0.000';  // 设备总数量
                    newRow.getCell(9).numFmt = '0.00';   // 总租赁费用
                    newRow.getCell(10).numFmt = '0.00';  // 日均租金
                });

                // 生成文件名
                let fileName = '租赁费用区间统计报表';
                if (this.queryParams.startDate && this.queryParams.endDate) {
                    fileName += `_${this.queryParams.startDate}_至_${this.queryParams.endDate}`;
                }
                fileName += `_${new Date().toISOString().slice(0, 10)}.xlsx`;

                // 生成Excel文件并下载
                const buffer = await workbook.xlsx.writeBuffer();
                const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

                // 创建下载链接
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                link.setAttribute('download', fileName);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);

                // 清理URL对象
                URL.revokeObjectURL(url);

                this.$modal.msgSuccess('Excel导出成功');
            } catch (error) {
                console.error('导出Excel失败:', error);
                this.$modal.msgError('导出Excel失败，请稍后重试');
            }
        },

        /** 查看详情 */
        handleViewDetails(row) {
            this.selectedRowData = row
            this.detailQueryParams = {
                agreementId: row.agreementId,
                startDate: this.queryParams.startDate,
                endDate: this.queryParams.endDate,
            }
            this.detailDialogVisible = true
            this.getDetailList()
        },

        /** 获取详情列表 */
        getDetailList() {
            this.detailLoading = true
            getLeaseCostDetails(this.detailQueryParams).then((response) => {
                this.detailTableList = response.rows || []
                this.detailLoading = false
            }).catch((error) => {
                console.error('获取租赁费用明细失败:', error)
                this.detailTableList = []
                this.detailLoading = false
            })
        },

        /** 导出详情Excel */
        async exportDetailExcel() {
            if (!this.detailTableList || this.detailTableList.length === 0) {
                this.$modal.msgWarning('没有可导出的详情数据');
                return;
            }

            try {
                // 创建工作簿
                const workbook = new ExcelJS.Workbook();
                const worksheet = workbook.addWorksheet('租赁费用明细');

                // 定义列配置
                const columns = [
                    { header: '序号', key: 'index', width: 8 },
                    { header: '协议号', key: 'agreementCode', width: 18 },
                    { header: '机具名称', key: 'typeName', width: 20 },
                    { header: '机具规格', key: 'modelName', width: 15 },
                    { header: '物资编码', key: 'maCode', width: 15 },
                    { header: '租赁数量', key: 'num', width: 12 },
                    { header: '单位', key: 'mtUnitName', width: 8 },
                    { header: '租赁单价（元）', key: 'leasePrice', width: 18 },
                    { header: '计算开始时间', key: 'calcStartTime', width: 15 },
                    { header: '计算结束时间', key: 'calcEndTime', width: 15 },
                    { header: '租赁天数', key: 'leaseDays', width: 10 },
                    { header: '租赁费用（元）', key: 'leaseCost', width: 18 },
                    { header: '结算状态', key: 'isSettled', width: 10 },
                    { header: '结算时间', key: 'settlementTime', width: 15 },
                    { header: '出场时间', key: 'startTime', width: 15 },
                    { header: '退场时间', key: 'endTime', width: 15 },
                    { header: '备注', key: 'remark', width: 20 }
                ];

                worksheet.columns = columns;

                // 定义表头样式
                const headerStyle = {
                    font: { bold: true, color: { argb: 'FFFFFFFF' }, size: 11 },
                    fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF4472C4' } },
                    alignment: { horizontal: 'center', vertical: 'center', wrapText: true },
                    border: {
                        top: { style: 'thin', color: { argb: 'FF000000' } },
                        bottom: { style: 'thin', color: { argb: 'FF000000' } },
                        left: { style: 'thin', color: { argb: 'FF000000' } },
                        right: { style: 'thin', color: { argb: 'FF000000' } }
                    }
                };

                // 定义数据行样式
                const dataStyle = {
                    alignment: { horizontal: 'center', vertical: 'center' },
                    border: {
                        top: { style: 'thin', color: { argb: 'FF000000' } },
                        bottom: { style: 'thin', color: { argb: 'FF000000' } },
                        left: { style: 'thin', color: { argb: 'FF000000' } },
                        right: { style: 'thin', color: { argb: 'FF000000' } }
                    }
                };

                // 设置表头样式
                worksheet.getRow(1).eachCell((cell) => {
                    cell.style = headerStyle;
                });

                // 添加数据行
                this.detailTableList.forEach((row, index) => {
                    const dataRow = {
                        index: String(index + 1),  // 转换为字符串，避免被格式化为小数
                        agreementCode: row.agreementCode || '',
                        typeName: row.typeName || '',
                        modelName: row.modelName || '',
                        maCode: row.maCode || '',
                        num: row.num ? parseFloat(row.num) : 0,
                        mtUnitName: row.mtUnitName || '',
                        leasePrice: row.leasePrice ? parseFloat(row.leasePrice) : 0,
                        calcStartTime: row.calcStartTime || '',
                        calcEndTime: row.calcEndTime || '',
                        leaseDays: row.leaseDays || '',
                        leaseCost: row.leaseCost ? parseFloat(row.leaseCost) : 0,
                        isSettled: row.isSettled === '1' ? '已结算' : '未结算',
                        settlementTime: row.settlementTime || '',
                        startTime: row.startTime || '',
                        endTime: row.endTime || '',
                        remark: row.remark || ''
                    };

                    const newRow = worksheet.addRow(dataRow);

                    // 设置数据行样式
                    newRow.eachCell((cell) => {
                        cell.style = dataStyle;
                    });

                    // 设置数字格式
                    newRow.getCell(6).numFmt = '0.000';   // 租赁数量
                    newRow.getCell(8).numFmt = '0.00';    // 租赁单价
                    newRow.getCell(12).numFmt = '0.00';   // 租赁费用
                });

                // 生成文件名
                let fileName = `租赁费用明细_${this.selectedRowData.agreementCode}`;
                if (this.detailQueryParams.startDate && this.detailQueryParams.endDate) {
                    fileName += `_${this.detailQueryParams.startDate}_至_${this.detailQueryParams.endDate}`;
                }
                fileName += `_${new Date().toISOString().slice(0, 10)}.xlsx`;

                // 生成Excel文件并下载
                const buffer = await workbook.xlsx.writeBuffer();
                const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

                // 创建下载链接
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                link.setAttribute('download', fileName);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);

                // 清理URL对象
                URL.revokeObjectURL(url);

                this.$modal.msgSuccess('详情Excel导出成功');
            } catch (error) {
                console.error('导出详情Excel失败:', error);
                this.$modal.msgError('导出详情Excel失败，请稍后重试');
            }
        },
    },
}
</script>

<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
    width: 80px !important;
    margin-bottom: 10px;
}

.detail-header {
    background-color: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 15px;

    .detail-info {
        margin-bottom: 10px;

        .label {
            font-weight: bold;
            color: #606266;
        }

        .value {
            color: #303133;
            margin-left: 5px;
        }
    }
}

.detail-operations {
    margin-bottom: 15px;
    text-align: right;
}
</style>
