<template>
  <div class="security-test-charts">
    <SectionTitle title="安保测试物品分类">
      <div class="chart-container" ref="itemsChart"></div>
    </SectionTitle>
    <SectionTitle title="安保测试通过结果">
      <div class="chart-container" ref="resultsChart"></div>
    </SectionTitle>
    <SectionTitle title="安保测试区域情况">
      <div class="chart-container" ref="areasChart"></div>
    </SectionTitle>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import SectionTitle from '@/components/SectionTitle.vue'

export default {
  name: 'SecurityTestCharts',
  components: {
    SectionTitle
  },
  props: {
    chartsData: {
      type: Object,
      default: () => ({
        items: {
          labels: ['违禁品', '限制品', '生活用品'],
          data: [45, 35, 20]
        },
        results: {
          labels: ['通过', '未通过'],
          data: [85, 15]
        },
        areas: {
          labels: ['T1', 'T2', 'T3'],
          data: [35, 35, 30]
        }
      })
    }
  },
  data() {
    return {
      charts: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts()
    })
  },
  watch: {
    chartsData: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          this.disposeCharts()
          this.initCharts()
        })
      }
    }
  },
  methods: {
    disposeCharts() {
      Object.values(this.charts).forEach(chart => {
        if (chart) chart.dispose()
      })
      this.charts = {}
    },
    initCharts() {
      this.initItemsChart()
      this.initResultsChart()
      this.initAreasChart()
    },
    initItemsChart() {
      if (!this.$refs.itemsChart) return
      this.charts.items = echarts.init(this.$refs.itemsChart)
      const option = {
        responsive: true,
        maintainAspectRatio: false,
        series: [{
          type: 'pie',
          radius: ['50%', '70%'],
          data: this.chartsData.items.labels.map((label, index) => ({
            name: label,
            value: this.chartsData.items.data[index]
          })),
          itemStyle: {
            color: function (params) {
              const colors = ['#60A5FA', '#A78BFA', '#34D399', '#FBBF24', '#F472B6', '#EF4444', '#A78BFA', '#6366F1']
              return colors[params.dataIndex % colors.length]
            }
          },
          label: {
            show: true,
            color: 'rgba(255, 255, 255, 0.7)',
            fontSize: 10,
            formatter: '{b}\n{d}%'
          }
        }]
      }
      this.charts.items.setOption(option)
    },
    initResultsChart() {
      if (!this.$refs.resultsChart) return
      this.charts.results = echarts.init(this.$refs.resultsChart)
      const option = {
        responsive: true,
        maintainAspectRatio: false,
        series: [{
          type: 'pie',
          radius: ['50%', '70%'],
          data: this.chartsData.results.labels.map((label, index) => ({
            name: label,
            value: this.chartsData.results.data[index]
          })),
          itemStyle: {
            color: function (params) {
              const colors = ['#60A5FA', '#A78BFA', '#34D399', '#FBBF24', '#F472B6', '#EF4444', '#A78BFA', '#6366F1']
              return colors[params.dataIndex % colors.length]
            }
          },
          label: {
            show: true,
            color: 'rgba(255, 255, 255, 0.7)',
            fontSize: 10,
            formatter: '{b}\n{d}%'
          }
        }]
      }
      this.charts.results.setOption(option)
    },
    initAreasChart() {
      if (!this.$refs.areasChart) return
      this.charts.areas = echarts.init(this.$refs.areasChart)
      const option = {
        responsive: true,
        maintainAspectRatio: false,
        series: [{
          type: 'pie',
          radius: ['50%', '70%'],
          data: this.chartsData.areas.labels.map((label, index) => ({
            name: label,
            value: this.chartsData.areas.data[index]
          })),
          itemStyle: {
            color: function (params) {
              const colors = ['#60A5FA', '#A78BFA', '#34D399', '#FBBF24', '#F472B6', '#EF4444', '#A78BFA', '#6366F1']
              return colors[params.dataIndex % colors.length]
            }
          },
          label: {
            show: true,
            color: 'rgba(255, 255, 255, 0.7)',
            fontSize: 10,
            formatter: '{b}\n{d}%'
          }
        }]
      }
      this.charts.areas.setOption(option)
    }
  },
  beforeDestroy() {
    Object.values(this.charts).forEach(chart => {
      if (chart) chart.dispose()
    })
  }
}
</script>

<style lang="scss" scoped>
.security-test-charts {
  display: flex;


  flex-direction: column;
}
.chart-container {
  width: 100%;
  height: 240px;
}
</style>