<template>
  <div class="product-data">
    <div class="data-item monthly-production">
      <div class="title">本月累计产量</div>
      <div class="value">{{ productionData.monthlyProduction }}</div>
      <div class="unit">(t)</div>
      <div class="date">截止到{{ productionData.date }}</div>
    </div>
    <div class="data-item">
      <div class="title">产品合格率</div>
      <div class="chart-container" ref="qualifiedRateChart"></div>
    </div>
    <div class="data-item">
      <div class="title">炉温稳定率</div>
      <div class="chart-container" ref="temperatureStabilityChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ProductData',
  data() {
    return {
      productionData: {
        monthlyProduction: '432,928',
        date: '8-20',
        qualifiedRate: 95,
        temperatureStability: 92
      },
      qualifiedRateChart: null,
      temperatureStabilityChart: null
    }
  },
  mounted() {
    this.initQualifiedRateChart()
    this.initTemperatureStabilityChart()
  },
  methods: {
    initQualifiedRateChart() {
      this.qualifiedRateChart = echarts.init(this.$refs.qualifiedRateChart)
      const option = {
        series: [{
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          radius: '100%',
          itemStyle: {
            color: '#42d3a5'
          },
          progress: {
            show: true,
            width: 18
          },
          pointer: {
            show: false
          },
          axisLine: {
            lineStyle: {
              width: 18,
              color: [
                [1, '#E3E3E3']
              ]
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          title: {
            show: true,
            offsetCenter: [0, '30%'],
            fontSize: 20,
            fontWeight: 'bold',
            color: '#fff',
            fontFamily: 'DingTalk JinBuTi'
          },
          detail: {
            valueAnimation: true,
            fontSize: 25,
            offsetCenter: [0, '20%'],
            formatter: '{value}%',
            color: '#fff',
            fontFamily: 'DingTalk JinBuTi'
          },
          data: [{
            value: this.productionData.qualifiedRate,
            name: ''
          }]
        }]
      }
      this.qualifiedRateChart.setOption(option)
    },
    initTemperatureStabilityChart() {
      this.temperatureStabilityChart = echarts.init(this.$refs.temperatureStabilityChart)
      const option = {
        series: [{
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          radius: '100%',
          itemStyle: {
            color: '#a66cff'
          },
          progress: {
            show: true,
            width: 18
          },
          pointer: {
            show: false
          },
          axisLine: {
            lineStyle: {
              width: 18,
              color: [
                [1, '#E3E3E3']
              ]
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          title: {
            show: true,
            offsetCenter: [0, '30%'],
            fontSize: 20,
            fontWeight: 'bold',
            color: '#fff',
            fontFamily: 'DingTalk JinBuTi'
          },
          detail: {
            valueAnimation: true,
            fontSize: 25,
            offsetCenter: [0, '20%'],
            formatter: '{value}%',
            color: '#fff',
            fontFamily: 'DingTalk JinBuTi'
          },
          data: [{
            value: this.productionData.temperatureStability,
            name: ''
          }]
        }]
      }
      this.temperatureStabilityChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.product-data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-family: 'DingTalk JinBuTi';

  .data-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

    .title {
      font-size: 1.8rem;
      margin-bottom: 1rem;
      color: #fff;
    }

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

  .monthly-production {
    .value {
      font-size: 3.5rem;
      font-weight: bold;
      color: #60f2ff;
    }

    .unit {
      font-size: 1.2rem;
      color: #60f2ff;
    }

    .date {
      font-size: 1rem;
      color: #999;
      margin-top: 0.5rem;
    }
  }
}
</style>
