<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 v-if="activeTab === 'dataTable'" :jh="queryParams.jh" :key="`dataTable-${queryParams.jh}`" />
            </el-tab-pane>
            <el-tab-pane label="曲线图形" name="curveGraph">
                <CurveGraph v-if="activeTab === 'curveGraph'" :jh="queryParams.jh"
                    :key="`curveGraph-${queryParams.jh}`" />
            </el-tab-pane>
            <el-tab-pane label="直方图形" name="histogramGraph">
                <HistogramGraph v-if="activeTab === 'histogramGraph'" :jh="queryParams.jh"
                    :key="`histogramGraph-${queryParams.jh}`" />
            </el-tab-pane>
            <el-tab-pane label="测井数据" name="loggingData">
                <LoggingData v-if="activeTab === 'loggingData'" :jh="queryParams.jh"
                    :key="`loggingData-${queryParams.jh}`" />
            </el-tab-pane>
            <el-tab-pane label="测井曲线" name="loggingCurve">
                <keep-alive>
                    <LoggingCurve v-if="activeTab === 'loggingCurve'" ref="loggingCurveComponent" :jh="queryParams.jh"
                        :key="`loggingCurve-${queryParams.jh}`" />
                </keep-alive>
            </el-tab-pane>
            <el-tab-pane label="录井数据" name="drillingData">
                <DrillingData v-if="activeTab === 'drillingData'" :jh="queryParams.jh"
                    :key="`drillingData-${queryParams.jh}`" />
            </el-tab-pane>
            <el-tab-pane label="录井曲线" name="drillingCurve">
                <keep-alive>
                    <DrillingCurve v-if="activeTab === 'drillingCurve'" ref="drillingCurveComponent"
                        :jh="queryParams.jh" :key="`drillingCurve-${queryParams.jh}`" />
                </keep-alive>
            </el-tab-pane>
            <el-tab-pane label="录井钻时图" name="drillingTimeChart">
                <DrillingTimeChart v-if="activeTab === 'drillingTimeChart'" :jh="queryParams.jh"
                    :key="`drillingTimeChart-${queryParams.jh}`" />
            </el-tab-pane>
            <el-tab-pane label="井眼轨迹" name="wellboreTrajectory">
                <WellboreTrajectory v-if="activeTab === 'wellboreTrajectory'" :jh="queryParams.jh"
                    :key="`wellboreTrajectory-${queryParams.jh}`" />
            </el-tab-pane>
            <el-tab-pane label="井身结构" name="wellDepthStructure">
                <WellDepthStructure v-if="activeTab === 'wellDepthStructure'" :jh="queryParams.jh"
                    :key="`wellDepthStructure-${queryParams.jh}`" />
            </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';
import LoggingData from './components/LoggingData.vue';
import LoggingCurve from './components/LoggingCurve.vue';
import DrillingData from './components/DrillingData.vue';
import DrillingCurve from './components/DrillingCurve.vue';
import DrillingTimeChart from './components/DrillingTimeChart.vue';
import WellboreTrajectory from './components/WellboreTrajectory.vue';
import WellDepthStructure from './components/WellDepthStructure.vue';

export default {
    name: "JcxxDetail",
    components: {
        DataTable,
        CurveGraph,
        HistogramGraph,
        LoggingData,
        LoggingCurve,
        DrillingData,
        DrillingCurve,
        DrillingTimeChart,
        WellboreTrajectory,
        WellDepthStructure
    },
    data() {
        return {
            // 当前激活的tab
            activeTab: 'dataTable',
            // 显示搜索条件
            showSearch: true,
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 查询参数
            queryParams: {
                jh: ''
            },
            // 表格数据
            tableData: [

            ]
        };
    },
    created() {
        // 获取路由参数
        const { jh } = this.$route.params;
        if (jh) {
            this.queryParams.jh = jh;
        } else {
            console.warn('未获取到路由参数 jh');
        }

    },
    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(() => {
                this.$modal.msgSuccess("移除成功");
            }).catch(() => { });
        },

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

        /** tab切换事件 */
        handleTabClick(tab) {
            console.log('切换到tab:', tab.name);

        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
    padding: 10px;
    box-sizing: border-box;
    height: calc(100vh - 120px);
}

.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>