<template>
  <el-card shadow="hover" class="order-material-analysis">
    <div slot="header" class="card-header">订单物料分析</div>
    <div ref="chart" class="chart-container"></div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'OrderMaterialAnalysis',
  props: {
    materialInfo: {
      type: Object,
      required: true,
      default: () => ({
        categories: [],
        usageFrequency: [],
        stockQuantity: [],
        bundleRate: [],
        purchaseCycle: [],
        yAxisUsageMax: 0
      })
    }
  },
  data() {
    return {
      chartInstance: null
    }
  },
  watch: {
    materialInfo: {
      deep: true,
      immediate: true,
      handler() {
        this.updateChart()
      }
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart)
    if (this.chartInstance) {
      this.chartInstance.dispose()
      this.chartInstance = null
    }
  },
  methods: {
    initChart() {
      if (!this.chartInstance) {
        this.chartInstance = echarts.init(this.$refs.chart)
      }
      this.updateChart()
      window.addEventListener('resize', this.resizeChart)
    },
    updateChart() {
      if (!this.chartInstance) return
      const info = this.materialInfo
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        legend: {
          data: ['使用频次', '库存量', '捆绑率', '采购周期'],
          bottom: 0
        },
        xAxis: {
          type: 'category',
          data: info.categories,
          axisTick: { alignWithLabel: true }
        },
        yAxis: [
          {
            type: 'value',
            name: '数量',
            min: 0,
            max: info.yAxisUsageMax,
            interval: Math.ceil((info.yAxisUsageMax || 1) / 4),
            position: 'left',
            axisLine: { lineStyle: { color: '#3a85ff' } },
            axisLabel: { formatter: '{value}' }
          },
          {
            type: 'value',
            name: '百分比',
            min: 0,
            max: 100,
            interval: 20,
            position: 'right',
            axisLine: { lineStyle: { color: '#ffb300' } },
            axisLabel: { formatter: '{value}%'}
          }
        ],
        series: [
          {
            name: '使用频次',
            type: 'bar',
            data: info.usageFrequency,
            itemStyle: { color: '#3a85ff' }
          },
          {
            name: '库存量',
            type: 'bar',
            data: info.stockQuantity,
            itemStyle: { color: '#52c41a' }
          },
          {
            name: '捆绑率',
            type: 'line',
            yAxisIndex: 1,
            data: info.bundleRate,
            lineStyle: { color: '#ffc107', width: 2 },
            smooth: true,
            symbol: 'circle',
            symbolSize: 8
          },
          {
            name: '采购周期',
            type: 'line',
            yAxisIndex: 1,
            data: info.purchaseCycle,
            lineStyle: { color: '#ff5722', width: 2 },
            smooth: true,
            symbol: 'circle',
            symbolSize: 8
          }
        ]
      }
      this.chartInstance.setOption(option, { notMerge: true })
    },
    resizeChart() {
      if (this.chartInstance) {
        this.chartInstance.resize()
      }
    }
  }
}
</script>

<style scoped>
.order-material-analysis {
  height: 500px;
  display: flex;
  flex-direction: column;
}

.card-header {
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 10px;
}

.chart-container {
  flex-grow: 1;
  min-height: 280px;
  width: 100%;
}
</style>
