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

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import { debounce } from "@/utils";
import { color } from "echarts/lib/export";
import { queryUserClientType } from "@/api/videoLive"
import { clientTypeObj } from "@/utils/options"

export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "70%"
    },
    height: {
      type: String,
      default: "250px"
    }
  },
  data() {
    return {
      chart: null
    };
  },
  async mounted() {
    await this.getUserClientType()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHandler);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    window.removeEventListener("resize", this.__resizeHandler);
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    async getUserClientType() {
      let ret = await queryUserClientType({videoId: this.$route.query.id})
      if(ret && ret.code === 0) {
        const data = ret.data.map(item=>{
          return {
            value: item.count,
            name: clientTypeObj[item.clientType]
          }
        })
        this.initChart(data);
      }
    },
    initChart(data) {
      this.chart = echarts.init(this.$el, "macarons");
      const colorList = [
          new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: "rgba(103, 194, 58,1)"
            },
            {
              offset: 1,
              color: "rgba(103, 194, 58,0.8)"
            }
          ]),
          new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              offset: 0,
              color: "rgba(255,181,111,1)"
            },
            {
              offset: 1,
              color: "rgba(255,181,111,0.3)"
            }
          ]),
          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: "rgba(101,122,250,1)"
            },
            {
              offset: 1,
              color: "rgba(101,122,250,0.3)"
            }
          ]),
          new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: "rgba(45,190,146,1)"
            },
            {
              offset: 1,
              color: "rgba(45,190,146,0.3)"
            }
          ])
        ];
      this.chart.setOption({
        tooltip: {
          trigger: "item"
        },
        legend: {
          type: "plain",
          orient: "vertical",
          left: "70%",
          top: "center",
          align: "left",
          itemGap: 10,
          itemWidth: 20, // 设置宽度
          itemHeight: 20, // 设置高度]
          symbolKeepAspect: false,
          selectedMode: false,
          textStyle: {
            color: "#333333",
            fontSize: 14
          }
        },
        series: [
          {
            type: "pie",
            hoverAnimation: true,
            hoverOffset: 25,
            startAngle: 180, //起始角度
            clockwise: false, //是否顺时针
            radius: ["45%", "66%"],
            center: ["30%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false, // 显示标签
            },
            itemStyle: {
              color: params => {
                return colorList[params.dataIndex];
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
                formatter: ["{a|占比 \n{d}%}"].join("\n"),
                rich: {
                  a: {
                    fontSize: 20,
                    lineHeight: 36,
                    color: "#333"
                  },
                  b: {
                    color: "#a7a9c7",
                    fontSize: 16,
                    lineHeight: 24,
                    color: "#333"
                  }
                }
              }
            },
            label: {
              show: false,
              position: "center",
              color: "rgba(13, 17, 29,0)"
            },
            labelLine: {
              show: false
            },
            data: data,
            zlevel: 30
          }
        ]
      });
    }
  }
};
</script>
