<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="infoValue"
          :isSx="true"
          @update:sx="showPopup = !showPopup"
          @update:modelValue="onSearch"
        ></Search>
      </div>
    </van-sticky>
    <SxPopup
      :showPopup="showPopup"
      :list="pccl.sxList"
      :p_top="145"
      @update:close="showPopup = false"
      @update:onConfirm="onConfirm"
    />
    <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 pccl.list"
          :key="index"
          :item="item"
          :dict="{ D_BZ_HPZL }"
        />
        <van-empty
          description="暂无信息"
          image="default"
          v-if="pccl.list.length <= 0 && showEmpty"
        />
      </van-list>
      <van-loading style="text-align: center" v-if="loading"
        >加载中...</van-loading
      >
    </van-pull-refresh>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
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/pcclList.vue";
import { setTimeQuantum } from "../../../utils/tools.js";
import { getClpcPcList, getClpcCount } from "../../../api/common.js";
import { getDictList, setDict } from "../../../utils/dict";
const { D_BZ_YJLX, D_BZ_TYJB, D_BZ_PCCLJG, D_BZ_HPZL } = getDictList(
  "D_BZ_YJLX",
  "D_BZ_TYJB",
  "D_BZ_PCCLJG",
  "D_BZ_HPZL"
); //字典信息
const showEmpty = ref(false);
const loading = ref(false);
const loadingPull = ref(false);
const finished = ref(false);
const infoValue = ref("");
const showPopup = ref(false); //筛选弹窗
const pccljg = ref("");
const tabsIndex = ref(1);
const pccl = reactive({
  page: 1,
  kssj: "",
  jssj: "",
  total: 0,
  sxList: [{}, setTimeQuantum()], //筛选条件数据
  list: [],
});
const tabs = ref([
  {
    name: "全部",
    count: 0,
  },
  {
    name: "放行",
    count: 0,
  },
  {
    name: "移交",
    count: 0,
  },
  {
    name: "盘查",
    count: 0,
  },
]);
onMounted(() => {
  // getCount("1");
  // getCount("2");
  // getCount("9");
  getCount();
  getData();
});

// 切换tabs
function onSelect(val) {
  pccl.page = 1;
  switch (val) {
    case 0:
      pccljg.value = "";
      break;
    case 1:
      pccljg.value = "1";
      break;
    case 2:
      pccljg.value = "2";
      break;
    case 3:
      pccljg.value = "9";
      break;
  }
  getData();
}

// 时间筛选
function onConfirm(val) {
  pccl.list = [];
  pccl.page = 1;
  pccl.kssj = val.startTime;
  pccl.jssj = val.endTime;
  getData();
  getCount();
}

// 滚动加载
function onLoad() {
  if (pccl.page >= pccl.total) {
    finished.value = true;
    return;
  }
  pccl.page += 1;
  getData();
}

// 搜索
function onSearch(val) {
  pccl.list = [];
  pccl.page = 1;
  pccljg.value = "";
  pccl.jssj = "";
  pccl.kssj = "";
  infoValue.value = val;
  getData();
  getCount();
}

// 统计
function getCount(val) {
  let params = {
    // pcclJg: val,
    // pageCurrent: 1,
    // pageSize: 10,
    hphm: infoValue.value,
    kssj: pccl.kssj,
    jssj: pccl.jssj,
  };
  getClpcCount(params).then((res) => {
    tabs.value[1].count = res.fx;
    tabs.value[2].count = res.yj;
    tabs.value[3].count = res.pc;
    tabs.value[0].count = res.All;
    // switch (val) {
    //   case "1":
    //     tabs.value[1].count = res.total;
    //     break;
    //   case "2":
    //     tabs.value[2].count = res.total;
    //     break;
    //   case "9":
    //     tabs.value[3].count = res.total;
    //     break;
    //   case "":
    //     tabs.value[0].count = res.total;
    //     break;
    // }
  });
}
//下拉刷新
function onRefresh() {
  pccl.list = [];
  pccl.page = 1;
  // pccljg.value = "";
  pccl.jssj = "";
  pccl.kssj = "";
  infoValue.value = "";
  tabsIndex.value++;
  // getCount("1");
  // getCount("2");
  // getCount("9");
  // getCount("");
  getData();
}
// 获取列表
function getData(val) {
  loading.value = true;
  let params = {
    pcclJg: pccljg.value,
    kssj: pccl.kssj,
    jssj: pccl.jssj,
    pageCurrent: pccl.page,
    pageSize: 10,
    hphm: infoValue.value,
  };
  // loading.value = true
  getClpcPcList(params)
    .then((res) => {
      loading.value = false;
      loadingPull.value = false;
      let arr = res.records ? res.records : [];
      if (!res.records || res.records.length <= 0) showEmpty.value = true;
      if (pccl.page == 1) {
        pccl.list = arr;
      } else {
        pccl.list = pccl.list.concat(arr);
      }
      switch (val) {
        case "1":
          tabs.value[1].count = res.total;
          break;
        case "2":
          tabs.value[2].count = res.total;
          break;
        case "9":
          tabs.value[3].count = res.total;
          break;
        case "":
          tabs.value[0].count = res.total;
          break;
      }
      pccl.total = res.total;
    })
    .catch(() => {
      loading.value = false;
      showEmpty.value = true;
    });
}
</script>

<style lang="scss" scoped>
.van-list {
  height: calc(100vh - 38vw);
  overflow: hidden;
  overflow-y: auto;
}
</style>