<template>
  <div>
    <div class="title">
      <span>隐患类型</span>
      <span>单位：条</span>
    </div>
    <div @click="showYh" style="cursor: pointer">
      <div ref="chart" class="item" style="width: 217px; height: 201px" />
    </div>
    <!-- 隐患 -->
    <basic-modal top="120px" ref="yhModal" name="“一楼一策”隐患整治清单">
      <YhModalContent :default="yhModal" />
    </basic-modal>
  </div>
</template>

<script>
import * as echarts from "echarts";
import YhModalContent from "../../../Detail/components/YhModalContent.vue";
import toolUtils from "@/utils/echartsTooltip";
export default {
  props: {
    yhType: Array,
  },
  components: { YhModalContent },
  data() {
    return {
      chart: null,
      timer: "",
      yhModal: {},
    };
  },
  watch: {
    yhType: {
      handler(val) {
        if (val.length > 0) {
          this.$nextTick(() => {
            // 获取dom容器
            const chartDom = this.$refs.chart;
            // 初始化图表实例
            this.chart = echarts.init(chartDom);
            this.initChart(val);
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  // mounted() {
  //   const chartDom = this.$refs.chart;
  //   //   // 初始化图表实例
  //   this.chart = echarts.init(chartDom);
  //   this.initChart();
  //   // setTimeout(startTimer, 500);
  // },
  methods: {
    initChart(data) {
      const option = {
        // backgroundColor: '#043e9e',
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            fontSize: 12,
          },
          formatter: "{c} <br/>{b}",
          extraCssText: "z-index: 1000;"
        },
        legend: {
          show: true,
          right: 20,
          bottom: 0,
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 8,
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          data: ["消防设施", "生命通道", "用电用气", "消防管理"],
        },
        color: ["#00a2ff", "#00eaff", "#16c843", "#C3C71B"],
        series: [
          // 数据展示层
          {
            name: "建筑总数",
            type: "pie",
            center: ["45%", "45%"],
            radius: ["35%", "50%"],
            avoidLabelOverlap: true,
            label: {
              normal: {
                color: "#fff",
                show: true,
                position: "outside",
                formatter: (params) => {
                  return `{value|${params.value}}`;
                },
                padding: [0, -90],
                align: "center",
                rich: {
                  value: {
                    fontSize: 15,
                    color: "#44F1FF",
                    padding: [0, 0, 10, 15],
                  },
                },
              },
            },
            labelLine: {
              show: true,
              length: 0,
              length2: 90,
              lineStyle: {
                color: "#fff",
                type: "dashed",
              },
            },
            labelLayout: (params) => {
              const isLeft = params.labelRect.x < this.chart.getWidth() / 3;
              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: data,
          },
          {
            type: "pie",
            center: ["45%", "45%"],
            radius: ["35%", "45%"],
            hoverAnimation: false,
            z: 10,
            label: {
              show: false,
            },
            tooltip: {
              show: false,
            },
            data: data.map((item) => ({
              value: item.value,
              name: item.name,
              itemStyle: {
                // normal: {
                //   color: 'rgba(0,0,0, .3)'
                // }
              },
            })),
            labelLine: {
              show: false,
            },
          },
          // 外边框虚线
          {
            type: "pie",
            zlevel: 4,
            silent: true,
            center: ["45%", "45%"],
            radius: ["55%", "56%"],
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: this.createData(),
          },
        ],
      };
      toolUtils.autoHover(this.chart, option, 4, 2000);
      this.chart.setOption(option);
      //自适应图表
      window.onresize = this.chart.resize;
    },
    createData() {
      let dataArr = [];
      for (var i = 0; i < 200; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            //name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: "#0475bd",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        } else {
          dataArr.push({
            //name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        }
      }
      return dataArr;
    },
    showYh() {
      this.showModal("yhModal");
    },
  },
};
</script>

<style scoped>
.title {
  display: flex;
  padding: 15px 10px 0px 10px;
  justify-content: space-between;
}
</style>
