<template>
  <div id="os-version-pie"></div>
</template>

<script>
export default {
  name: "OSVersionPie",
  data() {
    return {
      total:0,
      mockdata: {
        pieNumData: [
          { value: 133, name: "Windows 7 and Windows Server 2018 R2" },
          { value: 34, name: "Windows 8" },
          { value: 20, name: "Windows 10" },
        ],
      },
    };
  },
  mounted() {
    this.drawLine(this.mockdata.pieNumData);
  },
  created() {
        this.mockdata.pieNumData.forEach(item => {
            this.total += item.value
        })
    },
  methods: {
    drawLine(pieNumData) {
      //基于准备好的dom，初始化echarts实例
      let _this = this;
      let myChart = this.$echarts.init(
        document.getElementById("os-version-pie")
      ); //绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },

        color: ["#F862BB", "#D6B8FF", "#65DCDA"],

        series: [
          {
            type: "pie",
            radius: "65%",
            left:10,
            avoidLabelOverlap: true,
            tooltip: {show: false,},
            label: {
              normal: {
                show: false,
                position: "center",
                formatter: "{c} \n {b}",
                lineHeight: 20,
              },
            },
            startAngle: 0,
            emphasis: {
              label: {
                show: false,
                position: "center",
                fontSize: "18",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderColor: "#454545",
              borderWidth: 2,
            },
            data: this.mockdata.pieNumData,
          },
        ],
      });

      // Set the default selected highlights
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });

      // 預設先給第一筆初始值
      let now = this.mockdata.pieNumData[0].value;
      let params = {
        value: this.mockdata.pieNumData[0].value,
        name: this.mockdata.pieNumData[0].name,
        percent: Number((now / this.total) * 100).toFixed(2),
      };
      console.log(params)
      _this.$emit("highLightInfo", params); //傳到外面卡片秀出資料
      myChart.on("mouseover", function (e) {
        //Highlight the hovering piece
          _this.$emit("highLightInfo", e); //傳到外面卡片秀出資料
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: 0,
        });

        if (e.dataIndex == 0) {
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
          });
        
        }
        if (e.dataIndex != this.index) {
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: this.index,
          });
        }
      });
      myChart.on("mouseout", function (e) {
        this.index = e.dataIndex;
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: this.index,
        });
        
      });
    },
  },
};
</script>

<style>
</style>