<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" />
    <van-pull-refresh v-model="loadingPull" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text=" " @load="onLoad" offset="1"
        :immediate-check="false">
        <List v-for="(item, index) in yjxx.list" :key="index" :item="item"
          :dict="{ D_BZ_YJLX, D_BZ_TYJB, D_BZ_PCCLJG }" />
        <van-empty description="暂无信息" image="default" v-if="yjxx.list.length <= 0 && showEmpty" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { getYjxxTj, getPageList } from "../../../api/yjxx.js";
import { getRypcList, getRypcCount } from "../../../api/common.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/PcList.vue";
import { setTimeQuantum } from "../../../utils/tools.js";
import { getDictList, setDict } from "../../../utils/dict";
import { ref, reactive, onMounted, watch } from "vue";
const showEmpty = ref(false);
const { D_BZ_YJLX, D_BZ_TYJB, D_BZ_PCCLJG } = getDictList(
  "D_BZ_YJLX",
  "D_BZ_TYJB",
  "D_BZ_PCCLJG"
); //字典信息
watch(D_BZ_PCCLJG, (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();
});
const tabsIndex = ref(1);
const total = ref(0);
const tabs = ref([
  {
    name: "全部",
    count: 0,
    pclx: "",
  },
  {
    name: "盘查",
    count: 0,
    pclx: "9",
  },
  {
    name: "移交",
    count: 0,
    pclx: "2",
  },
  {
    name: "放行",
    count: 0,
    pclx: "1",
  },
]);
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 loadingPull = ref(false);
const showPopup = ref(false); //筛选弹窗

onMounted(() => {
  getList();
  tj();
  // tj(9);
  // tj(2);
  // tj(1);
});
//下拉刷新
function onRefresh() {
  yjxx.list = [];
  yjxx.pageNum = 1;
  kwd.value = "";
  yjxx.startTime = "";
  yjxx.endTime = "";
  yjxx.yjLx = "";
  tabsIndex.value++;
  getList();
  // tj();
  // tj(9);
  // tj(2);
  // tj(1);
}
// 获取警情信息
function getList() {
  loading.value = true;
  getRypcList({
    pageCurrent: yjxx.pageNum,
    pageSize: yjxx.pageSize,
    xm: kwd.value,
    kssj: yjxx.startTime,
    jssj: yjxx.endTime,
    pcclJg: yjxx.yjLx,
  })
    .then((res) => {
      loading.value = false;
      loadingPull.value = false;
      if (!res.records || res.records.length <= 0) showEmpty.value = true;
      if (yjxx.pageNum == 1) {
        yjxx.list = res.records;
      } else {
        res.records.forEach((item) => {
          yjxx.list.push(item);
        });
      }
      total.value = res.pages;
    })
    .catch((err) => {
      loading.value = false;
      showEmpty.value = true;
    });
}
function tj(val) {
  getRypcCount({
    // pageCurrent: yjxx.pageNum,
    // pageSize: yjxx.pageSize,
    xm: kwd.value,
    kssj: yjxx.startTime,
    jssj: yjxx.endTime,
    // pcclJg: val,
  }).then((res) => {
    tabs.value[1].count = res.pc;
    tabs.value[2].count = res.yj;
    tabs.value[3].count = res.fx;
    tabs.value[0].count = res.All;
    // if (val == 9) {
    //   tabs.value[1].count = res.total;
    // } else if (val == 2) {
    //   tabs.value[2].count = res.total;
    // } else if (val == 1) {
    //   tabs.value[3].count = res.total;
    // } else {
    //   tabs.value[0].count = res.total;
    // }
  });
}

/**
 * tab选择
 * @param {Object} val
 */
function onSelect(val) {
  yjxx.pageNum = 1;
  yjxx.yjLx = tabs.value[val].pclx;
  getList();
  // tj();
}
/**
 * 关键字搜索
 * @param {Object} val
 */
function onSearch(val) {
  yjxx.pageNum = 1;
  getList();
  tj();
}
// 弹框盒子
function onConfirm(val) {
  yjxx.startTime = val.startTime;
  yjxx.endTime = val.endTime;
  let arr = [];
  val.list[0].array.forEach((item) => {
    if (item.isCheck) {
      arr.push(item.value);
    }
  });
  yjxx.yjLx = arr.join(",");
  yjxx.pageNum = 1;
  getList();
  tj();
  showPopup.value = false;
}
function onLoad() {
  if (yjxx.pageNum >= total.value) {
    finished.value = true;
    return;
  }
  yjxx.pageNum += 1;
  getList();
}
</script>

<style scoped></style>
