<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>
        <span class="value2">{{ item.value2 }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HazardOverview",
  props: {
    items: {
      type: Array,
      default() {
        return [
          { name: "信号低数量", value: 30, value2: "30%", color: "#FF5656" },
          { name: "信号高数量", value: 19, value2: "19%", color: "#468AFF" },
          { name: "不通电数量", value: 21, value2: "21%", color: "#F2C343" },
          { name: "基线不稳数量", value: 16, value2: "16%", color: "#26D5DB" },
          { name: "阻抗异常数量", value: 14, value2: "14%", color: "#B676FE" },
        ];
      },
    },
  },
  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(obj) {
        this.updateChart();
        console.log(123,obj)
      },
      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: 200px;
  // height: 200px;
  width: 100%;
  height: 100%;
}

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

.legend-item {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  height: 25px;
  padding: 0 10px;
  // 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;
  background: rgba(34, 131, 248,.16);
  
  // 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;
  width: 82px;
  font-size: 12px;
  white-space: nowrap;
  // margin-right: 100px;
}

.value {
  font-size: 14px;
  font-weight: 600;
  width: 30px;
  text-align: center;
}
.value2 {
  font-size: 14px;
  font-weight: 600;
  width: 50px;
  text-align: right;
}
</style>
