<template>
  <Module
    class="flex-grow"
    :info="bsMeta && bsMeta['emplCalc']"
    :loading="loading"
    :error="error"
  >
    <template #title>人员统计</template>
    <template #end>
      <div style="margin-right: 30px">
        总人数: {{ getTotal.manager + getTotal.nonManager }}
      </div>
    </template>
    <div
      class="absolute inset-0 flex employee-box"
      v-if="employeeData?.length > 0"
    >
      <div class="content">
        <Ect :options="ectOpts2" />
        <Ect :options="ectOpts3" />
      </div>
      <div class="content1">
        <div class="h50">
          <div class="title bg">
            <span>管理人员总数 </span>
            <div>
              <span class="fz18"> {{ getTotal.manager }}</span
              >人
            </div>
          </div>
          <div class="icon-absolute">
            <i class="el-icon-s-custom" style="color: #3dafff"></i>
            <div class="center" style="margin-left: 5px">
              <span class="fz18">{{
                (
                  (getTotal.manager /
                    (getTotal.nonManager + getTotal.manager)) *
                  100
                ).toFixed(0)
              }}</span
              >%
            </div>
          </div>
          <div
            v-for="(item, index) in getTotal.manageList"
            :key="index"
            class="w50 dspl"
          >
            <div class="flex flex-sb fz12 c9">
              <span>{{ item.label }}</span>
              <span style="color: #ffffff">{{ item.value }}</span>
            </div>
          </div>
        </div>
        <div class="h50">
          <div class="title bg1">
            <span>工勤人员总数</span>
            <div>
              <span class="fz18">{{ getTotal.nonManager }}</span> 人
            </div>
          </div>
          <div>
            <div class="icon-absolute">
              <i class="el-icon-user-solid" style="color: #00e3ff"></i>
              <div class="center" style="margin-left: 5px">
                <span class="fz18">{{
                  (
                    (getTotal.nonManager /
                      (getTotal.nonManager + getTotal.manager)) *
                    100
                  ).toFixed(0)
                }}</span
                >%
              </div>
            </div>
            <div
              v-for="(item, index) in employeeData"
              :key="index"
              v-show="index !== 0"
              class="w50 dspl"
            >
              <div class="flex flex-sb fz12 c9">
                <span>{{ item.prgName }}</span>
                <span style="color: #ffffff">{{ item.accval }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Empty v-else-if="!loading" />
  </Module>
</template>

<script lang="ts" setup>
import { computed, watch } from "vue";
import { useStore } from "vuex";
import { key } from "@/store";
import { state, employeeInfo } from "@/store/state";
import { useRequest } from "vue-request";
import { staffCountNew } from "@/api/businessOverview";
const store = useStore(key);
const bsMeta = computed(() => store.getters.bsMeta);

const selectLevel = computed(() => store.state.road?.selectLevel);
const selectRoadId = computed(() => store.state.road?.selectRoadId);
const params = computed(() => selectLevel.value + "&" + selectRoadId.value);

const { data, refresh } = useRequest<any>(() => {
  console.log(selectLevel);
  console.log(selectRoadId);
  return staffCountNew({
    level: selectLevel.value,
    dimension: selectRoadId.value[selectLevel.value - 1],
  });
});
watch(params, refresh);

const employeeData = computed(() => {
  const msg = data.value?.msgContent[0];
  const list: any[] = [];
  employeeInfo.forEach(({ label, ref, color }, index) => {
    var idx = label.lastIndexOf("(");
    var newlabel = label.substring(0, idx);
    let target;

    switch (index) {
      case 0:
        target = msg?.headerStaffCount;
        break;
      case 1:
        target = msg?.maintenanceInspectStaffCount;
        break;
      case 2:
        target = msg?.maintenanceClearStaffCount;
        break;
      case 3:
        target = msg?.serviceareaGuardStaffCount;
        break;
      case 4:
        target = msg?.serviceareaCleanStaffCounnt;
        break;
      case 5:
        target = msg?.electricStaffCount;
        break;
      case 6:
        target = msg?.tollStaffCount;
        break;
      case 7:
        target = msg?.otherStaffCount;
        break;
    }
    target &&
      list.push({
        prgName: newlabel,
        accval: target,
        accDate: target,
        color,
      });
  });

  return list;
});

const getTotal = computed(() => {
  const obj: any = {
    manager: 0,
    nonManager: 0,
    manageList: [],
  };
  const msg = data.value?.msgContent[0];

  for (const key in msg) {
    if (Object.prototype.hasOwnProperty.call(msg, key)) {
      // if (key !== 'headerStaffCount' && typeof msg[key] === 'number') {
      //   obj.nonManager += msg[key]
      // } else if (typeof msg[key] === 'number') {
      //   obj.manager += msg[key]
      // }
      obj.nonManager = msg["workerStaffCount"];
      obj.manager = msg["headerStaffCount"];
      obj.manageList = [
        {
          label: "中心管理人员",
          value: msg["centerManageStaff"],
        },
        {
          label: "收费管理人员",
          value: msg["tollManageStaff"],
        },
        {
          label: "机电管理人员",
          value: msg["electricManageStaff"],
        },
        {
          label: "养护管理人员",
          value: msg["maintenanceManageStaff"],
        },
        {
          label: "服务区管理人员",
          value: msg["serviceareaManageStaff"],
        },
      ];

      if (
        !selectRoadId.value.length ||
        (selectRoadId.value[0] === "CQ" && selectLevel.value === "1")
      ) {
        obj.manageList.unshift({
          label: "运营总部",
          value: msg["baseManageStaff"],
        });
      }
    }
  }

  console.log(2222, { obj });

  return obj;
});
const ectOpts2 = computed(() => {
  const value = (
    (getTotal.value?.manager /
      (getTotal.value?.nonManager + getTotal.value?.manager)) *
    100
  ).toFixed(0);
  var options = {
    series: [
      {
        type: "pie",
        startAngle: 270, // 环图起始位置：正下发
        radius: ["25%", "28%"], //内 外圆半径
        center: ["20%", "24%"],
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
          },
        },
        silent: true,
        cursor: "auto",
        data: [
          {
            name: "管理人数",
            value: value,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 1,
                  x2: 0.5,
                  y2: 0,
                  colorStops: [
                    // !! 在此添加渐变过程色 !!
                    { offset: 0, color: "#3DAFFF" },
                    { offset: 0.5, color: "#3DAFFF" },
                    { offset: 1, color: "#1C517B" },
                  ],
                },
              },
            },
          },
          {
            // Number.parseInt(value)
            name: "总数",
            value: 100,
            label: {
              normal: {
                show: false,
                fontSize: 0,
              },
            },
            itemStyle: {
              normal: {
                color: "#1C517B",
              },
              emphasis: {
                color: "#1C517B",
              },
            },
          },
        ],
      },
    ], // series end
  };
  return options;
});
const ectOpts3 = computed(() => {
  const val = (
    (getTotal.value?.nonManager /
      (getTotal.value?.nonManager + getTotal.value?.manager)) *
    100
  ).toFixed(0);
  var options = {
    series: [
      {
        type: "pie",
        startAngle: 90, // 环图起始位置：正下发
        radius: ["25%", "28%"], //内 外圆半径
        center: ["20%", "74%"],
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
          },
        },
        cursor: "auto",
        silent: true,
        data: [
          {
            name: "非管理人数",
            value: val,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 1,
                  x2: 0.5,
                  y2: 0,
                  colorStops: [
                    // !! 在此添加渐变过程色 !!
                    { offset: 0, color: "#00E3FF" },
                    { offset: 0.5, color: "#00E3FF" },
                    { offset: 1, color: "#066176" },
                  ],
                },
              },
            },
          },
          {
            name: "总数",
            value: 100,
            itemStyle: {
              normal: {
                color: "#066176",
              },
              emphasis: {
                color: "#066176",
              },
            },
          },
        ],
      },
    ], // series end
  };
  return options;
});
</script>

<style lang="postcss" scoped>
.employee-box {
  height: 100%;
}
.content {
  width: 30%;
  height: 100%;
}
.content1 {
  height: 100%;
  width: 80%;
  display: flex;
  flex-direction: column;
}
.h50 {
  margin-top: 20px;
  height: 50%;
}
.title {
  width: 240px;
  height: 24px;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 10px;
}
.bg {
  background: url("../../assets/images/manager_bg.png");
}
.bg1 {
  background: url("../../assets/images/non-manager_bg.png");
}
.flex {
  display: flex;
  padding: 0 17px;
}
.icon {
  font-size: 80px;
  color: rgba(255, 255, 255, 0.3);
}
.fz12 {
  font-size: 12px;
}
.c9 {
  color: #909fac;
}
.w50 {
  width: 50%;
}
.dspl {
  display: inline-block;
}
.fz18 {
  font-size: 18px;
}
.icon-absolute {
  position: absolute;
  left: 1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
}
.center {
  text-align: center;
}
.flex-sb {
  justify-content: space-between;
}
</style>
