<template>
    <div class="logging-curve-container">
        <div v-if="jh" class="well-number-display">
            <span class="well-label">井号:</span>
            <span class="well-number">{{ jh }}</span>
        </div>
        <ljqx ref="ljqxComponent" :jh="jh"></ljqx>
    </div>
</template>

<script>
import ljqx from "@/views/scientificDrill/designScheme/components/ljqx";

export default {
    name: "LoggingCurve",
    components: {
        ljqx
    },
    props: {
        jh: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            loading: false,
            curveData: [],

        };
    },
    mounted() {
        this.loadCurveData();
    },
    methods: {
        loadCurveData() {
            this.loading = true;
            // 这里可以调用API获取测井曲线数据
            setTimeout(() => {
                this.loading = false;
                // 模拟数据加载完成
            }, 1000);
        },
        handleTabClick(tab) {
            console.log('切换到tab:', tab.name);
            // 可以根据不同的tab加载不同的数据
        },
        // 添加refreshChart方法，供父组件调用
        refreshChart() {
            console.log('DrillingCurve refreshChart 被调用');
            // 调用ljqx组件的重新加载方法
            if (this.$refs.ljqxComponent) {
                this.$refs.ljqxComponent.onSearch();
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.logging-curve-container {
    padding: 10px;
    padding-top: 40px;
    position: relative;
}

/* 井号显示样式 */
.well-number-display {
    position: absolute;
    top: 0px;
    left: 16px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all 0.3s ease;
    opacity: 0.95;
}

.well-number-display:hover {
    opacity: 1;
}

.well-label {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.well-number {
    color: #3b82f6;
    font-size: 14px;
    font-weight: 600;
}

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

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

    p {
        color: #999;
        margin: 5px 0;
    }
}

.curve-chart {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.placeholder-chart {
    text-align: center;
    color: #999;

    i {
        font-size: 48px;
        color: #ddd;
        margin-bottom: 10px;
    }

    p {
        margin: 5px 0;
        font-size: 14px;
    }
}

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