<template >
  <div>
    <div class="__top">
      <ul class="box-items">
        <li
          class="item"
          :class="{ active: activeIndex === 0 }"
          @click="clickItemHandler(0)"
        >
          全部
        </li>
        <li
          class="item"
          :class="{ active: activeIndex === 1 }"
          @click="clickItemHandler(1)"
        >
          本年
        </li>
        <li
          class="item"
          :class="{ active: activeIndex === 2 }"
          @click="clickItemHandler(2)"
        >
          本月
        </li>
      </ul>
    </div>
    <div style="display: flex; justify-content: center">
      <div
      v-show="data.length > 0"
        ref="fireAddressType"
        class="pie-chart"
        style="width: 443px; height: 240px"
      ></div>
      <div style="margin-left: 20px" v-show="data.length == 0">
      <img src="../../../assets/images/null2.png" alt="">
    </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { fireAddress } from "@/api/hzfx";
import toolUtils from "@/utils/echartsTooltip";
export default {
  name: "FireAddressType",
  props: {
    qx: String,
  },
  data() {
    return {
      chart: null,
      data: [],
      activeIndex: 0,
    };
  },
  mounted() {
    // 初始化起火场所类型
    this.init();
  },
  computed: {
    legend() {
      return this.data.map((item) => item.name);
    },
  },
  created() {
    this.loadData();
  },
  watch: {
    data: {
      handler() {
        this.reload();
      },
      deep: true,
    },
    qx() {
      this.loadData();
    },
  },
  methods: {
    init() {
      this.chart = echarts.init(this.$refs.fireAddressType);
      this.chart.setOption({
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
          formatter: "{c} <br/>{b}",
          extraCssText: "z-index: 1000;",
          backgroundColor: "#02809a",
          borderColor: "rgba(0,213,255, .6)"
        },
        legend: {
          show: true,
          // right: 0,
          bottom: 25,
          itemWidth: 14,
          itemHeight: 14,
          itemGap: 8,
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          data: this.legend,
        },
        color: ["#00a2ff", "#6421BA", "#61d266", "#F4D156", "#15e0d4"],
        series: [
          // 数据展示层
          {
            name: "存在隐患数",
            type: "pie",
            center: ["50%", "45%"],
            radius: ["6%", "60%"],
            avoidLabelOverlap: true,
            label: {
              normal: {
                color: "#fff",
                show: true,
                formatter: (params) => {
                  return `{value|${params.percent}%}`;
                },
                alignTo: "edge",
                minMargin: 5,
                edgeDistance: 10,
                lineHeight: 20,
                rich: {
                  value: {
                    fontSize: 20,
                    color: "#44F1FF",
                    padding: [0, 0, 12, 0],
                  },
                },
              },
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80,
              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: this.data,
          },
        ],
      });
    },
    reload() {
      const option = {
        legend: {
          data: this.legend,
        },
        series: [
          {
            data: this.data,
          },
        ],
      };
      this.chart.setOption(option);

      // 自动轮播
      toolUtils.autoHover(this.chart, option, this.legend.length, 5000);
    },
    clickItemHandler(index) {
      this.activeIndex = index;
      this.loadData();
    },
    loadData() {
      fireAddress({
        pageNum: 1,
        pageSize: 100,
        qx: this.qx === "重庆市" ? "" : this.qx,
        n: this.activeIndex !== 0 ? "2023" : null,
        y: this.activeIndex === 2 ? "06" : null,
      }).then((res) => {
        this.data = res.data.rows.map((item) => ({
          name: item.qhcs,
          value: item.sl,
        }));
      });
    },
  },
};
</script>

<style scoped lang='less'>
.__top {
  display: flex;
  justify-content: end;
  margin-top: 10px;
  margin-right: 10px;
}
.box-items {
  display: flex;
  width: 128px;
  height: 28px;
  padding: 2px 4px;
  gap: 12px;
  background-color: rgba(0, 213, 255, 0.12);
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
  .item {
    color: rgba(151, 238, 255, 0.47);
  }
  .item.active {
    color: #fff;
  }
}
.pie-chart {
  position: relative;
}
.pie-chart::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -60%);
  background: url("../../../assets/images/pie-circle.svg") no-repeat center
    center;
  background-size: 100% 100%;
  pointer-events: none;
}
</style>
