<template>
  <div class="container" style="padding-top:13vw">
    <TopNav navTitle="车辆" />
    <div class="search-boxSJY">
      <van-search v-model="clList.cph" placeholder="请输入车牌号" style="width: 100%" @update:model-value="getList(1)" />
    </div>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="item-box jwz-line" v-for="(item, index) in clList.list" :key="index">
        <div class="ps-title">{{ item.cph }}</div>
        <div class="lineSJY">所属部门: {{ item.ssbm }}</div>
        <div class="lineSJY">
          车辆状态: {{ item.zbzt == "1" ? "正常" : "非正常" }}
        </div>
        <div class="lineSJY">
          <div class="first-one">车牌号: {{ item.cph }}</div>
          <div class="first-one">车辆年款: {{ item.clnk }}</div>
        </div>
        <div class="lineSJY">
          <div style="display: flex; width: 50%">
            号牌种类:{{ setDict(item.cllx, D_BZ_CLLX) }}
          </div>
          <div style="display: flex; width: 50%">
            车辆品牌：{{ item.clpp }}
          </div>
        </div>
        <div class="lineSJY">
          <div class="first-one">购置日期: {{ item.gmrq }}</div>
          <div class="first-one">报废日期: {{ item.bfrq }}</div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script setup>
import TopNav from "../../components/topNav.vue";
import { getClList } from "../../api/scyy.js";
import { ref, reactive, onMounted } from "vue";
import { getDictList, setDict } from "../../utils/dict";
import { useRouter } from "vue-router";
const router = useRouter();
function onClickLeft() {
  router.push("/home");
}
const { D_BZ_CLLX } = getDictList("D_BZ_CLLX");
const clList = reactive({
  list: [],
  cph: "",
});
onMounted(() => {
  getList();
});
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const total = ref(0);
function getList(val) {
  loading.value = false;
  if (val === 1) {
    page.value = 1
  }
  getClList({
    pageCurrent: page.value,
    pageSize: 10,
    cph: clList.cph,
  })
    .then((res) => {
      if (val === 1) {
        clList.list = res.records;
      } else {
        res.records.forEach((ele) => {
          clList.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";

.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);
}

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