<template>
  <div class="product-output">
    <div class="product-data">
      <div class="product-item" v-for="item in productData" :key="item.name">
        <div class="product-label">
          <div class="product-icon">{{ item.symbol }}</div>
          <div class="product-name">{{ item.name }}</div>
        </div>
        <div class="product-value">{{ item.value.toLocaleString() }}</div>
      </div>
    </div>
    <div class="chart-container">
      <div ref="pieChart" class="pie-chart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ProductOutput',
  data() {
    return {
      productData: [
        { name: '中锰', symbol: 'FeMn', value: 1692 },
        { name: '硅锰', symbol: 'SiMn', value: 722 },
        { name: '碳铬', symbol: 'FeCr', value: 3898 },
        { name: '硅铁', symbol: 'FeSi', value: 2618 }
      ]
    }
  },
  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.pieChart)
      this.chart = chart

      const total = this.productData.reduce((sum, item) => sum + item.value, 0)
      const chartData = this.productData.map(item => ({
        name: item.name,
        value: item.value,
        percentage: ((item.value / total) * 100).toFixed(2)
      }))

      const option = {
        backgroundColor: 'transparent',
        title: {
          text: '产量比',
          left: 'center',
          top: 'center',
          textStyle: {
            color: '#ffffff',
            fontSize: 18,
            fontWeight: 'normal'
          }
        },
        legend: {
          orient: 'vertical',
          right: '10%',
          top: 'center',
          textStyle: {
            color: '#ffffff',
            fontSize: 12
          },
          formatter: function(name) {
            const item = chartData.find(d => d.name === name)
            return `${name} ${item.percentage}%`
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: chartData,
            itemStyle: {
              borderRadius: 5,
              borderColor: 'rgba(0,0,0,0.1)',
              borderWidth: 1
            },
            color: ['#FF6B9D', '#4ECDC4', '#45B7D1', '#96CEB4']
          }
        ]
      }

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

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

  .product-data {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-right: 20px;

    .product-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;

      .product-label {
        display: flex;
        align-items: center;

        .product-icon {
          width: 40px;
          height: 30px;
          background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
          border: 1px solid #4ECDC4;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #4ECDC4;
          font-size: 12px;
          font-weight: bold;
          margin-right: 10px;
        }

        .product-name {
          color: #ffffff;
          font-size: 14px;
        }
      }

      .product-value {
        color: #4ECDC4;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }

  .chart-container {
    flex: 1;

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