<template>
  <div class="container" style="padding-top: 13vw">
    <TopNav navTitle="快反点" />
    <van-search v-model="kfdList.kfdMc" placeholder="请输入快反点名称" @update:model-value="serachData" />
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="item-box" v-for="(item, index) in kfdList.list" :key="index">
        <div class="titleSJY">{{ item.kfdMc }}</div>
        <!-- <div><van-icon name="underway-o" /> 建立日期: {{ item.xtCjsj }}</div> -->
        <div><van-icon name="user-o" /> 市所属部门: {{ item.ssbm }}</div>
        <div><van-icon name="location-o" /> 地址: {{ item.kfdDz }}</div>
      </div>
    </van-list>
  </div>
</template>

<script setup>
import TopNav from "../../components/topNav.vue";
import { getKfdList } from "../../api/scyy.js";
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const kfdList = reactive({
  list: [],
  kfdMc: "",
});
onMounted(() => {
  serachData();
});
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const total = ref(0);
function serachData() {
  page.value = 1
  getList()
}
function getList() {
  loading.value = false;
  let params = {
    pageNum: page.value,
    pageSize: 10,
    kfdMc: kfdList.kfdMc,
  };
  getKfdList(params)
    .then((res) => {
      if (page.value === 1) {
        kfdList.list = res.records;
      } else {
        kfdList.list = kfdList.list.concat(res.records);
      }
      total.value = res.total;
      onLoad();
      finished.value = true;
    })
    .catch((err) => {
      finished.value = true;
    });
}
function onLoad() {
  if (page.value * 10 < total.value) {
    page.value++;
    getList();
  }
}
</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>
