<template>
  <div class="people-container">
    <div class="tab">
      <div
        class="tab-item"
        v-for="(item, index) in tabList"
        :key="index"
        :class="currentIndex == index ? 'activeTab' : ''"
        @click="clickTab(index)"
      >
        {{ item.name }}
      </div>
    </div>
    <div id="people"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      currentIndex: 0,
      tabList: [{ name: "工龄分布" }, { name: "性别分布" }],
      queryData: [],
      list: [],
      myChart: null,
    };
  },
  mounted() {
    this.clickTab(0);
    // this.initialize()
  },
  methods: {
    clickTab(index) {
      this.currentIndex = index;
      // if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
      //   this.myChart.dispose();
      // }
      if (index == 0) {
        this.ageList();
      } else {
        this.sexList();
      }
    },
    //工龄分布
    async ageList() {
      let msg = await this.$api.screenLeft.detectCompose();
      this.queryData = msg.result;
      this.list = [];
      this.queryData.forEach((value) => {
        this.list.push({
          value: Number(value.pt) * 10,
          name: value.durationGroup + "年",
        });
      });
      let isExist = this.list.some((item) => {
        return item.name.includes("10");
      });
      if (!isExist) {
        this.list.push({ value: 0, name: "10年以上" });
      }
      this.initialize();
    },
    //男女分布
    async sexList() {
      let msg = await this.$api.screenLeft.sex();
      this.queryData = msg.result;
      this.list = [];
      this.list.push(
        {
          value: Number(msg.result.level1) * 10,
          name: "男",
        },
        {
          value: Number(msg.result.level2) * 10,
          name: "女",
        }
      );
      this.initialize();
    },
    initialize() {
      let _this = this;
      this.myChart = echarts.init(document.getElementById("people"));
      var data = this.list;
      var colorList = ["#0E7CF4", "#91CC75", "#FAC858", "#EE6666"];
      let option = {
        legend: {
          orient: "vertical",
          x: "50%",
          y: "30%",
          itemWidth: this.getFontSize(75),
          itemHeight: this.getFontSize(100),
          itemGap: 15,
          borderRadius: 10,
          align: "left",
          textStyle: {
            color: "#333333",
            fontSize: _this.getFontSize(140),
          },
          formatter: (params) => {
            const dataAll = data.map((item) => Number(item.value));
            const total = dataAll.reduce(
              (x, y) => parseInt(x, 10) + parseInt(y, 10)
            );
            const value = Number(
              data.filter((item) => item.name === params)[0].value
            );
            if (total === 0) {
              return `${params}：0.00%`;
            }
            // const name = params
            return ` ${params}：${((value * 100) / total).toFixed(2)}%`;
          },
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "68%"],
            center: ["25%", "60%"],
            label: {
              show: false,
              normal: {
                // formatter: '{c}',
                position: "inside",
                formatter: (params) => {
                  // return  params.name + '\n' + params.value+'%'
                  return params.value + "%";
                },
                fontSize: 12,
              },
            },
            data: data,
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
                label: {
                  show: false,
                  color: "#fff",
                },
                labelLine: {
                  show: false,
                },
              },
            },
          },
        ],
      };
      this.myChart.setOption(option, true);
    },
  },
};
</script>

<style lang="scss" scoped>
.people-container {
  height: 100%;
  width: 100%;
  position: relative;
  #people {
    height: 100%;
    width: 100%;
  }
  .tab {
    position: absolute;
    left: 50%;
    top: 13px;
    transform: translateX(-50%);
    display: flex;
    z-index: 8;
    & > div {
      cursor: pointer;
      padding: 6px 10px;
      font-size: 14px;
      font-weight: normal;
      color: #4d5158;
      border: 1px solid #dbe0e8;
    }
    & > div:nth-child(1) {
      border-radius: 4px 0px 0px 4px;
      border-right: 0px;
    }
    & > div:nth-child(2) {
      border-radius: 0px 4px 4px 0px;
      border-left: 0px;
    }
    .activeTab {
      background: #1e80eb;
      border-color: #1e80eb;
      color: #fff;
    }
  }
}
</style>
