<template>
  <div class="chart-container">
    <div ref="chart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'MaterialAnalysis',
  props: {
    materialData: {
      type: Object,
      default: () => ({
        categories: [],
        usageFrequency: [],
        stockQuantity: [],
        purchaseCycle: []
      })
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    materialData: {
      deep: true,
      handler(val) {
        if (val) {
          this.initChart()
        }
      }
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      if (!this.$refs.chart) return
      this.chart = echarts.init(this.$refs.chart)
      const option = {
        title: {
          text: '物料使用分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['使用频率', '库存量', '采购周期'],
          top: 30
        },
        xAxis: {
          type: 'category',
          data: this.materialData.categories
        },
        yAxis: [
          {
            type: 'value',
            name: '数量/频率',
            position: 'left'
          },
          {
            type: 'value',
            name: '采购周期(天)',
            position: 'right'
          }
        ],
        series: [
          {
            name: '使用频率',
            type: 'bar',
            data: this.materialData.usageFrequency
          },
          {
            name: '库存量',
            type: 'bar',
            data: this.materialData.stockQuantity
          },
          {
            name: '采购周期',
            type: 'line',
            yAxisIndex: 1,
            data: this.materialData.purchaseCycle
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.chart-container {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  height: 100%;
  box-sizing: border-box;
}
</style> 