<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: "分布图"
    },
    subTitle: {
      type: String,
      default: "--"
    }
  },
  data() {
    return {
      chart: null,
      colorList: [
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#2FC89C" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#5DF1BA" // 100% 处的颜色
            }
          ]
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#2C71D8" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#4DA4F4" // 100% 处的颜色
            }
          ]
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#576BF5" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#3234DB" // 100% 处的颜色
            }
          ]
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#D78935" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#EFA75A" // 100% 处的颜色
            }
          ]
        }
      ],
      opacityList: [
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#5FF2BB" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#31CA9D" // 100% 处的颜色
            }
          ]
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#4DA4F4" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#2C71D8" // 100% 处的颜色
            }
          ]
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#3234DB" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#576BF5" // 100% 处的颜色
            }
          ]
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#EFA75A" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#D78935" // 100% 处的颜色
            }
          ]
        }
      ],
      // 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: "0",
          subtext: "--",
          x: '10%',
          y: "33%",
          textStyle: {
            color: "white",
            fontStyle: "italic",
            fontSize: 16,
            fontWeight: 500,
            align: "center"
          },
          subtextStyle: {
            color: "rgba(255,255,255,0.4)",
            fontStyle: "italic",
            fontSize: 14,
            fontWeight: 500,
            align: "center"
          },
          itemGap: 5 //主副标题间距
        },
        grid: {
          //   left: '-50%',
          //   // align: "left",
          //   // right: 38,
          //   // bottom: 30,
          //   // top: "-10%",
          //   // bottom:10,
          //   containLabel: true,
        },
        tooltip: {
          trigger: "item",
          borderWidth: 0,
          textStyle: {
            color: "#ffffff"
          },
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          right: "right",
          // y: "center",
          align: "left",
          // right:'-30%',
          // bottom: 5,
          itemGap: 1,
          icon: "circle",
          orient: "vertical",
          itemHeight: 8,
          itemWidth: 8,
          textStyle: {
            color: "rgba(255,255,255,0.4)",
            // padding: [0, 0, -10, 0],
            fontStyle: "Arial Normal"
          },
          show: true,
          data: []
        },

        series: [
          {
            title: {},
            type: "pie",
            zlevel: 3,
            left: 0,
            showEmptyCircle: true, //无数据占位圆
            // color: [
            //   "rgba(67, 215, 181, 1)",
            //   "rgba(56, 131, 248, 1)",
            //   "rgba(33, 81, 255, 1)"
            //   // "rgba(11, 234, 216, 0.2)",
            // ],
            center: ["30%", "45%"],
            radius: ["48%", "62%"],
            // avoidLabelOverlap: false, //防止标签重叠策略
            animationEasing: "cubicInOut",
            animationDuration,
            itemStyle: {
              normal: {
                //发光
                // shadowBlur: 5,
                // shadowColor: "rgba(255,255,255,0.3)",
                // borderColor: '#19202f',
                // borderWidth: 4,
                // borderJoin:'round'
              }
            },
            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: false,
              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)",
            // ],
            center: ["30%", "45%"],
            radius: ["43%", "49%"],
            label: {
              normal: {
                show: false,
                position: "inner"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            tooltip: {
              show: false
            },
            itemStyle: {
              normal: {
                //发光
                // borderColor: 'white',
                // borderWidth: 1,
              }
            },
            data: [
              // {
              //   value: 100,
              //   name: ""
              // },
              // {
              //   value: 100,
              //   name: ""
              // }
            ]
          }
          // //边框环
          // {
          //   name: "人员类型",
          //   type: "pie",
          //   hoverAnimation: false,
          //   legendHoverLink: false,
          //   animationEasing: "cubicInOut",
          //   animationDuration,
          //   cursor: "default",
          //   color: ["white"],
          //   center: ['25%', '45%'],
          //   radius: ["48.1%", "48.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: false, //不显示标签线条
              // 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
      option.title.subtext = this.subTitle
      //颜色设置
      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 && this.chart.setOption(option)
    }
  }
}
</script>
