<template>
  <div class="product-quality-rate">
    <div ref="lineChart" class="line-chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ProductQualityRate',
  data() {
    return {
      chartData: {
        days: Array.from({ length: 31 }, (_, i) => i + 1),
        cr: [72, 85, 88, 75, 68, 78, 82, 79, 85, 83, 87, 74, 86, 89, 72, 68, 78, 85, 79, 83, 87, 85, 74, 68, 78, 85, 79, 83, 87, 85, 74],
        si: [45, 68, 72, 45, 55, 62, 58, 65, 70, 62, 68, 45, 72, 68, 45, 55, 62, 58, 65, 70, 62, 68, 45, 55, 62, 58, 65, 70, 62, 68, 58],
        c: [32, 55, 38, 35, 12, 8, 35, 38, 32, 28, 35, 32, 38, 35, 12, 8, 35, 38, 32, 28, 35, 32, 38, 35, 12, 8, 35, 38, 32, 28, 45]
      }
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.lineChart)
      this.chart = chart

      const option = {
        backgroundColor: 'transparent',
        grid: {
          left: '5%',
          right: '5%',
          bottom: '15%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.chartData.days,
          axisLine: {
            lineStyle: {
              color: '#1e3c72'
            }
          },
          axisLabel: {
            color: '#4ECDC4',
            fontSize: 10
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(78, 205, 196, 0.1)',
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#4ECDC4',
            fontSize: 10
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(78, 205, 196, 0.1)',
              type: 'dashed'
            }
          }
        },
        legend: {
          data: ['Cr', 'Si', 'C'],
          bottom: '5%',
          textStyle: {
            color: '#ffffff',
            fontSize: 12
          },
          itemWidth: 20,
          itemHeight: 2
        },
        series: [
          {
            name: 'Cr',
            type: 'line',
            data: this.chartData.cr,
            smooth: true,
            lineStyle: {
              color: '#9B59B6',
              width: 2
            },
            itemStyle: {
              color: '#9B59B6'
            },
            symbol: 'circle',
            symbolSize: 4,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(155, 89, 182, 0.3)' },
                  { offset: 1, color: 'rgba(155, 89, 182, 0.05)' }
                ]
              }
            }
          },
          {
            name: 'Si',
            type: 'line',
            data: this.chartData.si,
            smooth: true,
            lineStyle: {
              color: '#2ECC71',
              width: 2
            },
            itemStyle: {
              color: '#2ECC71'
            },
            symbol: 'circle',
            symbolSize: 4,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(46, 204, 113, 0.3)' },
                  { offset: 1, color: 'rgba(46, 204, 113, 0.05)' }
                ]
              }
            }
          },
          {
            name: 'C',
            type: 'line',
            data: this.chartData.c,
            smooth: true,
            lineStyle: {
              color: '#3498DB',
              width: 2
            },
            itemStyle: {
              color: '#3498DB'
            },
            symbol: 'circle',
            symbolSize: 4,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(52, 152, 219, 0.3)' },
                  { offset: 1, color: 'rgba(52, 152, 219, 0.05)' }
                ]
              }
            }
          }
        ]
      }

      chart.setOption(option)
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    }
  }
}
</script>

<style scoped lang="less">
.product-quality-rate {
  width: 100%;
  height: 100%;
  padding: 20px;

  .line-chart {
    width: 100%;
    height: 250px;
  }
}
</style>
