<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-06 13:42:45
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-10-07 14:16:36
 * @FilePath: /danger-manage-web/src/views/indexComponents/leftComponents/deviceYx.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="first-wrapper flex">
    <Title text="人员配比" />
    <div class="two">
      <Chars :options="options" />
      <div class="allNum flex">
        <div class="num">{{ peopleNum }}</div>
        <div class="text">人数</div>
      </div>
    </div>
  </div>
</template>


<script>
let arr = [
  {
    value: 1,
    name: "财务科",
  },
  {
    value: 1,
    name: "生产技术办公室",
  },
  {
    value: 1,
    name: "综合管理办公室",
  },
  {
    value: 1,
    name: "经营管理办公室",
  },
  {
    value: 1,
    name: "安全科",
  },
  {
    value: 1,
    name: "环保科",
  },
  {
    value: 0,
    name: "保卫科",
  },
];

import Title from "@/views/indexComponents/allComponents/Title";
import Chars from "@/components/allCharsCom/Chars";

import { getRypbData } from "@/api/indexChars/chars";
export default {
  name: "",
  components: {
    Title,
    Chars,
  },
  data() {
    return {
      options: {
        // tooltip: {
        //   trigger: 'item'
        // },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: "2%",
          top: 0,
          bottom: 0,
          textStyle: {
            color: "#ffffff",
            fontSize: 11,
          },
          icon: "diamond",
          formatter: (name) => {
            // 第一个空格
            let kg1 = "";
            if (name.length == this.maxNameLength) {
              for (let i = 0; i < 7; i++) {
                kg1 += " ";
              }
            } else {
              for (
                let i = 0;
                i < 3 * (this.maxNameLength - name.length) + 7;
                i++
              ) {
                kg1 += " ";
              }
            }
            let obj = arr.filter((item) => {
              return name == item.name;
            })[0];
            var total = arr.reduce((a, b) => {
              const value1 = b.value;
              return a + b.value;
            }, 0);
            //第二个空格
            const length = (obj.value + "").length;
            let kg2 = "";
            for (let i = 0; i < (this.maxValueLength - length) * 2 + 10; i++) {
              kg2 += " ";
            }

            return (
              name +
              kg1 +
              obj.value +
              kg2 +
              Math.floor((obj.value / total) * 100) / 100 +
              "%"
            );
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["65%", "75%"],
            center: ["20%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              emphasis: {
                formatter: "{b}\n{c}\n({d}%)",
                show: false,
                textStyle: {
                  fontSize: "16",
                  fontWeight: "bold",
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              borderWidth: 0,
              borderRadius: 20,
            },
            labelLine: {
              show: false,
            },
            data: arr,
          },
        ],
      },
      arr: [],
      peopleNum: 0,
      // 最长用户名
      maxNameLength: 0,
      // 最长数字
      maxValueLength: 0,
    };
  },
  created() {
    // getRypbData().then((res) => {
    //   console.log("res",res)
    // });
    this.getRypbData();
  },
  methods: {
    getRypbData() {
      getRypbData().then((res) => {
        const data = res.data;
        this.arr = data.map((item) => {
          return {
            value: item.num,
            name: this.trimSpecial(item.deptName),
          };
        });
        console.log(this.arr);
        this.peopleNum = data.reduce((pre, current) => {
          return pre + current.num;
        }, 0);
        // 最长用户名
        this.maxNameLength = Math.max.apply(
          null,
          this.arr.map((item) => item.name.length)
        );
        this.maxValueLength = Math.max.apply(
          null,
          this.arr.map((item) => (item.value + "").length)
        );
        this.charsChange(this.arr);
        console.log("res", res);
      });
    },
    charsChange(arr) {
      this.options = {
        // tooltip: {
        //   trigger: 'item'
        // },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: "2%",
          top: 0,
          bottom: 0,
          textStyle: {
            color: "#ffffff",
            fontSize: 11,
          },
          icon: "diamond",
          formatter: (name) => {
            // 第一个空格
            let kg1 = "";
            if (name.length == this.maxNameLength) {
              for (let i = 0; i < 7; i++) {
                kg1 += " ";
              }
            } else {
              for (
                let i = 0;
                i < 3 * (this.maxNameLength - name.length) + 7;
                i++
              ) {
                kg1 += " ";
              }
            }
            let obj = arr.filter((item) => {
              return name == item.name;
            })[0];
            var total = arr.reduce((a, b) => {
              const value1 = b.value;
              return a + b.value;
            }, 0);
            //第二个空格
            const length = (obj.value + "").length;
            let kg2 = "";
            for (let i = 0; i < (this.maxValueLength - length) * 2 + 10; i++) {
              kg2 += " ";
            }

            return (
              name +
              kg1 +
              obj.value +
              kg2 +
              Math.floor((obj.value / total) * 1000)/10 +
              "%"
            );
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["65%", "75%"],
            center: ["20%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              emphasis: {
                formatter: "{b}\n{c}\n({d}%)",
                show: false,
                textStyle: {
                  fontSize: "16",
                  fontWeight: "bold",
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              borderWidth: 0,
              borderRadius: 20,
            },
            labelLine: {
              show: false,
            },
            data: arr,
          },
        ],
      };
    },
    trimSpecial(string) {
      //替换字符串中的所有特殊字符（包含空格）
      if (string != "") {
        const pattern =
          /[`~!@#$^\-&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g;
        string = string.replace(pattern, "");
      }
      return string;
    },
  },
};
</script>

<style lang="scss" scoped>
.first-wrapper {
  width: 100%;
  height: 28.14%;
  // background: blue;
  flex-direction: column;
  > div {
    // width: 100%;
  }
  .two {
    flex: 1;
    position: relative;
    // background: wheat;
    .allNum {
      position: absolute;
      width: 40%;
      height: 100%;
      // background: rgba(255, 255, 1, 0.2);
      top: 0;
      flex-direction: column;
      justify-content: center;
      div {
        width: 100%;
        text-align: center;
        &.text {
          font-size: 20px;
          font-weight: 400;
          color: #cfcdcd;
        }
        &.num {
          font-size: 32px;
          color: #ffffff;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
