<template>
  <div class="container" style="padding-top: 13vw">
    <van-sticky :offset-top="0">
      <TopNav navTitle="巡防力量" />
      <div class="search-boxSJY">
        <van-search v-model="xlllList.xm" placeholder="请输入搜索关键词" style="width: 100%" @update:model-value="getList(1)" />
      </div>
    </van-sticky>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
      :immediate-check="false">
      <div class="item-boxxfll" :class="item.fl === '01' ? 'bgColorm' : 'bgColorf'"
        v-for="(item, index) in xlllList.list" :key="index">
        <div class="image-box">
          <van-image fill="cover" :src="require('../../assets/images/tx.png')" />
        </div>
        <div class="xlll-info-box">
          <div :class="item.fl === '01' ? 'title-box1' : 'title-box2'">
            <div :class="item.fl === '01' ? 'line-y1' : 'line-y2'"></div>
            <span>{{ item.xm }}</span>&nbsp;&nbsp;&nbsp;
            <span>
              <dict-tag :options="D_BZ_XB" :value="item.xbdm" :tag="false" /> </span>&nbsp;&nbsp;&nbsp;
            <span>{{ item.fl === "01" ? "民警" : "辅警" }}</span>
          </div>
          <div>{{ item.sfzh }}</div>
          <div>所在部门: {{ item.ssbm }}</div>
          <div>警员编号: {{ item.jh }}</div>
          <div>联系电话: {{ item.lxdh }}</div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script setup>
import TopNav from "../../components/topNav.vue";
import { getXfllList } from "../../api/scyy.js";
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getDictList, setDict } from "../../utils/dict";
const { D_BZ_XB } = getDictList("D_BZ_XB");
const router = useRouter();
const xlllList = reactive({
  list: [],
  xm: "",
  total: 0,
});
onMounted(() => {
  getList(1);
});
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const total = ref(0);
function getList(val) {
  loading.value = true;
  getXfllList({
    pageCurrent: page.value,
    pageSize: 10,
    xm: xlllList.xm,
  })
    .then((res) => {
      total.value = res.total;
      if (val === 1) {
        xlllList.list = res.records;
      } else {
        res.records.forEach((ele) => {
          xlllList.list.push(ele);
        });
      }
      loading.value = false;
    })
    .catch((err) => {
      finished.value = true;
    });
}
function onLoad() {
  if (page.value * 10 < total.value) {
    page.value++;
    getList();
  } else {
    finished.value = true;
  }
}
// 添加民警
function goCreatePeoplePolice() {
  router.push("/createMJ");
}
// 添加辅警
function goCreateAssistantPolice() {
  router.push("/createFJ");
}
</script>

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

.item-boxxfll {
  line-height: 1.8em;
  margin: 2vw;
  padding: 2vw;
  box-sizing: border-box;
  @include font_color($font-color-theme);
  @include font_size($font_medium_s);
  display: flex;

  .image-box {
    flex: 1;
    margin: 2vw;
  }

  .xlll-info-box {
    flex: 3;
  }
}

.bgColorm {
  background-color: #f0f6ff;
}

.bgColorf {
  background-color: #f9eeff;
}

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