<template>
  <div>
    <div class="title">
      <span>隐患类型</span>
      <span>单位：条</span>
    </div>
    <div style="cursor: pointer">
      <div ref="chart" class="item" style="width: 240px; height: 211px" />
      <ul style="display: flex; flex-wrap: wrap;   margin: auto; margin-bottom: 30px; font-size: 13px;">
        <li @click="showModlus('消防设施')" style="margin-bottom: 5px; margin-right: 5px; width: 110px;">
          <span
            style="
              display: inline-block;
              width: 12px;
              height: 12px;
              background: #00a2ff;
              margin: 0 4px;
            "
          ></span>
          <span>消防设施
            <span style="color: rgb(68, 241, 255);">{{ yhType[0]?.value }}</span>
          </span>
        </li>
        <li @click="showModlus('生命通道')">
          <span
            style="
              display: inline-block;
              width: 12px;
              height: 12px;
              background: #00eaff;
              margin: 0 4px;
            "
          ></span>
          <span>生命通道
            <span style="color: rgb(68, 241, 255);">{{ yhType[1]?.value }}</span>
          </span>
        </li>
        <li @click="showModlus('用电用气')" style="margin-right: 5px; width: 110px;" >
          <span
            style="
              display: inline-block;
              width: 12px;
              height: 12px;
              background: #16c843;
              margin: 0 4px;
            "
          ></span>
          <span>用电用气
            <span style="color: rgb(68, 241, 255);">{{ yhType[2]?.value }}</span>
          </span>
        </li>
        <li @click="showModlus('消防管理')">
          <span
            style="
              display: inline-block;
              width: 12px;
              height: 12px;
              background: #C3C71B;
              margin: 0 4px;
            "
          ></span>
          <span>消防管理
            <span style="color: rgb(68, 241, 255);">{{ yhType[3]?.value }}</span>
          </span>
        </li>
      </ul>
    </div>
    <!-- 隐患 -->
    <basic-modal top="120px" ref="yhModal" >
      <YhModalContent :default="yhModal" />
      <YlycModalHeader slot="title" />
    </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,
    qy:String
  },
  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,
    },
  },
  methods: {
    initChart(data) {
      const option = {
        // backgroundColor: '#043e9e',
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
          formatter: "{b} <br/> {c} {d}%",
          confine: true,
          extraCssText: "z-index: 1000;",
          backgroundColor: "#02809a",
          borderColor: "rgba(0,213,255, .6)"
        },
        color: ["#00a2ff", "#00eaff", "#16c843", "#C3C71B"],
        series: [
          // 数据展示层
          {
            name: "建筑总数",
            type: "pie",
            center: ["52%", "45%"],
            radius: ["35%", "70%"],
            avoidLabelOverlap: true,
            label: {
              normal: {
                color: "#fff",
                show: false,
                position: "outside",
                formatter: (params) => {
                  return `{value|${params.value}}\n ${params.percent}%`;
                },
                // formatter: "{d}%",
                padding: [0, -90],
                align: "center",
                rich: {
                  value: {
                    fontSize: 15,
                    color: "#44F1FF",
                    padding: [0, 0, 10, 15],
                  },
                },
              },
            },
            data: data,
          },
          {
            type: "pie",
            center: ["52%", "45%"],
            radius: ["35%", "60%"],
            hoverAnimation: false,
            z: 10,
            label: {
              show: false,
            },
            tooltip: {
              show: false,
              formatter: "{c} <br/>{b}",
              confine: true,
              extraCssText: "z-index: 1000;",
              backgroundColor: "#02809a",
              borderColor: "rgba(0,213,255, .6)",
              textStyle: {
                color: "#fff",
              },
            },
            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: ["52%", "45%"],
            radius: ["78%", "80%"],
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: this.createData(),
          },
        ],
      };
      toolUtils.autoHover(this.chart, option, 4, 5000);
      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;
    },
    showModlus(val) {
      this.yhModal = {
        qx:this.qy,
        zdqx: [val],
        zgjd: ['待计划', '待整改']
      }
      this.showModal("yhModal");
    },
  },
};
</script>

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