<template>
  <div class="container" style="padding-top: 13vw">
    <TopNav navTitle="警务站" />
    <div class="search-box">
      <van-search v-model="jwzList.jwzMc" placeholder="请输入警务站名称" style="width: 100%" @update:model-value="getList(1)" />
    </div>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="listInfoBox">
        <List :labelData="jwzList.list">
          <template v-slot="{ item }">
            <div class="ps-title">{{ item.jwzMc }}</div>

            <div class="line">
              警务站类型：{{ setDict(item.jwzLx, D_BZ_JWZLX) }}
            </div>
            <div class="line"><van-icon name="location-o" /> 详细地址: {{ item.jwzDz }}</div>
            <div class="line"><van-icon name="underway-o" /> 建立日期: {{ item.xjSj }}</div>
            <div class="line">
              <van-icon name="user-o" /> 负责人:
              {{ item.fzrXm }}&nbsp;&nbsp;&nbsp;{{ item.ssbm }}
            </div>
            <div class="lineGap"></div>
          </template>
        </List>
      </div>
    </van-list>
  </div>
</template>

<script setup>
import List from "../../components/ListItem.vue";
import TopNav from "../../components/topNav.vue";
import { getJwzList } from "../../api/scyy.js";
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getDictList, setDict } from "../../utils/dict";
const router = useRouter();
function onClickLeft() {
  router.push("/home");
}
const { D_BZ_JWZLX } = getDictList("D_BZ_JWZLX");
const jwzList = reactive({
  list: [],
  jwzMc: "",
});
function goCreatePoliceStation() {
  router.push("/createPoliceStation");
}
onMounted(() => {
  getList();
});
// 查询警务站列表
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const total = ref(0);
function getList(val) {
  loading.value = false;
  getJwzList({
    pageNo: page.value,
    pageSize: 10,
    jwzMc: jwzList.jwzMc,
  })
    .then((res) => {
      if (val === 1) {
        jwzList.list = res.records;
      } else {
        res.records.forEach((ele) => {
          jwzList.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++;
    getList();
  }
}
</script>

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

.search-box {
  display: flex;
  align-items: center;
}

// 列表
.listInfoBox {
  @include font_size($font_medium_s);
  padding: 0 4vw;
  box-sizing: border-box;

  .ps-title {
    color: #1f6cec;
    font-weight: bold;
    line-height: 6vw;
    @include font_size($font_medium);
  }

  .line {
    line-height: 5vw;
  }

  .lineGap {
    height: 4px;
    border-bottom: 1px solid #e9e9e9;
  }

}
</style>
