<!-- 多井能效分析方案详情 -->
<template>
    <div class="app-container">
        <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick" style="margin-top: -10px;">
            <el-tab-pane label="数据表格" name="dataTable">
                <DataTable ref="dataTableRef" :jh="queryParams.jh" :famc="queryParams.famc" :qk="queryParams.qk"
                    :ztcc="queryParams.ztcc" :jhs="queryParams.jhs" :cw="queryParams.cw" />
            </el-tab-pane>
            <el-tab-pane label="曲线图形" name="curveGraph" lazy>
                <CurveGraph ref="curveGraphRef" :jh="queryParams.jh" :famc="queryParams.famc" :qk="queryParams.qk"
                    :jhs="queryParams.jhs" :zbid="queryParams.zbid" :ztcc="queryParams.ztcc" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import DataTable from './components/DataTable.vue';
import CurveGraph from './components/CurveGraph.vue';

export default {
    name: "DjxxDetail",
    components: {
        DataTable,
        CurveGraph,
    },
    data() {
        return {
            // 当前激活的tab
            activeTab: 'dataTable',
            // 显示搜索条件
            showSearch: true,
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 查询参数
            queryParams: {
                jh: '',
                famc: '',
                qk: '',
                jhs: '',
                ztcc: '',
                zbid: '',
                cw: ''
            },
            // 标记是否是第一次进入页面
            isFirstLoad: true
        };
    },
    created() {
        // 获取路由参数
        console.log('详情页面created，完整路由对象:', this.$route);
        const { jh, famc, qk, jhs, ztcc, zbid, cw } = this.$route.params;
        console.log('路由参数:', { jh, famc, qk, jhs, ztcc, zbid, cw });

        // 检查参数是否为空或undefined
        // if (jh && jh !== 'undefined' && jh !== 'null') {
        this.queryParams.jh = jh;
        this.queryParams.famc = famc || '';
        this.queryParams.qk = qk || '';
        this.queryParams.jhs = jhs || '';
        this.queryParams.ztcc = ztcc || ''
        this.queryParams.zbid = zbid || ''
        this.queryParams.cw = cw || ''
        console.log('设置 queryParams:', this.queryParams);
        // 强制默认展示“数据表格”Tab
        this.activeTab = 'dataTable';
        // } else {
        //     console.warn('未获取到有效的路由参数 jh，当前参数:', { jh, famc, qk, jhs,ztcc });
        // }
        // 确保第一次进入页面时不会自动初始化组件
        console.log('页面初始化完成，等待用户点击tab');
    },
    mounted() {
        // 页面挂载后，延迟加载第一个tab的数据，避免立即显示加载动画
        this.$nextTick(() => {
            // 延迟一小段时间再加载数据，让页面先渲染完成
            setTimeout(() => {
                if (this.activeTab === 'dataTable') {
                    this.$refs.dataTableRef && this.$refs.dataTableRef.loadData && this.$refs.dataTableRef.loadData();
                }
            }, 100);
        });
    },
    methods: {
        /** 搜索按钮操作 */
        handleQuery() {
            this.loading = true;
            // 这里可以调用API进行数据查询
            setTimeout(() => {
                this.loading = false;
            }, 1000);
        },

        /** 移除记录按钮操作 */
        handleRemove() {
            if (this.ids.length === 0) {
                this.$message.warning('请选择要移除的记录');
                return;
            }
            this.$modal.confirm('是否确认移除选中的记录？').then(() => {
                // 这里可以调用API进行删除操作
                this.$modal.msgSuccess("移除成功");
            }).catch(() => { });
        },

        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id);
        },

        /** tab切换事件 */
        handleTabClick(tab) {
            console.log('切换到tab:', tab.name);
            // 标记已经不是第一次加载
            this.isFirstLoad = false;

            // 每次点击tab都调用loadData
            if (tab.name === 'dataTable') {
                this.$refs.dataTableRef && this.$refs.dataTableRef.loadData && this.$refs.dataTableRef.loadData();
            } else if (tab.name === 'curveGraph') {
                this.$refs.curveGraphRef && this.$refs.curveGraphRef.loadData && this.$refs.curveGraphRef.loadData();
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
    padding: 10px;
    box-sizing: border-box;
}

.tab-content {
    padding: 5px 0;
}

.chart-container {
    height: calc(100vh - 300px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 4px;

    h3 {
        color: #666;
        margin-bottom: 10px;
    }

    p {
        color: #999;
    }
}

::v-deep .el-table__cell>.cell {
    font-weight: normal;
}

::v-deep .el-table--medium .el-table__cell {
    padding: 5px 0 !important;
}

::v-deep .el-form-item {
    margin-bottom: 10px !important;
}

::v-deep .el-tabs__content {
    padding: 5px 0;
    margin-top: -10px;
}
</style>
