<template>
  <div class="xttj_box">
    <TopNav navTitle="系统统计" />
    <div class="item_box">
      <div class="strip_box">
        <span class="strip"></span>
        <span class="total_title">数据总揽</span>
      </div>
      <div class="total_box">
        <div class="total_item">
          <span class="numb all">{{ dataForm.total }}</span>
          <div>全部</div>
        </div>
        <div class="total_item">
          <span class="numb xtwt">{{ dataForm.xtwt }}</span>
          <div>系统问题</div>
        </div>
        <div class="total_item">
          <span class="numb gngj">{{ dataForm.gngj }}</span>
          <div>功能改进</div>
        </div>
        <div class="total_item">
          <span class="numb xxq">{{ dataForm.xxq }}</span>
          <div>新需求</div>
        </div>
      </div>
    </div>
    <div class="item_box">
      <div class="strip_box">
        <span class="strip"></span>
        <span class="total_title">数据统计</span>
      </div>
      <Count :datas="dataCount"></Count>
    </div>
    <div class="item_box">
      <div class="strip_box">
        <span class="strip"></span>
        <span class="total_title">部门数据分布</span>
      </div>
      <BarEcharts :datas="dataList"></BarEcharts>
    </div>
  </div>
</template>

<script setup>
import Count from "../../../components/echarts/pieChart.vue";
import BarEcharts from "../../../components/echarts/pileUpColumn.vue";
import TopNav from "../../../components/topNav.vue";
import { getYyzxApi } from "../../../api/yyzxApi.js";
import { ref, reactive, onMounted } from "vue";
import { Toast } from "vant";
const dataCount = ref([]);
const XTFK_LIST = ref([
  {
    zdmc: "智慧云览",
    zddm: "01",
  },
  {
    zdmc: "智慧云踪",
    zddm: "02",
  },
  {
    zdmc: "智慧云搜",
    zddm: "03",
  },
  {
    zdmc: "智慧云基",
    zddm: "04",
  },
  {
    zdmc: "智慧云侦",
    zddm: "05",
  },
  {
    zdmc: "智慧云法",
    zddm: "06",
  },
  {
    zdmc: "智慧云指",
    zddm: "07",
  },
  {
    zdmc: "智慧云眸",
    zddm: "08",
  },
  {
    zdmc: "智慧云控",
    zddm: "09",
  },
  {
    zdmc: "智慧云防",
    zddm: "10",
  },
  {
    zdmc: "智慧云管",
    zddm: "11",
  },
  {
    zdmc: "智慧云舆",
    zddm: "12",
  },
]);
const dataForm = ref({
  xtwt: 0,
  gngj: 0,
  xxq: 0,
  total: 0,
});
const organizationList = ref([]);
const dataList = ref({
  Xlist: [],
  xtwtList: [],
  gngjList: [],
  xxqList: [],
  // treeList: []
});

onMounted(() => {
  Toast.loading({
    message: "加载...",
    forbidClick: true,
    loadingType: "spinner",
    duration: 0,
  });
  Promise.all([getZzjg(), getDateCount(), getCount()])
    .then((res) => {
      Toast.clear();
    })
    .catch((err) => {
      Toast.clear();
    });
});
// 数据总揽
function getDateCount() {
  //1 系统问题 2 功能改进建议 3 新需求
  getYyzxApi("/mosty-rzzx/yjsj/tjfx/glfktj", {}).then((res) => {
    if (res && res.length > 0) {
      res.forEach((v) => {
        if (v.fklx == 1) {
          dataForm.value.xtwt = v.sl;
        }
        if (v.fklx == 2) {
          dataForm.value.gngj = v.sl;
        }
        if (v.fklx == 3) {
          dataForm.value.xxq = v.sl;
        }
        dataForm.value.total += v.sl;
      });
    }
  });
}
// 数据统计
function getCount() {
  getYyzxApi("/mosty-rzzx/yjsj/tjfx/gxtfktj", {}).then((res) => {
    if (res && res.length > 0) {
      let arr = [];
      XTFK_LIST.value.forEach((item) => {
        res.forEach((v) => {
          let obj = {};
          obj.name = v.ssbmdm;
          obj.value = v.sl;
          if (item.zddm == v.fkxt) {
            obj.name = item.zdmc;
            obj.value = v.sl;
            arr.push(obj);
          }
        });
      });
      dataCount.value = arr;
    }
  });
}
// 查询组织机构
function getZzjg() {
  getYyzxApi("/mosty-sjzx/xtzd/zzjg", {}).then((res) => {
    organizationList.value = res;
    getDepartment();
  });
}

function getDepartment() {
  getYyzxApi("/mosty-rzzx/yjsj/tjfx/xjfktj", {}).then((res) => {
    if (res && res.length > 0) {
      let data = res;
      let brr = unquire(data, "ssbmdm");
      let crr = [];
      brr.temp.forEach((item) => {
        let obj = {
          ssbmdm: "",
          fklx1: "1",
          sl1: 0,
          fklx2: "2",
          sl2: 0,
          fklx3: "3",
          sl3: 0,
        };
        item.forEach((v) => {
          obj.ssbmdm = v.ssbmdm;
          if (v.fklx == "1") {
            obj.sl1 = v.sl;
          }
          if (v.fklx == "2") {
            obj.sl2 = v.sl;
          }
          if (v.fklx == "3") {
            obj.sl3 = v.sl;
          }
        });
        crr.push(obj);
      });

      let xtwt = [];
      let gngjjy = [];
      let xqx = [];
      let name = [];
      crr.forEach((it) => {
        xtwt.push(it.sl1);
        gngjjy.push(it.sl2);
        xqx.push(it.sl3);
      });
      brr.nameList.forEach((t) => {
        organizationList.value.forEach((v) => {
          if (t == v.id) {
            name.push(v.org_short_name);
          }
        });
      });
      dataList.value.xtwtList = xtwt;
      dataList.value.gngjList = gngjjy;
      dataList.value.xxqList = xqx;
      dataList.value.Xlist = name;
    }
  });
}
// 处理数据
function unquire(arr, key) {
  let temp = []; //分组数组
  let nameList = []; //横坐标
  let obj = {};
  let newArr = arr.reduce((item, next) => {
    obj[next.ssbmdm] ? "" : (obj[next.ssbmdm] = true && item.push(next));
    return item;
  }, []); //去重
  for (let i = 0; i < newArr.length; i++) {
    nameList.push(newArr[i].ssbmdm); //组织结构
    let brr = [];
    for (let j = 0; j < arr.length; j++) {
      if (newArr[i][key] == arr[j][key]) {
        brr.push(arr[j]);
      }
    }
    temp.push(brr);
  }
  let data = {
    nameList: nameList,
    temp: temp,
  };
  return data;
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.xttj_box {
  padding-top: 13vw;
}
.item_box {
  margin: 3vw;
  border-radius: 5px;
  padding: 3vw;
  .strip_box {
    display: flex;
    align-items: center;

    .strip {
      display: inline-block;
      width: 4px;
      height: 14px;
      background-color: #1989fa;
      margin-right: 2vw;
    }

    .total_title {
      @include font_size($font_medium);
    }
  }

  .total_box {
    display: flex;
    justify-content: space-between;
    margin-top: 7vw;

    .total_item {
      width: 33.3%;
      text-align: center;
      @include font_size($font_medium_s);

      > div {
        margin-top: 2vw;
      }

      .numb {
        font-size: 8vw;
      }
    }
  }
}

.all {
  color: #34acfc;
}

.xtwt {
  color: #e58c1b;
}

.gngj {
  color: #d91d1b;
}

.xxq {
  color: #449f87;
}
</style>
