<template>
  <div
    ref="pieChart"
    style="width: 100%; height: 100%; padding-top: 0.375rem"
  ></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: { fdeviceTypeCount: Object },
  computed: {
    fdeviceType() {
      return this.fdeviceTypeCount;
    },
  },
  data() {
    return {
      // deviceTypeCount:null,
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  watch: {
    fdeviceType() {
      this.initChart();
    },
  },

  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },

  methods: {
    //次数分布折线图
    initChart() {
      var chart = echarts.init(this.$refs.pieChart);
      var option;

      var pie = [
        {
          value: this.fdeviceTypeCount.normalCount?this.fdeviceTypeCount.normalCount:0,
          name: "正常",
        },
        {
          value: this.fdeviceTypeCount.faultCount?this.fdeviceTypeCount.faultCount:0,
          name: "故障",
        },
        {
          value: this.fdeviceTypeCount.offLineCount?this.fdeviceTypeCount.offLineCount:0,
          name: "离线",
        },
        {
          value: this.fdeviceTypeCount.deviceCount?this.fdeviceTypeCount.deviceCount:0,
          name: "预警",
        },
      ];
      var totalNum = 0;
      pie.forEach(function (value) {
        totalNum += value.value;
      });

      option = {
        grid: {},

        title: [
          {
            text: "{name|" + totalNum + "}\n{val|设备总数}",
            top: "center",
            left: "center",
            textStyle: {
              rich: {
                name: {
                  fontSize: 30,
                  fontWeight: "normal",
                  color: "#FFFFFF",
                  fontFamily: "impact",
                  padding: [0, 0, 3, 0],
                },
                val: {
                  fontSize: 14,
                  fontWeight: "normal",
                  color: "#FFFFFF",
                  padding: [3, 0, 0, 0],
                },
              },
            },
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            return (
              params.name +
              "：" +
              params.value +
              "<br>占比：" +
              params.percent.toFixed(2) +
              "%"
            );
          },
        },
        // itemStyle:{
        //     normal: {
        //          label: {
        //              show: true,
        //         position: 'outside',
        //              color: 'green',
        //          }
        //     }
        // },

        series: [
          {
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
                formatter: " {b}：{c} ",
              },
              emphasis: {
                show: true,
              },
            },
            name: "访问来源",
            radius: ["45%", "67%"],
            type: "pie",
            data: pie,
          },
        ],
        color: ["#0DFE95", "#F7B61C", "#2BCCFF", "#FE5C0D", "#4388F9"],
      };

      chart.setOption(option, true);
      window.addEventListener("resize", () => {
        chart.resize();
      });
      this.chart = chart;
    },
  },
};
</script>