<template>
    <div class="app-container">
        <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
            <el-tab-pane label="井身结构" name="wellStructure">
                <well-structure v-if="activeTab === 'wellStructure'" :well-info="wellInfo" />
            </el-tab-pane>
            <el-tab-pane label="地层维护" name="formationMaintenance">
                <formation-maintenance v-if="activeTab === 'formationMaintenance'" :well-info="wellInfo" />
            </el-tab-pane>
            <el-tab-pane label="测井数据" name="adjacentWell">
                <adjacent-well v-if="activeTab === 'adjacentWell'" :well-info="wellInfo" :qkmc="qkmc" />
            </el-tab-pane>
            <el-tab-pane label="地层岩石数据强度分析" name="formationAnalysis">
                <formation-analysis v-if="activeTab === 'formationAnalysis'" :jh="wellInfo.jh" />
            </el-tab-pane>
            <el-tab-pane label="钻头设计参数推荐" name="bitDesign">
                <bit-design v-if="activeTab === 'bitDesign'" :well-info="wellInfo" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import WellStructure from './components/WellStructure.vue'
import AdjacentWell from './components/AdjacentWell.vue'
import FormationAnalysis from './components/FormationAnalysis.vue'
import BitDesign from './components/BitDesign.vue'
import FormationMaintenance from './components/FormationMaintenance.vue'
export default {
    name: 'WellDesign',
    components: {
        WellStructure,
        AdjacentWell,
        FormationAnalysis,
        BitDesign,
        FormationMaintenance
    },
    data() {
        return {
            activeTab: 'wellStructure',
            wellInfo: {
                jh: '',
                jd: '',
                ytgs: '',
                jhdm: ''
            },
            qkmc: ''
        }
    },
    watch: {
        $route: {
            handler(to, from) {
                this.getWellInfo();
            },
            immediate: true
        }
    },
    created() {
        this.getWellInfo()
        this.$nextTick(() => {
            this.activeTab = 'wellStructure';
        });
    },
    beforeRouteUpdate(to, from, next) {
        this.getWellInfo();
        next();
    },
    methods: {
        getWellInfo() {
            const { jh, jhdm, qkmc } = this.$route.query
            console.log('wellDesign getWellInfo - route query:', this.$route.query);
            console.log('wellDesign getWellInfo - qkmc from route:', qkmc);
            if (jh && jhdm) {
                this.wellInfo.jh = jh
                this.wellInfo.jhdm = jhdm
                this.wellInfo.jd = this.$store.state.app.jd || ''
                this.wellInfo.ytgs = this.$store.state.app.ytgs || ''
            }
            if (qkmc) {
                this.qkmc = qkmc
                console.log('wellDesign getWellInfo - qkmc set to:', this.qkmc);
            }

            this.reloadComponents();
        },

        reloadComponents() {
            const currentTab = this.activeTab;
            this.activeTab = '';
            this.$nextTick(() => {
                this.activeTab = currentTab;
            });
        },

        handleTabClick(tab) {
            console.log('切换到tab:', tab.name)
        }
    }
}
</script>

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

.well-design-header {
    margin-bottom: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #409eff;

    h2 {
        margin: 0 0 10px 0;
        color: #303133;
        font-size: 24px;
    }

    .well-info {
        display: flex;
        gap: 20px;

        span {
            color: #606266;
            font-size: 14px;

            &::before {
                content: '';
                display: inline-block;
                width: 6px;
                height: 6px;
                background: #409eff;
                border-radius: 50%;
                margin-right: 8px;
            }
        }
    }
}

::v-deep .el-tabs__header {
    margin-bottom: 10px;
}

::v-deep .el-tabs__item {
    font-size: 16px;
    padding: 0 20px;
}

::v-deep .el-tabs__content {
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>