<template>
    <div class="formation-analysis">
        <!-- 左右布局容器 -->
        <div class="analysis-container">
            <!-- 左侧数据表格 -->
            <div class="left-panel">
                <div class="panel-header">
                    <h3>数据表格</h3>
                </div>
                <div class="panel-content">
                    <FormationTableData :jh="jh" @search="handleSearch" />
                </div>
            </div>

            <!-- 右侧曲线图形 -->
            <div class="right-panel">
                <div class="panel-header">
                    <h3>曲线图形</h3>
                </div>
                <div class="panel-content">
                    <FormationCurveChart ref="curveChart" :jh="jh" :ksjs="searchParams.ksjs"
                        :jsjs="searchParams.jsjs" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import FormationTableData from './FormationTableData.vue'
import FormationCurveChart from './FormationCurveChart.vue'

export default {
    name: 'FormationAnalysis',
    components: {
        FormationTableData,
        FormationCurveChart
    },
    props: {
        jh: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            searchParams: {
                ksjs: '',
                jsjs: ''
            }
        }
    },
    methods: {
        handleSearch(params) {
            // 更新搜索参数
            this.searchParams = {
                ksjs: params.ksjs || '',
                jsjs: params.jsjs || ''
            };
            // 触发曲线图更新
            // if (this.$refs.curveChart) {
            //     this.$refs.curveChart.onSearch();
            // }
        }
    }
}
</script>

<style lang="scss" scoped>
.formation-analysis {
    padding: 0px;
    height: 82vh;
    overflow: hidden;

    .analysis-container {
        display: flex;
        height: 100%;
        gap: 10px;
        // padding: 10px;
        box-sizing: border-box;

        .left-panel,
        .right-panel {
            display: flex;
            flex-direction: column;
            border: 1px solid #e4e7ed;
            border-radius: 4px;
            background: #fff;
            overflow: hidden;

            .panel-header {
                background: #f5f7fa;
                padding: 10px 15px;
                border-bottom: 1px solid #e4e7ed;

                h3 {
                    margin: 0;
                    font-size: 14px;
                    font-weight: 600;
                    color: #303133;
                }
            }

            .panel-content {
                flex: 1;
                overflow: hidden;
                padding: 0;
            }
        }

        .left-panel {
            flex: 0 0 65%;
            min-width: 400px;
        }

        .right-panel {
            flex: 0 0 35%;
            min-width: 400px;
        }
    }
}

// 响应式设计
@media (max-width: 1400px) {
    .formation-analysis .analysis-container {
        .left-panel {
            flex: 0 0 65%;
        }

        .right-panel {
            flex: 0 0 35%;
        }
    }
}

@media (max-width: 1200px) {
    .formation-analysis .analysis-container {
        flex-direction: column;
        height: auto;

        .left-panel,
        .right-panel {
            flex: none;
            min-width: auto;
            height: 50vh;
        }
    }
}
</style>
