<template>
  <div>
    <TopNav navTitle="预警信息" :showRight="false" :showLeft="true" />
    <van-sticky>
      <div class="sticky_box">
        <Tabs
          :list="tabs"
          @onYjjb="onSelect"
          :type="'car'"
          :key="tabsIndex"
        ></Tabs>
        <Search
          placeholder="请输入预警人员姓名"
          v-model="kwd"
          :isSx="true"
          @update:sx="showPopup = !showPopup"
          @update:modelValue="onSearch"
        ></Search>
      </div>
    </van-sticky>
    <SxPopup
      :showPopup="showPopup"
      :list="yjxx.sxList"
      :p_top="145"
      @update:close="showPopup = false"
      @update:onConfirm="onConfirm"
      :kssj="dateFormat()"
      :jssj="dateFormat()"
    />
    <van-pull-refresh v-model="loadingPull" @refresh="onRefresh">
      <van-list
        :finished="finished"
        finished-text=""
        @load="onLoad"
        offset="1"
        :immediate-check="false"
      >
        <List
          v-for="(item, index) in yjxx.list"
          :key="index"
          :item="item"
          :path="`/yyzx/yjxx/yjDetail?id=${item.id}`"
          :dict="{ D_BZ_YJLX, D_BZ_TYJB }"
        />
      </van-list>
    </van-pull-refresh>
    <van-loading style="text-align: center" v-if="loading"
      >加载中...</van-loading
    >
    <van-empty description="暂无预警信息" image="default" v-if="showEmpty" />
  </div>
</template>
<script>
export default {
  name: "yyzx/yjxx/index",
};
</script>
<script setup>
import { getYjxxTj, getPageList } from "../../../api/yjxx.js";
import TopNav from "../../../components/topNav.vue";
import Search from "../../../components/search.vue";
import Tabs from "../../../components/tabs.vue";
import SxPopup from "../../../components/SxPopup.vue";
import List from "../../../components/YjList.vue";
import { setTimeQuantum, dateFormat } from "../../../utils/tools.js";
import { getDictList, setDict } from "../../../utils/dict";
import { ref, reactive, onMounted, watch, onActivated } from "vue";
import { useRoute,onBeforeRouteLeave } from "vue-router";
import { Toast } from "vant";

const { D_BZ_YJLX, D_BZ_TYJB } = getDictList("D_BZ_YJLX", "D_BZ_TYJB"); //字典信息
watch(D_BZ_YJLX, (newValue) => {
  for (let i = 0; i < newValue.length; i++) {
    newValue[i].name = newValue[i].text;
    newValue[i].key = newValue[i].dm;
    newValue[i].isCheck = false;
  }
  yjxx.sxList = [
    {
      title: "预警类型",
      isCheckBox: true,
      array: newValue,
    },
  ];
  //时间段选项
  yjxx.sxList[1] = setTimeQuantum();
  yjxx.sxList[1].array[0].isCheck = true;
});
const tabs = ref([
  {
    name: "全部",
    count: 0,
    yjjb: "",
  },
  {
    name: "红色预警",
    count: 0,
    yjjb: "10",
  },
  {
    name: "橙色预警",
    count: 0,
    yjjb: "20",
  },
  {
    name: "黄色预警",
    count: 0,
    yjjb: "30",
  },
  {
    name: "蓝色预警",
    count: 0,
    yjjb: "40",
  },
]);
const yjxx = reactive({
  pageNum: 1,
  pageSize: 10,
  yjJb: "",
  yjLx: "",
  startTime: "",
  endTime: "",
  yjLx: "",
  sxList: [], //筛选条件数据
  list: [], //预警列表数据
});
const kwd = ref("");
const finished = ref(false);
const loading = ref(false);
const showPopup = ref(false); //筛选弹窗
const loadingPull = ref(false);
const showEmpty = ref(false);
const total = ref(0);
const tabsIndex = ref(1);
onMounted(() => {
  let yjlx = useRoute().query.yjLx;
  if (yjlx != yjxx.yjLx) {
    yjxx.yjLx = useRoute().query.yjLx;
    yjxx.pageNum = 1;
    yjxx.yjJb = "";
    kwd.value = "";
    yjxx.startTime = dateFormat();
    yjxx.endTime = dateFormat();
    yjxx.list = [];
    getList();
    getTabs();
  }
});
//下拉刷新
function onRefresh() {
  yjxx.pageNum = 1;
  yjxx.yjJb = "";
  kwd.value = "";
  yjxx.startTime = dateFormat();
  yjxx.endTime = dateFormat();
  yjxx.yjLx = "";
  yjxx.list = [];
  finished.value = false;
  loading.value = false;
  loadingPull.value = false;
  tabsIndex.value++;
  getList();
  getTabs();
}
// 预警信息统计
function getTabs() {
  getYjxxTj({ kssj: yjxx.startTime, jssj: yjxx.endTime }).then((res) => {
    tabs.value[0].count = 0;
    res.forEach((element) => {
      tabs.value[0].count += element.count;
      if (element.yj_jb == "40") {
        tabs.value[4].count = element.count;
      }
      if (element.yj_jb == "30") {
        tabs.value[3].count = element.count;
      }
      if (element.yj_jb == "20") {
        tabs.value[2].count = element.count;
      }
      if (element.yj_jb == "10") {
        tabs.value[1].count = element.count;
      }
    });
  });
}
// 获取预警信息
function getList() {
  loading.value = true;
  showEmpty.value = false;
  getPageList({
    pageNum: yjxx.pageNum,
    pageSize: yjxx.pageSize,
    yjJb: yjxx.yjJb,
    yjRyxm: kwd.value,
    startTime: yjxx.startTime,
    endTime: yjxx.endTime,
    yjLx: yjxx.yjLx,
  })
    .then((res) => {
      loading.value = false;
      loadingPull.value = false;
      if (res.records.length === 0) {
        showEmpty.value = true;
      } else {
        showEmpty.value = false;
      }
      if (yjxx.pageNum == 1) {
        yjxx.list = res.records;
      } else {
        res.records.forEach((item) => {
          yjxx.list.push(item);
        });
      }
      total.value = res.total;
    })
    .catch((err) => {
      loading.value = false;
      showEmpty.value = true;
      loadingPull.value = false;
    });
}
/**
 * tab选择
 * @param {Object} val
 */
function onSelect(val) {
  yjxx.list = [];
  loading.value = true;
  showEmpty.value = false;
  yjxx.pageNum = 1;
  yjxx.yjJb = tabs.value[val].yjjb;
  getList();
}
/**
 * 关键字搜索
 * @param {Object} val
 */
function onSearch(val) {
  yjxx.pageNum = 1;
  getList();
}
// 弹框盒子
function onConfirm(val) {
  yjxx.startTime = val.startTime;
  yjxx.endTime = val.endTime;
  yjxx.pageNum = 1;
  getList();
  showPopup.value = false;
}
function onLoad() {
  if (yjxx.list.length >= total.value) {
    finished.value = true;
    return;
  }
  yjxx.pageNum += 1;
  getList();
}
</script>

<style scoped>
</style>
