<template>
  <div class="container" style="padding-top:13vw">
    <TopNav navTitle="巡防区" />
    <van-search v-model="xfqList.xfqMc" placeholder="请输入巡防区名称" @update:model-value="getList(1)" />
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="item-box" v-for="(item, index) in xfqList.list" :key="index">
        <div class="titleSJY">{{ item.xfqMc }}</div>
        <div>建立时间: {{ item.xtCjsj }}</div>
        <div><van-icon name="user-o" /> 负责人: {{ item.xfqFzr }}</div>
        <div>负责人身份证号：{{ item.xfqFzrSfz }}</div>
        <div>所属部门：{{ item.ssbm }}</div>
        <div class="line">巡防区等级:{{ setDict(item.xfqDj, D_BZ_XFQDJ) }}</div>
        <div class="line">巡防区类型:{{ setDict(item.xfqLx, D_BZ_XQLX) }}</div>
      </div>
    </van-list>
  </div>
</template>

<script setup>
import TopNav from "../../components/topNav.vue";
import { getXfqList } from "../../api/scyy.js";
import { ref, reactive, onMounted } from "vue";
import { getDictList, setDict } from "../../utils/dict";
import { useRouter } from "vue-router";
const router = useRouter();
const { D_BZ_XFQDJ, D_BZ_XQLX } = getDictList("D_BZ_XFQDJ", "D_BZ_XQLX");
const xfqList = reactive({
  list: [],
  xfqMc: "",
});
onMounted(() => {
  getList();
});
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const total = ref(0);
function getList(val) {
  loading.value = false;
  getXfqList({
    pageCurrent: page.value,
    pageSize: 10,
    xfqMc: xfqList.xfqMc,
  })
    .then((res) => {
      if (val === 1) {
        xfqList.list = res.records;
      } else {
        res.records.forEach((ele) => {
          xfqList.list.push(ele);
        });
      }
      total.value = res.total;
      onLoad();
      finished.value = true;
    })
    .catch((err) => {
      finished.value = true;
    });
}
function onLoad() {
  if (page.value * 10 < total.value) {
    page.value++;
    getXfqList();
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/mixin.scss";

.item-box {
  line-height: 1.8em;
  margin: 0 5vw;
  border-bottom: 1px solid #f3f3f3;
  @include font_color($font-color-theme);
  @include font_size($font_medium_s);
}

.titleSJY {
  color: #1F6CEC;
  font-weight: bold;
  @include font_size($font_medium);
}
</style>
