<!-- 多井能效分析方案详情 -->
<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"
                    :jhs="queryParams.jhs" />
            </el-tab-pane>

            <el-tab-pane label="曲线图形" name="curveGraph">
                <CurveGraph ref="curveGraphRef" :jh="queryParams.jh" :famc="queryParams.famc" :qk="queryParams.qk"
                    :jhs="queryParams.jhs" :id="queryParams.id" />
            </el-tab-pane>

            <el-tab-pane label="直方图形" name="histogramGraph">
                <HistogramGraph ref="histogramGraphRef" :jh="queryParams.jh" :famc="queryParams.famc"
                    :qk="queryParams.qk" :jhs="queryParams.jhs" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

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

export default {
    name: "DjxxDetail",
    components: {
        DataTable,
        CurveGraph,
        HistogramGraph
    },
    data() {
        return {
            // 当前激活的tab
            activeTab: 'dataTable',
            // 显示搜索条件
            showSearch: true,
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 查询参数
            queryParams: {
                jh: '',
                famc: '',
                qk: '',
                jhs: ''
            },
            // 标记是否是第一次进入页面
            isFirstLoad: true
        };
    },
    created() {
        // 获取路由参数（使用query）
        console.log('详情页面created，完整路由对象:', this.$route);
        let { id, jh, famc, qk, jhs } = this.$route.query || {};
        console.log('路由query参数:', { id, jh, famc, qk, jhs });
        // 优先使用query，其次使用sessionStorage
        if (!jh || jh === 'undefined' || jh === 'null') {
            try {
                const cached = JSON.parse(sessionStorage.getItem('djxxDetailParams') || '{}');
                ({ id, jh, famc, qk, jhs } = { ...cached, ...this.$route.query });
                console.log('使用缓存参数:', { id, jh, famc, qk, jhs });
            } catch (e) {
                console.warn('读取缓存失败', e);
            }
        }
        if (jh && jh !== 'undefined' && jh !== 'null') {
            this.queryParams.id = id || '';
            this.queryParams.jh = jh || '';
            this.queryParams.famc = famc || '';
            this.queryParams.qk = qk || '';
            this.queryParams.jhs = jhs || '';
            // 缓存参数，便于刷新后保留
            sessionStorage.setItem('djxxDetailParams', JSON.stringify(this.queryParams));
            console.log('设置并缓存 queryParams:', this.queryParams);
            // 进入页面后，按当前激活的tab触发一次加载
            this.$nextTick(() => this.refreshActiveTab());
        } else {
            console.warn('未获取到有效的参数 jh');
        }
        // 确保第一次进入页面时不会自动初始化组件
        console.log('页面初始化完成，等待用户点击tab');
    },
    activated() {
        // 组件被 keep-alive 缓存时，返回本页会触发此钩子
        const { id, jh, famc, qk, jhs } = this.$route.query || {};
        if (jh && jh !== 'undefined' && jh !== 'null') {
            this.queryParams.id = id || '';
            this.queryParams.jh = jh || '';
            this.queryParams.famc = famc || '';
            this.queryParams.qk = qk || '';
            this.queryParams.jhs = jhs || '';
            sessionStorage.setItem('djxxDetailParams', JSON.stringify(this.queryParams));
            this.$nextTick(() => this.refreshActiveTab());
        } else {
            try {
                const cached = JSON.parse(sessionStorage.getItem('djxxDetailParams') || '{}');
                if (cached && cached.jh) {
                    this.queryParams = { ...this.queryParams, ...cached };
                    this.$nextTick(() => this.refreshActiveTab());
                }
            } catch (e) { }
        }
    },
    beforeRouteUpdate(to, from, next) {
        // 同一路由切换不同 query 时触发
        const { id, jh, famc, qk, jhs } = to.query || {};
        if (jh && jh !== 'undefined' && jh !== 'null') {
            this.queryParams.id = id || '';
            this.queryParams.jh = jh || '';
            this.queryParams.famc = famc || '';
            this.queryParams.qk = qk || '';
            this.queryParams.jhs = jhs || '';
            sessionStorage.setItem('djxxDetailParams', JSON.stringify(this.queryParams));
            this.$nextTick(() => this.refreshActiveTab());
        }
        next();
    },
    watch: {
        // 当从列表页连续点击"查看"跳转到同一路由时，组件会复用，这里监听路由变化并刷新当前激活tab
        '$route.query'(to) {
            const { id, jh, famc, qk, jhs } = to || {};
            if (jh && jh !== 'undefined' && jh !== 'null') {
                this.queryParams.id = id || '';
                this.queryParams.jh = jh || '';
                this.queryParams.famc = famc || '';
                this.queryParams.qk = qk || '';
                this.queryParams.jhs = jhs || '';
                sessionStorage.setItem('djxxDetailParams', JSON.stringify(this.queryParams));

                // 当前就在某个tab上，路由参数变更后需要立刻刷新该tab的数据
                this.$nextTick(() => {
                    if (this.activeTab === 'dataTable') {
                        this.$refs.dataTableRef && this.$refs.dataTableRef.loadData && this.$refs.dataTableRef.loadData();
                    } else if (this.activeTab === 'curveGraph') {
                        this.$refs.curveGraphRef && this.$refs.curveGraphRef.loadData && this.$refs.curveGraphRef.loadData();
                    } else if (this.activeTab === 'histogramGraph') {
                        this.$refs.histogramGraphRef && this.$refs.histogramGraphRef.loadData && this.$refs.histogramGraphRef.loadData();
                    }
                });
            }
        }
    },
    methods: {
        refreshActiveTab() {
            // 每次调用都执行loadData
            if (this.activeTab === 'dataTable') {
                this.$refs.dataTableRef && this.$refs.dataTableRef.loadData && this.$refs.dataTableRef.loadData();
            } else if (this.activeTab === 'curveGraph') {
                this.$refs.curveGraphRef && this.$refs.curveGraphRef.loadData && this.$refs.curveGraphRef.loadData();
            } else if (this.activeTab === 'histogramGraph') {
                this.$refs.histogramGraphRef && this.$refs.histogramGraphRef.loadData && this.$refs.histogramGraphRef.loadData();
            }
        },
        /** 搜索按钮操作 */
        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();
            } else if (tab.name === 'histogramGraph') {
                this.$refs.histogramGraphRef && this.$refs.histogramGraphRef.loadData && this.$refs.histogramGraphRef.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>
