<template>
  <div style="padding-top: 15vw">
    <TopNav navTitle="指令统计" :showRight="false" :showLeft="true" />
    <TopSelectTime @chenge:time="onSelectTime" />
    <TopTotal :list="zlTotal.list" />
    <!-- 任务完成情况 -->
    <div class="item_box gsdyj_box">
      <div class="other_type_title">完成率排名</div>
      <TaskRank :timeType="timeType" />
    </div>
    <div class="item_box gsdyj_box">
      <div class="other_type_title">指令趋势</div>
      <WeekTrendBar :timeType="timeType" />
    </div>
    <div class="item_box gsdyj_box">
      <div class="other_type_title">指令等级统计</div>
      <WeekTrendPie :timeType="timeType" />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import TopSelectTime from "../../../components/topSelectTime.vue";
import TopNav from "../../../components/topNav.vue";
import TopTotal from "../../../components/topTotal";
import TaskRank from "./components/taskRank";
import WeekTrendBar from "./components/weekTrendBar";
import WeekTrendPie from "./components/weekTrendPie";
import { getTjOfZllx } from "../../../api/zlzx.js";
import { Toast } from "vant";
const timeType = ref("1"); // 统计条件
const zlTotal = reactive({
  list: [
    {
      title: "全部",
      count: 0,
      zllx: "",
    },
    {
      title: "巡逻指令",
      count: 0,
      zllx: "01",
    },
    {
      title: "感知预警指令",
      count: 0,
      zllx: "02",
    },
    {
      title: "警情处置指令",
      count: 0,
      zllx: "05",
    },
    {
      title: "人工指令",
      count: 0,
      zllx: "06",
    },
    {
      title: "人员管控指令",
      count: 0,
      zllx: "07",
    },
  ],
});
function onSelectTime(val) {
  const copyTime = timeType.value;
  timeType.value = val + 1 + "";
  if (timeType.value !== copyTime) {
    _getZlTotal();
  }
}
onMounted(() => {
  _getZlTotal();
});
//获取指令统计
function _getZlTotal() {
  Toast.loading({
    message: "加载中",
    forbidClick: true,
    loadingType: "spinner",
    duration: 0,
  });
  zlTotal.list = [
    {
      title: "全部",
      count: 0,
      zllx: "",
    },
    {
      title: "巡逻指令",
      count: 0,
      zllx: "01",
    },
    {
      title: "感知预警指令",
      count: 0,
      zllx: "02",
    },
    {
      title: "警情处置指令",
      count: 0,
      zllx: "05",
    },
    {
      title: "人工指令",
      count: 0,
      zllx: "06",
    },
    {
      title: "人员管控指令",
      count: 0,
      zllx: "07",
    },
  ];
  getTjOfZllx({ type: timeType.value }).then((res) => {
    res.forEach((item) => {
      zlTotal.list[0].count += item.count;
      if (["02", "03", "04"].includes(item.zllx)) {
        zlTotal.list[2].count += item.count;
      } else {
        zlTotal.list.forEach((el) => {
          if (item.zllx == el.zllx) {
            el.count = item.count;
          }
        });
      }
    });
    Toast.clear();
  });
}
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";

.gsdyj_box {
  margin: 2vw 3vw 5vw 3vw;
  padding: 2vw;
}

.other_type_title {
  margin-left: 2vw;
}

::v-deep .van-tabs__nav--card {
  margin: 0 3vw;
}
</style>
