<template>
  <div style="padding-top: 15vw">
    <TopNav navTitle="预警统计" :showRight="false" :showLeft="true" />
    <TopSelectTime @chenge:time="onSelectTime" />
    <TopTotal :list="yjTotal.list" />
    <!-- 任务完成情况 -->
    <div class="item_box gsdyj_box">
      <div class="other_type_title">各时段预警</div>
      <LineChart :type="timeType" />
    </div>
    <div class="item_box gsdyj_box">
      <div class="other_type_title">感知源预警排名</div>
      <Ranking :type="timeNum" />
    </div>
    <div class="item_box gsdyj_box">
      <div class="other_type_title">人员预警排名</div>
      <PeopleRanking :type="timeNum" />
    </div>
    <div class="item_box gsdyj_box">
      <div class="other_type_title">派出所预警分析</div>
      <LineChartPcs :type="timeNum"/>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import TopNav from "../../../components/topNav.vue";
import TopSelectTime from "../../../components/topSelectTime.vue";
import TopTotal from "../../../components/topTotal";
import LineChart from "./components/lineChart.vue";
import LineChartPcs from "./components/lineChartPcs.vue";
import PeopleRanking from "./components/peopleRanking.vue";
import Ranking from "./components/ranking.vue";
import { getYjxxTjYjlx } from "../../../api/yjxx.js";
import { getRecentDay } from "../../../utils/tools";
const timeActive = ref(0);
const yjTotal = reactive({
  list: [
    {
      title: "预警总数",
      count: 0,
    },
    {
      title: "人员预警",
      count: 0,
    },
    {
      title: "车辆预警",
      count: 0,
    },
    {
      title: "事件预警",
      count: 0,
    },
    {
      title: "重点人员管控预警",
      count: 0,
    },
  ],
});
onMounted(() => {
  _getYjxxTjYjlx(0);
});
//时间查询
const timeType = ref(0);
const timeNum = ref(0);
function onSelectTime(val) {
  timeType.value = val;
  timeNum.value = val == 3 ? -90 : val == 1 ? -7 : val == 2 ? -30 : 0;
  _getYjxxTjYjlx(timeNum.value);
}
//获取预警类型统计
function _getYjxxTjYjlx(val) {
  yjTotal.list.forEach((el) => {
    el.count = 0;
  });
  getYjxxTjYjlx({
    kssj: getRecentDay(val, "ymd"),
    jssj: getRecentDay(0, "ymd"),
  }).then((res) => {
    res.forEach((item) => {
      yjTotal.list[0].count += item.count;
      switch (item.yj_lx) {
        case "1":
          yjTotal.list[1].count = item.count;
          break;
        case "2":
          yjTotal.list[2].count += item.count;
          break;
        case "3":
          yjTotal.list[2].count += item.count;
          break;
        case "4":
          yjTotal.list[2].count += item.count;
          break;
        case "5":
          yjTotal.list[3].count = item.count;
          break;
        case "6":
          yjTotal.list[4].count = item.count;
          break;
      }
    });
  });
}
</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>
