<template>
  <div class="pie-chart">
    <div class="tabLits">
      <div
        @click="handleClick(item.type, index)"
        v-for="(item, index) in tabList"
        :key="index"
        :class="currentIndex == index ? 'currentIndex' : ''"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="pie">
      <div class="pie-title">目前数据更新情况</div>
      <div id="pie-echarts"></div>
      <div class="lable">
        <span style="color: #ffb400">{{ pie.update }}</span> /
        <span>{{ pie.total }}</span>
        {{ currentIndex == 0 ? "户" : "人" }}
      </div>
    </div>
  </div>
</template>

<script>
var echarts = require("echarts");
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["pie", "queryParamsIndex"]),
  },
  data() {
    return {
      currentIndex: 0,
      tabList: [
        { name: "住户", type: "house" },
        { name: "居民", value: "person" },
      ],
    };
  },
  mounted() {
    this.getPie("house");
  },
  watch: {
    queryParamsIndex: {
      handler(newVal, oldVal) {
        this.getPie();
      },
      deep: true,
    },
  },
  methods: {
    handleClick(type, index) {
      if (this.currentIndex == index) return;
      this.currentIndex = index;
      this.getPie();
    },

    getPie() {
      let queryParams = {
        type: this.tabList[this.currentIndex].type,
        shequId: this.queryParamsIndex.shequId,
      };
      this.$store.dispatch("GetPie", queryParams).then((res) => {
        let percent = Math.trunc((this.pie.update / this.pie.total) * 100);
        this.initPieEcharts(percent);
      });
    },

    initPieEcharts(num) {
      if (!num) {
        num = 0;
      }
      var myChart = echarts.init(document.getElementById("pie-echarts"));
      let angle = 0; //角度，用来做简单的动画效果的
      let value = num; //图上角度数据
      var option = {
        title: {
          text: "{a|" + value + "}{c|%}",
          x: "center",
          y: "center",
          textStyle: {
            rich: {
              a: {
                fontSize: 14,
                color: "#ffffff",
                fontWeight: "bold",
              },
              c: {
                fontSize: 14,
                color: "#ffffff",
                fontWeight: "normal",
              },
            },
          },
        },
        series: [
          //内环
          {
            name: "",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2.3) * 0.65,
                  startAngle: ((0 + -angle) * Math.PI) / 180,
                  endAngle: ((360 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 0.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          //外环
          {
            name: "",
            type: "pie",
            radius: ["70%", "80%"],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: "center",
              },
            },
            data: [
              {
                value: value,
                name: "",
                itemStyle: {
                  normal: {
                    //外环发光
                    borderWidth: 0.5,
                    shadowBlur: 10,
                    borderColor: "#4bf3f9",
                    shadowColor: "#9bfeff",
                    color: {
                      // 圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: "#4bf3f9", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#4bf3f9", // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
              },
              {
                value: 100 - value,
                name: "",
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#173164",
                  },
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option, true);
    },
  },
};
</script>

<style lang="scss" scoped>
.pie-chart {
  margin-top: 10px;
  // flex: 1;
  height: 23%;
  display: flex;
  align-items: center;

  .tabLits {
    height: 100%;
    width: 25px;
    border: 1px solid #086394;
    border-radius: 6px;
    overflow: hidden;
    div {
      cursor: pointer;
      display: flex;
      text-align: center;
      align-items: center;
      height: 50%;
      font-size: 14px;
      color: #007dc1;
      font-family: "Alibaba-PuHuiTi-Regular.otf";
    }
    .currentIndex {
      color: #fff;
      font-weight: bold;
      background: #086394;
    }
  }
  .pie {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .pie-title {
      font-size: 16px;
      text-align: center;
      color: #ffffff;
      font-family: "Alibaba-PuHuiTi-Regular.otf";
      text-shadow: 0 0 10px #278873, 0 0 10px #278873, 0 0 30px #278873,
        0 0 50px #278873;
    }
    #pie-echarts {
      flex: 1;
      margin: 5px 0;
      width: 70%;
    }
    .lable {
      text-align: center;
      font-size: 14px;
      color: #c9e1f5;
      span {
        font-family: "DIN-Regular-2.otf";
      }
    }
  }
}
</style>
