<template>
  <div class="hazard-overview">
    <div ref="chart" class="hazard-ring"></div>
    <div class="legend">
      <div
        v-for="item in items"
        :key="item.name"
        class="legend-item"
      >
        <span class="dot" :style="{ backgroundColor: item.color }"></span>
        <span class="label">{{ item.name }}</span>
        <span class="value">{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HazardOverview",
  props: {
    items: {
      type: Array,
      default() {
        return [
          { name: "居民用户隐患", value: 3, color: "#4aa8ff" },
          { name: "工商用户隐患", value: 2, color: "#ffb357" },
          { name: "管线隐患", value: 4, color: "#3be6ff" },
          { name: "其他设施", value: 3, color: "#ff4a4a" },
        ];
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  computed: {
    totalValue() {
      return this.items.reduce((sum, item) => {
        const value = Number(item.value) || 0;
        return sum + value;
      }, 0);
    },
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  watch: {
    items: {
      handler() {
        this.updateChart();
      },
      deep: true,
    },
  },
  methods: {
    initChart() {
      if (!this.$refs.chart) {
        return;
      }
      this.chart = this.$echarts.init(this.$refs.chart);
      this.updateChart();
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    updateChart() {
      if (!this.chart) {
        return;
      }
      const data = this.items.map((item) => ({
        name: item.name,
        value: Number(item.value) || 0,
      }));

      this.chart.setOption({
        color: this.items.map((item) => item.color),
        title: {
          text: String(this.totalValue),
          subtext: "总数",
          left: "center",
          top: "center",
          textStyle: {
            color: "#ffffff",
            fontSize: 32,
            fontWeight: "bold",
          },
          subtextStyle: {
            color: "#ffffff",
            fontSize: 14,
          },
        },
        series: [
          {
            type: "pie",
            radius: ["68%", "86%"],
            center: ["50%", "50%"],
            startAngle: 90,
            label: { show: false },
            labelLine: { show: false },
            emphasis: { scale: false },
            itemStyle: {
              borderWidth: 3,
              borderColor: "rgba(3, 16, 28, 0.9)",
            },
            data,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.hazard-overview {
  width: 100%;
  display: flex;
  align-items: center;
}

.hazard-ring {
  width: 180px;
  height: 180px;
}

.legend {
  flex:1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 16px;
}


.legend-item {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  background: linear-gradient(
    90deg,
    rgba(64, 156, 255, 0.35) 0%,
    rgba(64, 156, 255, 0.08) 100%
  );
  border: 1px solid rgba(64, 156, 255, 0.5);
  color: #ffffff;
  box-shadow: inset 0 0 14px rgba(64, 156, 255, 0.25);
}

.dot {
  width: 16px;
  height: 8px;
  border-radius: 2px;
  margin-right: 10px;
  flex-shrink: 0;
}

.label {
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
}

.value {
  font-size: 16px;
  font-weight: 600;
}
</style>
