<template>
  <div :class="className" :style="{height: height, width: width}" />
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array,
      default: () => [
        { value: 450, name: '不足三年' },
        { value: 600, name: '3~6年' },
        { value: 1000, name: '6~10年' },
        { value: 670, name: '>10年' }
      ]
    }
  },
  data() {
    return {
      chart: null,
      colorArr: [
        "#218de0",
        "#01cbb3",
        "#85e647",
        "#5d5cda",
        "#05c5b0",
        "#c29927",
      ],
      colorAlpha: [
        "rgba(60,170,211,0.05)",
        "rgba(1,203,179,0.05)",
        "rgba(133,230,71,0.05)",
        "rgba(93,92,218,0.05)",
        "rgba(5,197,176,0.05)",
        "rgba(194,153,39,0.05)",
      ]
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(newVal) {
        if (this.chart) {
          this.setOptions(newVal);
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) return;
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    // 初始化图表
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');
      this.setOptions();
    },

    // 生成虚线环数据
    dashed(val) {
      return Array.from({ length: val }, (_, i) => ({
        name: `${i + 1}`,
        value: i % 2 === 0 ? 10 : 20,
        itemStyle: {
          normal: {
            color: "rgba(0,0,0,0)",
            ...(i % 2 !== 0 && {
              borderWidth: 2,
              borderColor: "rgba(33, 141, 224,0.18)"
            })
          }
        }
      }));
    },

    // 设置图表配置
    setOptions() {
      const sum = this.chartData.reduce((t, v) => t + v.value, 0);

      this.chart.setOption({
        // backgroundColor: '#243252',
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}个 ({d}%)"
        },
        legend: {
          top: "center",
          left: "62%",
          orient: "vertical",
          data: this.chartData,
          icon: "circle",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 40,
          formatter: name => {
            const item = this.chartData.find(v => v.name === name);
            return `{name|${name}:}{value1|${item.value}个}{value2|${((item.value / sum) * 100).toFixed(2)}%}`;
          },
          textStyle: {
            rich: {
              name: { color: "#fff", fontSize: 18, width: 100 },
              value1: { color: "#01cbb3", fontSize: 16, padding: [0, 15, 0, 10] },
              value2: { color: "#85e647", fontSize: 16 }
            }
          }
        },title: {
          text: '管道预估剩余寿命分成', // 标题内容
          top: '5%',
          left:'3%',    // 距离顶部5%
          textStyle: {     // 文字样式
            color: '#fff',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        series: [
          // 主饼图
          {
            type: "pie",
            radius: "70%",
            center: ["35%", "50%"],
            roseType: "radius",
            label: {
              padding: [0, -75],
              alignTo: 'labelLine',
              formatter: (params) => params.name
                  ? `{dot|}   {d|${params.name} ${params.percent}%}\n\n{c|${params.value}个}`
                  : ``,
              rich: {
                c: {color: '#fff', fontSize: 14, lineHeight: 20, margin: 20},
                d: {fontSize: 14, color: 'rgba(255,255,255,0.7)'},
                dot: {
                  backgroundColor: 'auto',
                  width: 0,
                  height: 0,
                  borderRadius: 3,
                  fontSize: 16,
                  padding: [3, -3, 3, -3]
                }
              }
            },
            labelLine: {length: 10, length2: 20,},
            data: this.chartData.map((item, i) => ({
              ...item,
              itemStyle: {
                borderColor: this.colorArr[i],
                borderWidth: 2,
                shadowBlur: 20,
                shadowColor: this.colorArr[i],
                shadowOffsetX: 25,
                shadowOffsetY: 20,
                color: this.colorAlpha[i]
              }
            }))
          },
          // 虚线环系列
          ...[18, 40, 60, 70, 80].map(radius => ({
            type: "pie",
            radius: [`${radius}%`, `${radius + 0.3}%`],
            center: ["35%", "50%"],
            hoverAnimation: false,
            clockwise: false,
            itemStyle: { normal: { color: "#017383" } },
            label: { show: false },
            data: this.dashed(radius === 18 ? 18 : Math.round(radius * 1.2))
          }))
        ]
      });
    }
  }
};
</script>

<style scoped>
.chart {
  /* 如果出现颜色覆盖问题，可以添加以下样式 */
  background-color: transparent !important;
}
</style>
