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

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
const animationDuration = 2600;
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
    chartConfig: {
      type: Object,
      default: () => {
        return {};
      },
    },
    title: {
      type: String,
      default: "分布图",
    },
  },
  data() {
    return {
      chart: null,
      colorList: [
        "rgba(67, 215, 181, 1)",
        "rgba(56, 131, 248, 1)",
        "rgba(33, 81, 255, 1)",
        "rgba(11, 234, 216, 1)",
      ],
      opacityList: [
        "rgba(67, 215, 181, 0.2)",
        "rgba(56, 131, 248, 0.2)",
        "rgba(33, 81, 255, 0.2)",
        "rgba(11, 234, 216, 0.2)",
      ],
      pieConfig: {},
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    buildDataFuc(myChart) {
      this.pieConfig = {
        // color: ["#43d7b5", "#2151ff", "#97ead8", "#3883f8"],
        title: {
          text: "17,123",
          x: "center",
          y: "center",
          textStyle: {
            color: "white",
            fontStyle: "normal",
            fontSize: 34,
            fontWeight: 500,
          },
        },
        grid: {
          left: "-10%",
          // right: 38,
          // bottom: 30,
          // top: "-10%",
          bottom:10,
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          borderWidth: 0,
          textStyle: {
            color: "#ffffff",
          },
          formatter: "{b} : {c} ({d}%)",
        },
        legend: {
          left: "center",
          bottom: 5,
          itemGap: 20,
          // icon: "rect",
          itemHeight: 14,
          itemWidth: 14,
          textStyle: {
            color: "white",
            padding: [0, 0, -10, 0],
            fontStyle: "Arial Normal",
          },
          show: true,
          data: [],
        },

        series: [
          {
            title: {},
            type: "pie",
            zlevel: 3,
            showEmptyCircle: true, //无数据占位圆
            // color: [
            //   "rgba(67, 215, 181, 1)",
            //   "rgba(56, 131, 248, 1)",
            //   "rgba(33, 81, 255, 1)"
            //   // "rgba(11, 234, 216, 0.2)",
            // ],
            radius: ["40%", "60%"],
            // avoidLabelOverlap: false, //防止标签重叠策略
            animationEasing: "cubicInOut",
            animationDuration,
            itemStyle: {
              normal: {
                //发光
                shadowBlur: 5,
                shadowColor: "rgba(255,255,255,0.3)",
              },
            },
            label: {
              alignTo: "labelLine", //label line 的末端对齐
              position: "outer",
              margin: 10,
              formatter: function (params) {
                if (params.value > 0) {
                  return (
                    "{number|" +
                    params.data.count +
                    "}  {percent|(" +
                    params.value +
                    "%)}\n\n {name|" +
                    params.name +
                    "}"
                  );
                } else {
                  return "";
                }
              },
              padding: [0, -110, 0, -110],
              // padding: [0, -155, 0, -155],
              // minMargin: 5,
              // edgeDistance: "10%",//label.alignTo 为 'edge' 时有效
              // distanceToLabelLine:10,
              lineHeight: 15,
              rich: {
                number: {
                  align: "center",
                  fontSize: 36,
                  color: "#fff",
                  // fontWeight:600,
                  padding: [0, -10, 0, -20],
                },
                percent: {
                  align: "center",
                  fontSize: 12,
                  color: "#fff",
                  // padding: [5, -10, 0, 20],
                  padding: [0, -20, 0, 10],
                },
                name: {
                  align: "center",
                  fontSize: 16,
                  color: "#fff",
                  padding: [10, -30, 10, -20],
                  // fontStyle: "monospace",
                  // padding: [0,100, 0, 100]
                },
              },

              rotate: 0,
              show: true,
              overflow: "truncate", //超出宽度截断
              ellipsis: "...", //在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。
              position: "outer", //饼图扇区外侧
              bleedMargin: 10,
              distanceToLabelLine: 5,
            },
            labelLine: {
              show: false,
            },
            // labelLine: {
            //   // normal: {
            //   // length: 20,
            //   // length2: 120,
            //   minTurnAngle: 90, //两线夹角
            //   length: 15,
            //   length2: 120,
            //   maxSurfaceAngle: 80 //通过调整第二段线的长度，限制引导线与扇区法线的最大夹角。设置为小于 90 度的值保证引导线不会和扇区交叉。
            //   // }
            // },
            // labelLayout: function(params) {
            //     // const isLeft = params.labelRect.x < myChart.getWidth() / 2;
            //     const isRight = params.labelRect.x>400
            //   if (params.text&&isRight) {
            //    return label.text="isRight"

            //     //     const isLeft = true;
            //     //     const points = params.labelLinePoints;
            //     //     // Update the end point.
            //     //     points[2][0] = isLeft
            //     //       ? params.labelRect.x
            //     //       : params.labelRect.x + params.labelRect.width;
            //     //     return {
            //     //       labelLinePoints: points,
            //     //     };
            //   }
            // },
            data: [],
          },
          //嵌套 放第一个覆盖下层
          {
            name: "人员类型",
            type: "pie",
            zlevel: 2,
            hoverAnimation: false,
            legendHoverLink: false,
            animationEasing: "cubicInOut",
            animationDuration,
            cursor: "default",
            // color: [
            //   "rgba(67, 215, 181, 0.2)",
            //   "rgba(56, 131, 248, 0.2)",
            //   "rgba(33, 81, 255, 0.2)"
            //   // "rgba(11, 234, 216, 0.2)",
            // ],
            radius: ["32%", "63%"],
            label: {
              normal: {
                show: false,
                position: "inner",
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            tooltip: {
              show: false,
            },

            data: [
              // {
              //   value: 100,
              //   name: ""
              // },
              // {
              //   value: 100,
              //   name: ""
              // }
            ],
          },
          //边框环
          {
            name: "人员类型",
            type: "pie",
            hoverAnimation: false,
            legendHoverLink: false,
            animationEasing: "cubicInOut",
            animationDuration,
            cursor: "default",
            color: [" rgba(255,255,255,1)"],
            radius: ["63.1%", "63.6%"],
            itemStyle: {
              normal: {
                color: " rgba(255,255,255,0.2)",
              },
            },
            label: {
              normal: {
                show: false,
                position: "inner",
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            tooltip: {
              show: false,
            },

            data: [
              {
                value: 100,
                name: "",
              },
            ],
          },
        ],
      };
    },
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      this.$nextTick(() => {
        this.buildDataFuc(this.chart);
        // console.log("取到宽高", this.chart);
      });
    },
    setOptions(chartData) {
      if (!chartData.data) return;
      this.buildDataFuc();
      let option = {};
      let length = 0;
      option = Object.assign(this.pieConfig, this.chartConfig);
      const series = chartData.data.map((v) => {
        if (Number(v.value) != 0) {
          return {
            name: v.name,
            value: Number(v.value),
            count: v.count || "--",
            labelLine: {
              show: true,
              // normal: {
              length: 20,
              length2: 145,

              minTurnAngle: 120, //两线夹角
              // length: 15,
              // length2: 120,
              maxSurfaceAngle: 80, //通过调整第二段线的长度，限制引导线与扇区法线的最大夹角。设置为小于 90 度的值保证引导线不会和扇区交叉。
              lineStyle: {
                width: 2,
              },
              // }
            },
          };
        } else {
          return {
            name: v.name,
            count: v.count || "--",
            value: Number(v.value),
            lableLine: {
              show: false,
            },
          };
        }
      });
      const dataList = chartData.data.map((v) => {
        // if (Number(v.value) != 0) {
        return {
          value: Number(v.value),
        };
        // }
      });
      if (option.legend.show) {
        option.legend.data = series.map((_) => _.name);
      }

      option.series[0].data = series;
      option.series[1].data = dataList;
      option.title.text = this.title;
      //颜色设置
      length = series.length;
      option.series[0].color = this.colorList.slice(0, length);
      option.series[1].color = this.opacityList.slice(0, length);
      // if(option.series[0].labelLayout){
      //   option.series[0].labelLine={show:false}
      // }
      //引导线设置
      // this.$nextTick(() => {
      //   option.series[0].labelLayout = function(params) {
      //     if(params.text){
      //       console.log("执行？", params, this.chart,chartData);
      //     const isLeft = params.labelRect.x <script this.chart.getWidth() / 2;
      //     const points = params.labelLinePoints;
      //     // Update the end point.
      //     points[2][0] = isLeft
      //       ? params.labelRect.x
      //       : params.labelRect.x + params.labelRect.width;
      //     return {
      //       labelLinePoints: points
      //     };
      //     }

      //   };
      // });

      this.chart.setOption(option);
    },
  },
};
</script>
