<template>
    <div class="app-container" >
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
            <el-form-item prop="projectIds">
                <treeselect
                    v-model="queryParams.proId"
                    :options="proList" :normalizer="normalizer"
                    :show-count="true" style="width: 240px" :disable-branch-nodes="true"
                    noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
                    placeholder="请选择工程" 
                />
            </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>{{
                        (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="工程名称" align="center" prop="projectName" :show-overflow-tooltip="true"/>
            <el-table-column label="投入费用(万元)" align="center" prop="inputCost" >
                <template slot-scope="scope">
                    {{ scope.row.inputCost? scope.row.inputCost.toFixed(2) : '0.00' }}
                </template>
            </el-table-column>
            <el-table-column label="在用费用(万元)" align="center" prop="useCost" >
                <template slot-scope="scope">
                    {{ scope.row.useCost ? scope.row.useCost.toFixed(2) : '0.00' }}
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script>
import {
  getProjectList,
} from '@/api/back/index.js'
import { getAssestsReportList } from '@/api/cost/cost'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import * as XLSX from 'xlsx';

export default {
    name: 'AssestsReportHome',
    components: { Treeselect },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 工程数据
            proList: [],
            // 表格数据
            tableList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                proId: null,
            },
        }
    },
    created() {
        this.GetProData()
        this.getList()
    },
    methods: {
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.name,
                children: node.children,
            };
        },

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

        /** 查询列表 */
        getList() {
            this.loading = true
            getAssestsReportList(this.queryParams).then((response) => {
                this.tableList = response.data.rows || []
                this.total = response.data.total
                this.loading = false
            }).catch((error) => {
                console.error('获取丢失费用报表失败:', error)
                this.tableList = []
                this.total = 0
                this.loading = false
            })
        },

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

        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                proId: null,
            }
            // 重新初始化默认日期范围
            this.resetForm('queryForm')
            this.handleQuery()
        },

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

            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());
            this.download(
                '/material/bm_report/exportAssetReportList',
                {
                ...this.queryParams,
                },
                `资产占有月度报表_${currentTime}.xlsx`
            )
        },
    },
}
</script>

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