<template>
  <div class="panel category-chart">
    <div class="panel__title">实验室危险源分类统计</div>
    <div class="chart-wrap">
      <div ref="chart" class="chart"></div>
    </div>
    <div class="btn-row">
      <button class="btn-floorplan">返回平面图</button>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'CategoryChart',
  data() {
    return {
      total: 0,
      chart: null
    }
  },
  mounted() {
    this.fetchData()
  },
  beforeDestroy() {
    if (this.chart) this.chart.dispose()
  },
  methods: {
    async fetchData() {
      // 该组件所需接口暂无对应 API，使用空数据占位
      this.$nextTick(() => this.initChart([]))
    },
    /** 初始化环形图 - 展示危险源分类分布 */
    initChart(categories) {
      this.chart = echarts.init(this.$refs.chart)
      const option = {
        color: categories.map(c => c.color),
        tooltip: {
          trigger: 'item',
          textStyle: { fontSize: 24 },
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          textStyle: { color: 'rgba(180,210,255,0.85)', fontSize: 24 },
          itemWidth: 20,
          itemHeight: 12,
          itemGap: 18
        },
        series: [{
          type: 'pie',
          radius: ['42%', '65%'],
          center: ['35%', '50%'],
          label: { show: false },
          data: categories.map(c => ({ name: c.name, value: c.value })),
          itemStyle: {
            borderColor: '#0a1a3a',
            borderWidth: 3
          }
        }],
        graphic: [{
          type: 'group',
          left: '23%',
          top: 'center',
          children: [
            {
              type: 'text',
              left: 'center',
              top: -28,
              style: {
                text: String(this.total),
                fill: '#00e5ff',
                fontSize: 56,
                fontWeight: 'bold',
                textAlign: 'center'
              }
            },
            {
              type: 'text',
              left: 'center',
              top: 28,
              style: {
                text: '危险源总数',
                fill: 'rgba(180,210,255,0.7)',
                fontSize: 24,
                textAlign: 'center'
              }
            }
          ]
        }]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.category-chart {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chart-wrap {
  flex: 1;
  min-height: 0;

  .chart {
    width: 100%;
    height: 100%;
  }
}

.btn-row {
  display: flex;
  justify-content: center;
  padding-top: 16px;

  .btn-floorplan {
    padding: 12px 48px;
    font-size: $font-size-small;
    color: $color-cyan;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.4);
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 4px;
    transition: all 0.3s;

    &:hover {
      background: rgba(0, 229, 255, 0.2);
    }
  }
}
</style>
