<template>
  <div class="statistics-tab tab-content">
    <!-- 顶部筛选区域 -->
    <div class="page-search-panel check-data-panel">
      <div class="panel-header">
        <h2 class="panel-title">查询分析</h2>
        <div class="header-right">
          <span class="favorites-label">我的常用:</span>
          <el-select v-model="favoritesValue" placeholder="请选择" class="favorites-select">
            <el-option
              v-for="item in favoritesOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button class="update-favorite-button" @click="handleUpdateFavorite">更新常用</el-button>
          <el-button type="primary" class="add-favorite-button" @click="handleAddFavorite">新增常用</el-button>
        </div>
      </div>
    </div>

    <div class="page-search-panel">
      <el-form class="search-list" label-position="top">
        <el-form-item label="产品型号:" class="search-component">
          <el-input v-model="searchPanelValue.productModel" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="板块:" class="search-component">
          <el-input v-model="searchPanelValue.module" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="平台:" class="search-component">
          <el-select v-model="searchPanelValue.platform" placeholder="请选择">
            <el-option label="选项1" value="1" />
            <el-option label="选项2" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="系列:" class="search-component">
          <el-select v-model="searchPanelValue.series" placeholder="请选择">
            <el-option label="选项1" value="1" />
            <el-option label="选项2" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称及编号:" class="search-component">
          <el-input v-model="searchPanelValue.project" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="排放:" class="search-component">
          <el-select v-model="searchPanelValue.emissions" placeholder="请选择">
            <el-option label="选项1" value="1" />
            <el-option label="选项2" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="排量:" class="search-component displacement-range">
          <el-input
            v-model="searchPanelValue.displacementMin"
            placeholder="请输入"
            class="range-input"
          />
          <span class="range-separator">~</span>
          <el-input
            v-model="searchPanelValue.displacementMax"
            placeholder="请输入"
            class="range-input"
          />
        </el-form-item>
        <el-form-item label="燃烧类型:" class="search-component">
          <el-select v-model="searchPanelValue.combustionType" placeholder="请选择">
            <el-option label="选项1" value="1" />
            <el-option label="选项2" value="2" />
          </el-select>
        </el-form-item>
      </el-form>

      <div class="search-button-group">
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </div>
    </div>

    <!-- 图表管理区域 -->
    <div class="chart-management-panel">
      <el-button type="primary" @click="handleAddChart">新增图表</el-button>
      <el-button v-if="chartList.length > 0" @click="handleClearAllCharts">清空</el-button>
    </div>

    <!-- 图表区域列表 -->
    <div v-for="(chart, index) in chartList" :key="chart.id" class="chart-area">
      <div class="chart-header">
        <div class="chart-title-section">
          <span v-if="!chart.isEditingTitle" class="chart-title" @click="startEditTitle(index)">{{ chart.title }}</span>
          <el-input
            v-else
            v-model="chart.title"
            :ref="`titleInput-${index}`"
            @blur="chart.isEditingTitle = false"
            @keyup.enter.native="chart.isEditingTitle = false"
            class="title-input"
          />
          <i class="el-icon-edit title-edit-icon" @click="startEditTitle(index)"></i>
        </div>
      </div>

      <div class="chart-config">
        <div class="config-item">
          <span class="config-label">图表类型:</span>
          <el-select v-model="chart.chartType" @change="updateChart(index)">
            <el-option label="折线图" value="line" />
            <el-option label="柱状图" value="bar" />
            <el-option label="散点图" value="scatter" />
            <el-option label="饼图" value="pie" />
          </el-select>
        </div>
        <div class="config-item">
          <span class="config-label">X轴:</span>
          <el-select v-model="chart.xAxis" @change="updateChart(index)">
            <el-option label="X轴" value="xAxis" />
          </el-select>
        </div>
        <div class="config-item">
          <span class="config-label">Y轴(参数):</span>
          <el-select v-model="chart.yAxisParam" multiple collapse-tags clearable @change="updateChart(index)">
            <el-option label="国外" value="foreign" />
            <el-option label="其他" value="other" />
            <el-option label="玉荣" value="yurong" />
          </el-select>
        </div>
        <div class="config-item">
          <span class="config-label">Y轴(公式):</span>
          <el-select v-model="chart.yAxisFormula" @change="handleFormulaSelectChange(index)">
            <el-option label="选择公式" value="" />
            <el-option label="自定义公式" value="custom" />
            <el-option label="线性" value="linear" />
          </el-select>
          <el-button type="primary" size="small" @click="handleEditFormula(index)">添加/修改公式</el-button>
        </div>
        <div v-if="chart.chartType !== 'pie'" class="config-item">
          <span class="config-label">Y轴范围:</span>
          <el-input
            v-model.number="chart.yAxisMin"
            placeholder="最小值"
            class="y-axis-range-input"
            @blur="updateChart(index)"
          />
          <span class="range-separator">~</span>
          <el-input
            v-model.number="chart.yAxisMax"
            placeholder="最大值"
            class="y-axis-range-input"
            @blur="updateChart(index)"
          />
        </div>
        <div v-if="chart.chartType !== 'pie'" class="config-item">
          <span class="config-label">坐标点:</span>
          <el-input
            v-model.number="chart.customPointX"
            placeholder="X坐标(月份)"
            class="y-axis-range-input"
            @blur="updateChart(index)"
          />
          <span class="range-separator">,</span>
          <el-input
            v-model.number="chart.customPointY"
            placeholder="Y坐标(百分比)"
            class="y-axis-range-input"
            @blur="updateChart(index)"
          />
        </div>
      </div>

      <div class="chart-wrapper">
        <div class="delete-button" @click="handleDeleteChart(index)">
          <i class="el-icon-delete"></i>
          <span>删除</span>
        </div>
        <div
          :ref="`chartContainer-${index}`"
          class="chart-container"
          :style="{ height: chart.chartHeight + 'px' }"
        ></div>
        <div
          class="chart-resize-handle"
          @mousedown="startResize(index, $event)"
        ></div>
      </div>
    </div>

    <!-- 公式设置弹窗 -->
    <el-dialog
      title="设置Y轴公式"
      :visible.sync="formulaDialogVisible"
      width="600px"
      :close-on-click-modal="false"
      class="formula-dialog"
    >
      <div class="formula-dialog-content">
        <div class="formula-note" style="position: absolute; top: -20px; left: 0;">//此为选择自定义公式时添加</div>
        <div class="formula-input-section">
          <span class="formula-label">*计算公式:</span>
          <div class="formula-editor">
            <div v-for="(item, index) in formulaItems" :key="index" class="formula-item">
              <el-select
                v-if="item.type === 'param'"
                v-model="item.value"
                class="formula-select"
                @change="updateFormula"
              >
                <el-option
                  v-for="opt in paramOptions"
                  :key="opt.value"
                  :label="opt.label"
                  :value="opt.value"
                />
              </el-select>
              <el-select
                v-else-if="item.type === 'operator'"
                v-model="item.value"
                class="formula-select"
                @change="updateFormula"
              >
                <el-option
                  v-for="opt in operatorOptions"
                  :key="opt.value"
                  :label="opt.label"
                  :value="opt.value"
                />
              </el-select>
              <i class="el-icon-delete formula-delete-icon" @click="removeFormulaItem(index)"></i>
            </div>
          </div>
        </div>
        <div class="formula-buttons">
          <el-button type="primary" @click="addFormulaParam">添加参数</el-button>
          <el-button type="primary" @click="addFormulaOperator">添加符号</el-button>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formulaDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveFormula">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Statistics',
  data() {
    return {
      favoritesValue: '',
      favoritesOptions: [
        { label: '常用1', value: '1' },
        { label: '常用2', value: '2' }
      ],
      searchPanelValue: {
        productModel: '',
        module: '',
        platform: '',
        series: '',
        project: '',
        emissions: '',
        displacementMin: '',
        displacementMax: '',
        combustionType: ''
      },
      chartList: [],
      chartIdCounter: 0,
      formulaDialogVisible: false,
      currentFormulaChartIndex: -1,
      isResizing: false,
      resizingChartIndex: -1,
      resizeStartY: 0,
      resizeStartHeight: 0,
      formulaItems: [
        { type: 'param', value: 'param1' },
        { type: 'operator', value: '+' },
        { type: 'param', value: 'param1' }
      ],
      paramOptions: [
        { label: '参数1', value: 'param1' },
        { label: '参数2', value: 'param2' },
        { label: '参数3', value: 'param3' }
      ],
      operatorOptions: [
        { label: '+', value: '+' },
        { label: '-', value: '-' },
        { label: '*', value: '*' },
        { label: '/', value: '/' }
      ]
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    this.chartList.forEach((chart) => {
      if (chart.chartInstance) {
        chart.chartInstance.dispose()
      }
    })
    window.removeEventListener('resize', this.handleResize)
    if (this.isResizing) {
      document.removeEventListener('mousemove', this.doResize)
      document.removeEventListener('mouseup', this.stopResize)
    }
  },
  methods: {
    handleAddChart() {
      const newChart = {
        id: this.chartIdCounter++,
        title: '自定义标题',
        isEditingTitle: false,
        chartType: 'line',
        xAxis: 'xAxis',
        yAxisParam: ['foreign'],
        yAxisFormula: '',
        yAxisMin: 0,
        yAxisMax: 100,
        chartHeight: 400,
        customPointX: null,
        customPointY: null,
        chartInstance: null,
        formulaItems: [
          { type: 'param', value: 'param1' },
          { type: 'operator', value: '+' },
          { type: 'param', value: 'param1' }
        ]
      }
      this.chartList.push(newChart)
      this.$nextTick(() => {
        this.initChart(this.chartList.length - 1)
      })
    },
    handleDeleteChart(index) {
      const chart = this.chartList[index]
      if (chart.chartInstance) {
        chart.chartInstance.dispose()
      }
      this.chartList.splice(index, 1)
    },
    handleClearAllCharts() {
      this.chartList.forEach((chart) => {
        if (chart.chartInstance) {
          chart.chartInstance.dispose()
        }
      })
      this.chartList = []
    },
    handleAddFavorite() {
      this.$message.info('新增常用功能')
    },
    handleUpdateFavorite() {
      this.$message.info('更新常用功能')
    },
    handleSearch() {
      this.$message.info('查询功能')
      this.chartList.forEach((chart, index) => {
        this.updateChart(index)
      })
    },
    resetSearch() {
      this.searchPanelValue = {
        productModel: '',
        module: '',
        platform: '',
        series: '',
        project: '',
        emissions: '',
        displacementMin: '',
        displacementMax: '',
        combustionType: ''
      }
    },
    initChart(index) {
      const chart = this.chartList[index]
      if (!chart) return
      if (!chart.chartHeight) {
        chart.chartHeight = 400
      }
      const refName = `chartContainer-${index}`
      const containerRef = this.$refs[refName]
      if (!containerRef || (Array.isArray(containerRef) && !containerRef[0])) return
      const container = Array.isArray(containerRef) ? containerRef[0] : containerRef
      chart.chartInstance = echarts.init(container)
      this.updateChart(index)
    },
    handleResize() {
      this.chartList.forEach((chart) => {
        if (chart.chartInstance) {
          chart.chartInstance.resize()
        }
      })
    },
    updateChart(index) {
      const chart = this.chartList[index]
      if (!chart || !chart.chartInstance) return

      const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      const foreignData = [45, 52, 58, 62, 65, 67, 68, 69, 72, 75, 78, 82]
      const otherData = [40, 48, 54, 58, 61, 63, 64, 65, 68, 71, 74, 78]
      const yurongData = [38, 45, 51, 55, 58, 60, 61, 62, 65, 68, 71, 75]

      const series = []
      const legendData = []
      const chartType = chart.chartType
      const isScatter = chartType === 'scatter'
      const isBar = chartType === 'bar'
      const isPie = chartType === 'pie'
      const selectedParams = Array.isArray(chart.yAxisParam) ? chart.yAxisParam : []

      if (isPie) {
        const pieData = []
        const pieColors = ['#67C23A', '#E6A23C', '#F56C6C']

        if (selectedParams.includes('foreign')) {
          const avgValue = foreignData.reduce((sum, val) => sum + val, 0) / foreignData.length
          pieData.push({ value: avgValue, name: '国外' })
          legendData.push('国外')
        }
        if (selectedParams.includes('other')) {
          const avgValue = otherData.reduce((sum, val) => sum + val, 0) / otherData.length
          pieData.push({ value: avgValue, name: '其他' })
          legendData.push('其他')
        }
        if (selectedParams.includes('yurong')) {
          const avgValue = yurongData.reduce((sum, val) => sum + val, 0) / yurongData.length
          pieData.push({ value: avgValue, name: '玉荣' })
          legendData.push('玉荣')
        }

        const pieOption = {
          title: { show: false },
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              const value = parseFloat(params.value).toFixed(2)
              const percent = parseFloat(params.percent).toFixed(2)
              return params.seriesName + '<br/>' + params.name + ': ' + value + '% (' + percent + '%)'
            }
          },
          legend: {
            data: legendData,
            top: 0,
            left: 'center'
          },
          series: [{
            name: '数据分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              formatter: function(params) {
                return params.name + ': ' + parseFloat(params.value).toFixed(2) + '%'
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: pieData.map((item, index) => ({
              ...item,
              itemStyle: {
                color: pieColors[index % pieColors.length]
              }
            }))
          }]
        }

        chart.chartInstance.setOption(pieOption, true)
        return
      }

      const primaryColor = '#67C23A'

      if (selectedParams.includes('foreign')) {
        const foreignSeries = {
          name: '国外',
          type: isBar ? 'bar' : isScatter ? 'scatter' : 'line',
          data: foreignData,
          symbol: isScatter ? 'diamond' : 'circle',
          symbolSize: isScatter ? 8 : 6,
          itemStyle: { color: primaryColor },
          lineStyle: { color: primaryColor, width: 2 }
        }
        if (chartType === 'line') {
          foreignSeries.areaStyle = {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
                { offset: 1, color: 'rgba(103, 194, 58, 0.05)' }
              ]
            }
          }
        }
        series.push(foreignSeries)
        legendData.push('国外')
        if (chart.yAxisFormula === 'linear' && !isBar) {
          series.push({
            name: '线性 (国外)',
            type: 'line',
            data: foreignData,
            lineStyle: { color: primaryColor, type: 'dashed', width: 2 },
            symbol: 'none',
            smooth: true
          })
          legendData.push('线性 (国外)')
        }
      }

      if (selectedParams.includes('other')) {
        const otherSeries = {
          name: '其他',
          type: isBar ? 'bar' : isScatter ? 'scatter' : 'line',
          data: otherData,
          symbol: isScatter ? 'rect' : 'circle',
          symbolSize: isScatter ? 8 : 6,
          itemStyle: { color: '#E6A23C' },
          lineStyle: { color: '#E6A23C', width: 2 }
        }
        if (chartType === 'line') {
          otherSeries.areaStyle = {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
                { offset: 1, color: 'rgba(230, 162, 60, 0.05)' }
              ]
            }
          }
        }
        series.push(otherSeries)
        legendData.push('其他')
        if (chart.yAxisFormula === 'linear' && !isBar) {
          series.push({
            name: '线性 (其他)',
            type: 'line',
            data: otherData,
            lineStyle: { color: '#E6A23C', type: 'dashed', width: 2 },
            symbol: 'none',
            smooth: true
          })
          legendData.push('线性 (其他)')
        }
      }

      if (selectedParams.includes('yurong')) {
        const yurongSeries = {
          name: '玉荣',
          type: isBar ? 'bar' : isScatter ? 'scatter' : 'line',
          data: yurongData,
          symbol: isScatter ? 'triangle' : 'circle',
          symbolSize: isScatter ? 8 : 6,
          itemStyle: { color: '#F56C6C' },
          lineStyle: { color: '#909399', width: 2 }
        }
        if (chartType === 'line') {
          yurongSeries.areaStyle = {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(144, 147, 153, 0.3)' },
                { offset: 1, color: 'rgba(144, 147, 153, 0.05)' }
              ]
            }
          }
        }
        series.push(yurongSeries)
        legendData.push('玉荣')
        if (chart.yAxisFormula === 'linear' && !isBar) {
          series.push({
            name: '线性 (玉荣)',
            type: 'line',
            data: yurongData,
            lineStyle: { color: '#909399', type: 'dashed', width: 2 },
            symbol: 'none',
            smooth: true
          })
          legendData.push('线性 (玉荣)')
        }
      }

      if (
        chart.customPointX !== null &&
        chart.customPointX !== '' &&
        chart.customPointY !== null &&
        chart.customPointY !== ''
      ) {
        const xValue = chart.customPointX
        const yValue = chart.customPointY
        const xIndex = xValue >= 1 && xValue <= 12 ? xValue - 1 : null
        const yMin = chart.yAxisMin !== null && chart.yAxisMin !== '' ? chart.yAxisMin : 0
        const yMax = chart.yAxisMax !== null && chart.yAxisMax !== '' ? chart.yAxisMax : 100

        if (xIndex !== null && yValue >= yMin && yValue <= yMax) {
          const customPointData = []
          for (let i = 0; i < months.length; i++) {
            if (i === xIndex) {
              customPointData.push(yValue)
            } else {
              customPointData.push(null)
            }
          }

          series.push({
            name: '自定义点',
            type: 'scatter',
            data: customPointData,
            symbol: 'circle',
            symbolSize: 12,
            itemStyle: {
              color: '#F56C6C'
            },
            zlevel: 10
          })
          legendData.push('自定义点')
        }
      }

      const option = {
        title: { show: false },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: function(params) {
            if (Array.isArray(params)) {
              let result = params[0].axisValue + '<br/>'
              params.forEach(function(item) {
                if (item.value !== undefined && item.value !== null && item.value !== '') {
                  result += item.marker + item.seriesName + ': ' + item.value + '%<br/>'
                }
              })
              return result
            }
            if (params.value !== undefined && params.value !== null && params.value !== '') {
              return params.seriesName + '<br/>' + params.marker + params.name + ': ' + params.value + '%'
            }
            return ''
          }
        },
        legend: {
          data: legendData,
          top: 0,
          left: 'center'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: legendData.length > 0 ? '15%' : '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: months,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#DCDFE6'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#E4E7ED'
            }
          }
        },
        yAxis: {
          type: 'value',
          min: chart.yAxisMin !== null && chart.yAxisMin !== '' ? chart.yAxisMin : 0,
          max: chart.yAxisMax !== null && chart.yAxisMax !== '' ? chart.yAxisMax : 100,
          interval: 20,
          axisLabel: {
            formatter: '{value}%'
          },
          axisLine: {
            lineStyle: {
              color: '#DCDFE6'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#E4E7ED'
            }
          }
        },
        series: series
      }

      chart.chartInstance.setOption(option, true)
    },
    handleFormulaSelectChange(index) {
      const chart = this.chartList[index]
      if (chart && chart.yAxisFormula === 'custom') {
        this.handleEditFormula(index)
      }
    },
    startEditTitle(index) {
      const chart = this.chartList[index]
      if (chart) {
        chart.isEditingTitle = true
        this.$nextTick(() => {
          const refName = `titleInput-${index}`
          const inputRef = this.$refs[refName]
          if (inputRef) {
            const input = Array.isArray(inputRef) ? inputRef[0] : inputRef
            if (input && input.$el && input.$el.querySelector('input')) {
              input.$el.querySelector('input').focus()
            }
          }
        })
      }
    },
    handleEditFormula(index) {
      this.currentFormulaChartIndex = index
      this.formulaDialogVisible = true
      const chart = this.chartList[index]
      if (chart) {
        this.formulaItems = JSON.parse(JSON.stringify(chart.formulaItems))
      }
    },
    addFormulaParam() {
      this.formulaItems.push({ type: 'param', value: 'param1' })
      this.updateFormula()
    },
    addFormulaOperator() {
      this.formulaItems.push({ type: 'operator', value: '+' })
      this.updateFormula()
    },
    removeFormulaItem(index) {
      this.formulaItems.splice(index, 1)
      this.updateFormula()
    },
    updateFormula() {
      // 更新公式显示
    },
    handleSaveFormula() {
      if (this.currentFormulaChartIndex >= 0) {
        const chart = this.chartList[this.currentFormulaChartIndex]
        if (chart) {
          chart.yAxisFormula = 'custom'
          chart.formulaItems = JSON.parse(JSON.stringify(this.formulaItems))
          this.formulaDialogVisible = false
          this.updateChart(this.currentFormulaChartIndex)
        }
      }
    },
    startResize(index, event) {
      event.preventDefault()
      event.stopPropagation()
      this.isResizing = true
      this.resizingChartIndex = index
      this.resizeStartY = event.clientY
      const chart = this.chartList[index]
      this.resizeStartHeight = chart.chartHeight || 400

      document.addEventListener('mousemove', this.doResize)
      document.addEventListener('mouseup', this.stopResize)
      document.body.style.cursor = 'row-resize'
      document.body.style.userSelect = 'none'
    },
    doResize(event) {
      if (!this.isResizing) return

      const deltaY = event.clientY - this.resizeStartY
      const newHeight = this.resizeStartHeight + deltaY
      const minHeight = 200

      const chart = this.chartList[this.resizingChartIndex]
      if (chart) {
        chart.chartHeight = Math.max(newHeight, minHeight)
        this.$nextTick(() => {
          if (chart.chartInstance) {
            chart.chartInstance.resize()
          }
        })
      }
    },
    stopResize() {
      if (this.isResizing) {
        this.isResizing = false
        this.resizingChartIndex = -1
        document.removeEventListener('mousemove', this.doResize)
        document.removeEventListener('mouseup', this.stopResize)
        document.body.style.cursor = ''
        document.body.style.userSelect = ''
      }
    }
  }
}
</script>

<style lang="scss">
.formula-dialog {
  .el-dialog__body {
    position: relative;
  }
}
</style>

<style lang="scss" scoped>
.statistics-tab {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  .page-search-panel {
    background: white;
    padding: 16px 20px 16px 20px;
    position: relative;
    min-height: 20px;
    flex-shrink: 0;

    .search-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 0;
      margin-right: -16px;
      margin-bottom: 16px;

      .search-component {
        width: calc(25% - 16px);
        padding: 0 16px 16px 0;
        display: block;
        margin-bottom: 0;
        box-sizing: border-box;

        ::v-deep .el-form-item {
          margin-bottom: 0 !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: flex-start !important;

          .el-form-item__label {
            font-size: 14px;
            line-height: 1.5;
            color: #303133;
            padding: 0 !important;
            text-align: left !important;
            width: 100% !important;
            margin-bottom: 8px !important;
          }

          .el-form-item__content {
            font-size: 14px;
            line-height: 32px;
            margin-left: 0 !important;
            width: 100% !important;

            .el-input,
            .el-select {
              width: 100%;

              .el-input__inner {
                height: 32px;
                line-height: 32px;
              }
            }
          }
        }

        &.displacement-range {
          ::v-deep .el-form-item__content {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            margin-left: 0 !important;
            width: 100% !important;
            flex-wrap: nowrap !important;
          }

          .range-input {
            flex: 1 !important;
            min-width: 0;
            width: auto !important;

            ::v-deep .el-input__inner {
              height: 32px;
              line-height: 32px;
            }
          }

          .range-separator {
            margin: 0 8px;
            color: #606266;
            flex-shrink: 0;
            line-height: 32px;
            font-size: 14px;
          }
        }
      }
    }

    .search-button-group {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 0;
      bottom: 48px;

      ::v-deep .el-button {
        padding: 8px 16px;
        font-size: 14px;
        border-radius: 4px;
        height: 32px;
        line-height: 1;
      }
    }
  }

  .check-data-panel {
    padding: 16px 20px;
    margin-bottom: 0;
    border-bottom: 1px solid #cbccce;

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      .panel-title {
        font-size: 18px;
        font-weight: 500;
        color: #303133;
        margin: 0;
        line-height: 1;
      }

      .header-right {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;

        .favorites-label {
          font-size: 14px;
          color: #303133;
          white-space: nowrap;
        }

        .favorites-select {
          width: 200px;
        }

        .update-favorite-button {
          background: white;
          border: 1px solid #409EFF;
          color: #409EFF;
          padding: 8px 16px;
          border-radius: 4px;
          font-size: 14px;

          &:hover {
            background: #ECF5FF;
            border-color: #66B1FF;
            color: #66B1FF;
          }

          &:active {
            background: #409EFF;
            color: white;
          }
        }

        .add-favorite-button {
          padding: 8px 16px;
          border-radius: 4px;
          font-size: 14px;
        }
      }
    }
  }

  .chart-management-panel {
    background: transparent;
    margin-top: 16px;
    margin-left: 20px;
    border-radius: 4px;
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    min-height: 56px;
    align-items: center;
  }

  .chart-area {
    background: white;
    margin: 20px;
    margin-top: 10px;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    flex-shrink: 0;

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid #ebeef5;
      position: relative;

      .chart-title-section {
        display: flex;
        align-items: center;
        flex: 1;

        .title-edit-icon {
          margin-left: 8px;
          cursor: pointer;
          color: #909399;
          font-size: 14px;
        }

        .title-input {
          width: 200px;

          ::v-deep .el-input__inner {
            border: none;
            border-bottom: 1px solid #409eff;
            border-radius: 0;
            padding-left: 0;
          }
        }

        .chart-title {
          font-size: 16px;
          font-weight: 500;
          cursor: pointer;
          padding: 4px 8px;

          &:hover {
            color: #409eff;
            background: #f5f7fa;
            border-radius: 4px;
          }
        }
      }
    }

    .chart-config {
      display: flex;
      flex-wrap: wrap;
      gap: 16px 24px;
      margin-bottom: 20px;
      padding: 16px;
      background: #f5f7fa;
      border-radius: 4px;
      align-items: center;

      .config-item {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;

        .config-label {
          font-size: 14px;
          white-space: nowrap;
          min-width: 70px;
          color: #606266;
        }

        ::v-deep .el-select {
          width: 150px;
          height: 32px;
        }
        ::v-deep .el-select .el-input__inner {
          height: 32px;
        }
        ::v-deep .el-button {
          margin-left: 0;
        }

        .y-axis-range-input {
          width: 100px;
        }

        .range-separator {
          margin: 0 8px;
          color: #606266;
        }
      }
    }

    .chart-wrapper {
      position: relative;

      .delete-button {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        color: #909399;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 14px;
        background: rgba(255, 255, 255, 0.9);

        &:hover {
          color: #f56c6c;
          background: #f5f7fa;
        }
      }

      .chart-resize-handle {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 8px;
        cursor: row-resize;
        z-index: 5;
        background: transparent;
        transition: background 0.2s;

        &:hover {
          background: rgba(64, 158, 255, 0.2);
        }

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 40px;
          height: 4px;
          background: #dcdfe6;
          border-radius: 2px;
          transition: background 0.2s;
        }

        &:hover::before {
          background: #409eff;
        }
      }
    }

    .chart-container {
      width: 100%;
      min-height: 200px;
    }
  }

  .formula-dialog-content {
    .formula-note {
      color: #f56c6c;
      font-size: 12px;
      margin-bottom: 16px;
    }

    .formula-input-section {
      .formula-label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 500;
      }

      .formula-editor {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
        background: #f5f7fa;
        border-radius: 4px;
        min-height: 50px;
        align-items: center;
        border: 1px solid #dcdfe6;

        .formula-item {
          display: flex;
          align-items: center;
          gap: 4px;

          .formula-select {
            width: 120px;

            ::v-deep .el-input__inner {
              background: white;
            }
          }

          .formula-delete-icon {
            cursor: pointer;
            color: #909399;
            font-size: 16px;
            margin-left: 4px;
            padding: 4px;

            &:hover {
              color: #f56c6c;
            }
          }
        }
      }
    }

    .formula-buttons {
      margin-top: 16px;
      display: flex;
      gap: 8px;
    }
  }
}
</style>

