<template>
    <div class="bit-design-recommendation">
        <!-- 控制栏 -->
        <div class="control-bar">
            <div class="control-item">
                <label>开次:</label>
                <span class="control-value">{{ displayOpeningTimes }}</span>
            </div>

            <!-- 显示当前开次信息 -->
            <!-- <div class="control-item" v-if="currentOpeningInfo">
                <label>当前开次:</label>
                <span class="opening-info">{{ currentOpeningInfo }}</span>
            </div> -->

            <!-- 调试信息显示 -->
            <!-- <div class="control-item" v-if="debugInfo">
                <label>调试信息:</label>
                <span class="debug-info">{{ debugInfo }}</span>
            </div> -->

            <!-- <div class="control-item">
                <label>深度范围:</label>
                <el-slider v-model="controlForm.depthRange" range :min="0" :max="5000" :step="100"
                    style="width: 200px;" />
            </div> -->

            <div class="control-item">
                <label>钻头尺寸mm:</label>
                <span class="control-value">{{ displayBitSize }}</span>
            </div>

            <el-button type="primary" @click="handleQuery">查询</el-button>
        </div>

        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- 左侧图表区域 -->
            <div class="charts-section">
                <div class="charts-grid">
                    <!-- 刀翼总数 -->
                    <div class="chart-item">
                        <div ref="bladeChart1" class="chart" style="width: 100%; height: 200px;"></div>
                        <div class="chart-title">刀翼总数</div>
                    </div>

                    <!-- 布齿密度 -->
                    <div class="chart-item">
                        <div ref="bladeChart2" class="chart" style="width: 100%; height: 200px;"></div>
                        <div class="chart-title">布齿密度</div>
                    </div>

                    <!-- 切削齿尺寸 -->
                    <div class="chart-item">
                        <div ref="bladeChart3" class="chart" style="width: 100%; height: 200px;"></div>
                        <div class="chart-title">切削齿尺寸</div>
                    </div>

                    <!-- 切削齿后倾角 -->
                    <div class="chart-item">
                        <div ref="bladeChart4" class="chart" style="width: 100%; height: 200px;"></div>
                        <div class="chart-title">切削齿后倾角°</div>
                    </div>

                    <!-- 冠部轮廓 -->
                    <div class="chart-item">
                        <div ref="cuttingTeethChart1" class="chart" style="width: 100%; height: 200px;"></div>
                        <div class="chart-title">冠部轮廓</div>
                    </div>


                    <!-- 保径图表 -->
                    <div class="chart-item">
                        <div ref="gaugeChart" class="chart" style="width: 100%; height: 200px;"></div>
                        <div class="chart-title">
                            <div class="chart-title">保径</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧推荐方案 -->
            <div class="recommendation-section">
                <div class="recommendation-panel">
                    <h3>钻头设计推荐方案</h3>
                    <el-table :data="recommendationData" border style="width: 100%">
                        <el-table-column prop="parameter" label="设计参数" width="120" />
                        <el-table-column prop="result" label="推荐结果" />
                    </el-table>

                    <div class="action-buttons">
                        <el-button type="primary" @click="handleMatchBit">匹配钻头</el-button>
                        <el-button @click="handleBack">返回</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { getCjqxDataztyx, ztTj } from "@/api/system/cjsjLas";
export default {
    name: 'BitDesignRecommendation',
    data() {
        return {
            controlForm: {
                openingTimes: 'first',
                depthRange: [1000, 3000],
                bitSize: '224.1'
            },
            charts: {},
            currentOpeningInfo: '', // 当前开次信息
            debugInfo: '', // 调试信息
            displayOpeningTimes: '一开', // 显示的开次名称
            displayBitSize: '224.1mm', // 显示的钻头尺寸
            // 接口返回的数据
            apiData: null,
            recommendationData: [
                { parameter: '材质', result: '钢体' },
                { parameter: '刀翼数', result: '5' },
                { parameter: '冠部轮廓', result: '中剖面' },
                { parameter: '切削齿尺寸', result: '16mm' },
                { parameter: '双排齿', result: '是' },
                { parameter: '控制涡轮', result: '否' },
                { parameter: '保径板', result: '常规' },
                { parameter: '水力设计', result: '常规' },
                { parameter: '喷嘴数', result: '5~7' },
                { parameter: '限位齿', result: '否' },
                { parameter: 'HSI要求', result: '>=2.0' }
            ]
        }
    },
    mounted() {
        this.initFromQuery()
        this.$nextTick(() => {
            this.initCharts()
        })
    },
    beforeDestroy() {
        Object.values(this.charts).forEach(chart => {
            if (chart) {
                chart.dispose()
            }
        })
    },
    methods: {
        // 初始化页面参数
        initFromQuery() {
            console.log('initFromQuery 方法被调用了！');
            const query = this.$route.query;
            console.log('=== 推荐方案页面接收到的所有参数 ===');
            console.log('完整query对象:', query);
            console.log('参数详情:');
            console.log('- from:', query.from);
            console.log('- jh (井号):', query.jh);
            console.log('- qk (区块):', query.qk);
            console.log('- openingTimes (开次):', query.openingTimes);
            console.log('- startDepth (起始深度):', query.startDepth);
            console.log('- endDepth (结束深度):', query.endDepth);
            console.log('- pointCount (数据点数):', query.pointCount);
            console.log('- ztccValues (ztcc值):', query.ztccValues);
            console.log('- ztccData (ztcc数据):', query.ztccData);
            console.log('=====================================');

            // 设置开次显示值
            if (query.openingTimes) {
                this.displayOpeningTimes = query.openingTimes;
                // 同时设置内部值用于其他逻辑
                const openingTimesMap = {
                    '一开': 'first',
                    '二开': 'second',
                    '三开': 'third',
                    '第三开次': 'third',
                    '第四开次': 'fourth',
                    '第五开次': 'fifth'
                };
                const mappedValue = openingTimesMap[query.openingTimes] || 'first';
                this.controlForm.openingTimes = mappedValue;
                console.log(`开次显示: ${query.openingTimes}`);
            }

            // 设置钻头尺寸显示值
            if (query.ztccValues) {
                try {
                    const ztccValues = JSON.parse(query.ztccValues);
                    if (ztccValues && ztccValues.length > 0) {
                        // 取第一个ztcc值作为显示的钻头尺寸
                        const firstZtcc = ztccValues[0].toString();
                        this.displayBitSize = `${firstZtcc}mm`;
                        this.controlForm.bitSize = firstZtcc;
                        console.log(`钻头尺寸显示: ${firstZtcc}mm`);
                    }
                } catch (e) {
                    console.warn('解析ztcc值失败:', e);
                }
            }

            if (query.startDepth && query.endDepth) {
                // 设置深度范围
                const startDepth = parseInt(query.startDepth);
                const endDepth = parseInt(query.endDepth);
                this.controlForm.depthRange = [startDepth, endDepth];

                console.log(`深度范围设置: ${startDepth} - ${endDepth}m`);
            }

            // 设置当前开次信息显示
            if (query.openingTimes && query.startDepth && query.endDepth) {
                this.currentOpeningInfo = `${query.openingTimes} (${query.startDepth}-${query.endDepth}m)`;
                console.log('当前开次信息:', this.currentOpeningInfo);

                // 显示成功消息
                this.$nextTick(() => {
                    this.$message.success(`已选择${query.openingTimes}: ${query.startDepth}-${query.endDepth}m`);
                });
            }

            // 打印最终的控制表单状态
            console.log('最终控制表单状态:', this.controlForm);

            // 设置调试信息显示
            if (query.jh || query.openingTimes) {
                this.debugInfo = `井号:${query.jh || '未知'} | 开次:${query.openingTimes || '未知'} | 数据点:${query.pointCount || '0'}`;
            }

            // 调用接口获取推荐数据
            this.fetchRecommendationData();
        },

        // 获取推荐数据
        fetchRecommendationData() {
            const query = this.$route.query;
            if (!query.jh || !query.startDepth || !query.endDepth) {
                console.warn('缺少必要参数，无法调用推荐接口');
                return;
            }

            const params = {
                jh: query.jh,
                ksjs: parseFloat(query.startDepth), // 开始井深
                jsjs: parseFloat(query.endDepth)    // 结束井深
            };

            console.log('调用ztTj接口，参数:', params);

            ztTj(params).then(response => {
                console.log('ztTj接口返回数据:', response);
                this.apiData = response;

                // 更新推荐方案表格
                this.updateRecommendationData(response);

                // 更新图表数据
                this.updateChartsWithApiData(response);

            }).catch(error => {
                console.error('调用ztTj接口失败:', error);
                this.$message.error('获取推荐数据失败，请重试');
            });
        },

        // 更新推荐方案数据
        updateRecommendationData(data) {
            if (!data || !data.zttjfa) {
                console.warn('推荐方案数据格式错误');
                return;
            }

            const zttjfa = data.zttjfa;
            console.log('zttjfa推荐数据:', zttjfa);

            // 根据新的字段结构使用zttjfa中的推荐值
            // t01: 刀翼数, t02: 布齿密度, t03: 切削齿尺寸, t04: 切削齿后倾角, t05: 冠部轮廓, t06: 保径
            this.recommendationData = [
                { parameter: '材质', result: '钢体' },
                { parameter: '刀翼数', result: zttjfa.t01 || '4' },
                { parameter: '冠部轮廓', result: zttjfa.t05 || '短抛物' },
                { parameter: '切削齿尺寸', result: (zttjfa.t03 || '8') + 'mm' },
                { parameter: '切削齿后倾角°', result: (zttjfa.t04 || '15') + '°' },
                { parameter: '布齿密度', result: zttjfa.t02 || '低' },
                { parameter: '保径', result: zttjfa.t06 || '常规' },
                { parameter: '双排齿', result: '是' },
                { parameter: '控制涡轮', result: '否' },
                { parameter: '水力设计', result: '常规' },
                { parameter: '喷嘴数', result: '5~7' },
                { parameter: '限位齿', result: '否' },
                { parameter: 'HSI要求', result: '>=2.0' }
            ];

            console.log('推荐方案数据已更新:', this.recommendationData);
        },

        // 使用接口数据更新图表
        updateChartsWithApiData(data) {
            if (!data) {
                console.warn('没有数据，无法更新图表');
                return;
            }

            console.log('开始更新图表，接收到的数据:', data);

            // 更新刀翼数图表 (blade1 对应 dys)
            if (data.dys && this.charts.blade1) {
                console.log('更新刀翼数图表:', data.dys);
                this.updateBladeChart(data.dys);
            }

            // 更新布齿密度图表 (blade2 对应 bcmd)
            if (data.bcmd && this.charts.blade2) {
                console.log('更新布齿密度图表:', data.bcmd);
                this.updateDensityChart(data.bcmd);
            }

            // 更新切削齿尺寸图表 (blade3 对应 qxccc)
            if (data.qxccc && this.charts.blade3) {
                console.log('更新切削齿尺寸图表:', data.qxccc);
                this.updateCuttingTeethSizeChart(data.qxccc);
            }

            // 更新切削齿后倾角图表 (blade4 对应 qxcfqj)
            if (data.qxcfqj && this.charts.blade4) {
                console.log('更新切削齿后倾角图表:', data.qxcfqj);
                this.updateCuttingTeethAngleChart(data.qxcfqj);
            }

            // 更新冠部轮廓图表 (cuttingTeeth1 对应 gblk)
            if (data.gblk && this.charts.cuttingTeeth1) {
                console.log('更新冠部轮廓图表:', data.gblk);
                this.updateCrownProfileChart(data.gblk);
            }

            // 更新保径图表 (gauge 对应 bjdata)
            if (data.bjdata && this.charts.gauge) {
                console.log('更新保径图表:', data.bjdata);
                this.updateGaugeChart(data.bjdata);
            }
        },

        // 更新刀翼数图表
        updateBladeChart(dysData) {
            if (!dysData || !dysData.X || !dysData.Y) {
                console.warn('刀翼数图表数据无效:', dysData);
                return;
            }

            console.log('更新刀翼数图表 - X轴:', dysData.X, 'Y轴:', dysData.Y);

            // 直接使用后台返回的数据，不生成示例数据
            let displayData = [...dysData.Y]; // 复制原始数据

            this.charts.blade1.setOption({
                title: { text: '刀翼数', left: 'center', top: 10, textStyle: { fontSize: 12 } },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}: {c}%'
                },
                grid: { top: 40, left: 40, right: 20, bottom: 30 },
                xAxis: {
                    type: 'category',
                    data: dysData.X,
                    axisLabel: {
                        rotate: 45,
                        fontSize: 10
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '百分比(%)',
                    max: 100
                },
                series: [
                    {
                        name: '刀翼数',
                        type: 'bar',
                        data: displayData,
                        itemStyle: {
                            color: function (params) {
                                // 推荐值用不同颜色突出显示
                                const zttjfa = this.apiData?.zttjfa;
                                const recommendedValue = zttjfa?.t01 || '4'; // t01是刀翼数
                                if (dysData.X[params.dataIndex].includes(recommendedValue)) {
                                    return '#FF6B6B'; // 推荐值用红色
                                }
                                return '#409EFF'; // 其他用蓝色
                            }.bind(this)
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}%'
                        }
                    }
                ]
            });
        },

        // 更新布齿密度图表
        updateDensityChart(bcmdData) {
            if (!bcmdData || !bcmdData.X || !bcmdData.Y) {
                console.warn('布齿密度图表数据无效:', bcmdData);
                return;
            }

            console.log('更新布齿密度图表 - X轴:', bcmdData.X, 'Y轴:', bcmdData.Y);

            // 直接使用后台返回的数据，不生成示例数据
            let displayData = [...bcmdData.Y]; // 复制原始数据

            this.charts.blade2.setOption({
                title: { text: '布齿密度', left: 'center', top: 10, textStyle: { fontSize: 12 } },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}: {c}%'
                },
                grid: { top: 40, left: 40, right: 20, bottom: 30 },
                xAxis: {
                    type: 'category',
                    data: bcmdData.X
                },
                yAxis: {
                    type: 'value',
                    name: '百分比(%)',
                    max: 100
                },
                series: [
                    {
                        name: '布齿密度',
                        type: 'bar',
                        data: displayData,
                        itemStyle: {
                            color: function (params) {
                                const zttjfa = this.apiData?.zttjfa;
                                const recommendedValue = zttjfa?.t02 || '低'; // t02是布齿密度
                                if (bcmdData.X[params.dataIndex] === recommendedValue) {
                                    return '#FF6B6B';
                                }
                                return '#67C23A';
                            }.bind(this)
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}%'
                        }
                    }
                ]
            });
        },

        // 更新切削齿尺寸图表
        updateCuttingTeethSizeChart(qxcccData) {
            if (!qxcccData || !qxcccData.X || !qxcccData.Y) {
                console.warn('切削齿尺寸图表数据无效:', qxcccData);
                return;
            }

            console.log('更新切削齿尺寸图表 - X轴:', qxcccData.X, 'Y轴:', qxcccData.Y);

            // 直接使用后台返回的数据，不生成示例数据
            let displayData = [...qxcccData.Y]; // 复制原始数据

            this.charts.blade3.setOption({
                title: { text: '切削齿尺寸', left: 'center', top: 10, textStyle: { fontSize: 12 } },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}mm: {c}%'
                },
                grid: { top: 40, left: 40, right: 20, bottom: 30 },
                xAxis: {
                    type: 'category',
                    data: qxcccData.X
                },
                yAxis: {
                    type: 'value',
                    name: '百分比(%)',
                    max: 100
                },
                series: [
                    {
                        name: '切削齿尺寸',
                        type: 'bar',
                        data: displayData,
                        itemStyle: {
                            color: function (params) {
                                const zttjfa = this.apiData?.zttjfa;
                                const recommendedValue = zttjfa?.t03 || '8'; // t03是切削齿尺寸
                                if (qxcccData.X[params.dataIndex] === recommendedValue) {
                                    return '#FF6B6B';
                                }
                                return '#E6A23C';
                            }.bind(this)
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}%'
                        }
                    }
                ]
            });
        },

        // 更新切削齿后倾角图表
        updateCuttingTeethAngleChart(qxcfqjData) {
            if (!qxcfqjData || !qxcfqjData.X || !qxcfqjData.Y) {
                console.warn('切削齿后倾角图表数据无效:', qxcfqjData);
                return;
            }

            console.log('更新切削齿后倾角图表 - X轴:', qxcfqjData.X, 'Y轴:', qxcfqjData.Y);

            // 直接使用后台返回的数据，不生成示例数据
            let displayData = [...qxcfqjData.Y]; // 复制原始数据

            this.charts.blade4.setOption({
                title: { text: '切削齿后倾角', left: 'center', top: 10, textStyle: { fontSize: 12 } },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}°: {c}%'
                },
                grid: { top: 40, left: 40, right: 20, bottom: 30 },
                xAxis: {
                    type: 'category',
                    data: qxcfqjData.X
                },
                yAxis: {
                    type: 'value',
                    name: '百分比(%)',
                    max: 100
                },
                series: [
                    {
                        name: '切削齿后倾角°',
                        type: 'bar',
                        data: displayData,
                        itemStyle: {
                            color: function (params) {
                                const zttjfa = this.apiData?.zttjfa;
                                const recommendedValue = zttjfa?.t04 || '15'; // t04是切削齿后倾角
                                if (qxcfqjData.X[params.dataIndex] === recommendedValue) {
                                    return '#FF6B6B';
                                }
                                return '#F56C6C';
                            }.bind(this)
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}%'
                        }
                    }
                ]
            });
        },

        // 更新冠部轮廓图表
        updateCrownProfileChart(gblkData) {
            if (!gblkData || !gblkData.X || !gblkData.Y) {
                console.warn('冠部轮廓图表数据无效:', gblkData);
                return;
            }

            console.log('更新冠部轮廓图表 - X轴:', gblkData.X, 'Y轴:', gblkData.Y);

            // 直接使用后台返回的数据，不生成示例数据
            let displayData = [...gblkData.Y]; // 复制原始数据

            this.charts.cuttingTeeth1.setOption({
                title: { text: '冠部轮廓', left: 'center', top: 10, textStyle: { fontSize: 12 } },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}: {c}%'
                },
                grid: { top: 40, left: 40, right: 20, bottom: 30 },
                xAxis: {
                    type: 'category',
                    data: gblkData.X,
                    axisLabel: {
                        rotate: 30,
                        fontSize: 10
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '百分比(%)',
                    max: 100
                },
                series: [
                    {
                        name: '冠部轮廓',
                        type: 'bar',
                        data: displayData,
                        itemStyle: {
                            color: function (params) {
                                const zttjfa = this.apiData?.zttjfa;
                                const recommendedValue = zttjfa?.t05 || '短抛物'; // t05是冠部轮廓
                                if (gblkData.X[params.dataIndex] === recommendedValue) {
                                    return '#FF6B6B';
                                }
                                return '#909399';
                            }.bind(this)
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}%'
                        }
                    }
                ]
            });
        },

        // 更新保径图表
        updateGaugeChart(bjdataArray) {
            if (!Array.isArray(bjdataArray)) {
                console.warn('保径图表数据无效:', bjdataArray);
                return;
            }

            console.log('更新保径图表:', bjdataArray);

            // 直接使用后台返回的数据，不生成示例数据
            let pieData = bjdataArray.map(item => ({
                name: item.name,
                value: item.value
            }));

            this.charts.gauge.setOption({
                title: { text: '保径', left: 'center', top: 10, textStyle: { fontSize: 12 } },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}%'
                },
                series: [
                    {
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '60%'],
                        data: pieData,
                        itemStyle: {
                            color: function (params) {
                                const zttjfa = this.apiData?.zttjfa;
                                const recommendedValue = zttjfa?.t06 || '常规'; // t06是保径
                                if (params.name === recommendedValue) {
                                    return '#FF6B6B'; // 推荐值用红色
                                }
                                return params.name === '常规' ? '#409EFF' : '#67C23A';
                            }.bind(this)
                        },
                        label: {
                            formatter: '{b}: {c}%'
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        },

        initCharts() {
            this.initBladeCharts()
            this.initCuttingTeethCharts()
            this.initGaugeChart()
        },

        initBladeCharts() {
            // 刀翼图表1 - 长剖面
            if (this.$refs.bladeChart1) {
                this.charts.blade1 = echarts.init(this.$refs.bladeChart1)
                this.charts.blade1.setOption({
                    title: { text: '长剖面', left: 'center', top: 10, textStyle: { fontSize: 12 } },
                    tooltip: { trigger: 'axis' },
                    legend: { data: ['中剖面', '刀翼轮廓'], top: 30, textStyle: { fontSize: 10 } },
                    grid: { top: 60, left: 40, right: 20, bottom: 30 },
                    xAxis: { type: 'category', data: ['长剖面', '中剖面', '短剖面', '平剖面'] },
                    yAxis: { type: 'value', name: '百分' },
                    series: [
                        { name: '中剖面', type: 'bar', data: [30, 27, 25, 20] },
                        { name: '刀翼轮廓', type: 'line', data: [30, 27, 25, 20] }
                    ]
                })
            }

            // 刀翼图表2 - 中剖面
            if (this.$refs.bladeChart2) {
                this.charts.blade2 = echarts.init(this.$refs.bladeChart2)
                this.charts.blade2.setOption({
                    title: { text: '中剖面', left: 'center', top: 10, textStyle: { fontSize: 12 } },
                    tooltip: { trigger: 'axis' },
                    grid: { top: 40, left: 40, right: 20, bottom: 30 },
                    xAxis: { type: 'category', data: [4, 5, 6, 7, 8] },
                    yAxis: { type: 'value', name: '百分' },
                    series: [
                        { type: 'bar', data: [20, 25, 30, 35, 40] }
                    ]
                })
            }

            // 刀翼图表3 - 短剖面
            if (this.$refs.bladeChart3) {
                this.charts.blade3 = echarts.init(this.$refs.bladeChart3)
                this.charts.blade3.setOption({
                    title: { text: '短剖面', left: 'center', top: 10, textStyle: { fontSize: 12 } },
                    tooltip: { trigger: 'axis' },
                    grid: { top: 40, left: 40, right: 20, bottom: 30 },
                    xAxis: { type: 'category', data: [4, 5, 6, 7, 8] },
                    yAxis: { type: 'value', name: '百分' },
                    series: [
                        { name: '柱状图', type: 'bar', data: [15, 20, 25, 30, 35] },
                        { name: '折线图', type: 'line', data: [15, 20, 25, 30, 35] }
                    ]
                })
            }

            // 刀翼图表4 - 平剖面
            if (this.$refs.bladeChart4) {
                this.charts.blade4 = echarts.init(this.$refs.bladeChart4)
                this.charts.blade4.setOption({
                    title: { text: '平剖面', left: 'center', top: 10, textStyle: { fontSize: 12 } },
                    tooltip: { trigger: 'axis' },
                    grid: { top: 40, left: 40, right: 20, bottom: 30 },
                    xAxis: { type: 'category', data: [4, 5, 6, 7, 8] },
                    yAxis: { type: 'value', name: '百分' },
                    series: [
                        { name: '柱状图', type: 'bar', data: [10, 15, 20, 25, 30] },
                        { name: '折线图', type: 'line', data: [10, 15, 20, 25, 30] }
                    ]
                })
            }
        },

        initCuttingTeethCharts() {
            // 切削齿图表1
            if (this.$refs.cuttingTeethChart1) {
                this.charts.cuttingTeeth1 = echarts.init(this.$refs.cuttingTeethChart1)
                this.charts.cuttingTeeth1.setOption({
                    title: { text: '切削齿', left: 'center', top: 10, textStyle: { fontSize: 12 } },
                    tooltip: { trigger: 'axis' },
                    grid: { top: 40, left: 40, right: 20, bottom: 30 },
                    xAxis: { type: 'category', data: ['22mm', '19mm', '16mm', '13mm', '11mm', '9mm'] },
                    yAxis: { type: 'value', name: '百分' },
                    series: [
                        { name: '柱状图', type: 'bar', data: [10, 15, 25, 20, 15, 10] },
                        { name: '折线图', type: 'line', data: [10, 15, 25, 20, 15, 10] }
                    ]
                })
            }
        },

        initGaugeChart() {
            // 保径图表
            if (this.$refs.gaugeChart) {
                this.charts.gauge = echarts.init(this.$refs.gaugeChart)
                this.charts.gauge.setOption({
                    title: { text: '保径', left: 'center', top: 10, textStyle: { fontSize: 12 } },
                    tooltip: { trigger: 'item' },
                    series: [
                        {
                            type: 'pie',
                            radius: '60%',
                            center: ['50%', '60%'],
                            data: [
                                { value: 85, name: '常规', itemStyle: { color: '#409EFF' } },
                                { value: 15, name: '增强', itemStyle: { color: '#67C23A' } }
                            ],
                            label: {
                                formatter: '{b}: {c}%'
                            }
                        }
                    ]
                })
            }
        },

        handleQuery() {
            console.log('查询条件:', this.controlForm)
            // 这里可以调用API获取数据并更新图表
        },

        handleMatchBit() {
            console.log('匹配钻头')
            // 跳转到钻头匹配页面
            this.$router.push({
                name: 'BitMatching',
                query: {
                    from: 'recommendation',
                    jh: this.$route.query.jh,
                    qk: this.$route.query.qk
                }
            })
        },

        // 添加返回按钮处理方法
        handleBack() {
            console.log('返回上一页')
            // 根据来源页面决定返回路径
            const from = this.$route.query.from || 'main'
            if (from === 'main') {
                this.$router.push({ name: 'BitDesign' })
            } else {
                this.$router.go(-1)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.bit-design-recommendation {
    padding: 10px;

    .control-bar {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 10px;
        padding: 15px;
        background-color: #f5f7fa;
        border-radius: 4px;

        .control-item {
            display: flex;
            align-items: center;
            gap: 8px;

            label {
                font-weight: bold;
                color: #333;
                white-space: nowrap;
            }

            .control-value {
                background-color: #f5f7fa;
                color: #333;
                padding: 6px 12px;
                border-radius: 4px;
                font-weight: bold;
                border: 1px solid #dcdfe6;
                min-width: 80px;
                text-align: center;
            }

            .opening-info {
                background-color: #e6f7ff;
                color: #1890ff;
                padding: 4px 8px;
                border-radius: 4px;
                font-weight: bold;
                border: 1px solid #91d5ff;
            }

            .debug-info {
                background-color: #fff2e8;
                color: #fa8c16;
                padding: 4px 8px;
                border-radius: 4px;
                font-size: 12px;
                border: 1px solid #ffbb96;
                font-family: monospace;
            }
        }
    }

    .main-content {
        display: flex;
        gap: 20px;

        .charts-section {
            flex: 1;

            .charts-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 15px;

                .chart-item {
                    background-color: #fff;
                    border: 1px solid #e4e7ed;
                    border-radius: 4px;
                    padding: 10px;

                    .chart {
                        border-radius: 4px;
                    }

                    .chart-title {
                        text-align: center;
                        margin-top: 5px;
                        font-size: 12px;
                        color: #666;
                    }
                }
            }
        }

        .recommendation-section {
            width: 300px;

            .recommendation-panel {
                background-color: #fff;
                border: 1px solid #e4e7ed;
                border-radius: 4px;
                padding: 20px;

                h3 {
                    margin: 0 0 15px 0;
                    text-align: center;
                    color: #333;
                }

                .action-buttons {
                    margin-top: 20px;
                    text-align: center;
                }
            }
        }
    }
}
</style>
