<template>
  <div class="container" style="padding-top:13vw">
    <TopNav navTitle="装备" />
    <van-tabs v-model:active="active" background="#fff" color="#1989fa">
      <van-tab title="智能装备管理">
        <div class="search-boxSJY">
          <van-search v-model="zbList.sbmc" placeholder="请输入智能装备名称" style="width: 100%"
            @update:model-value="getList(1)" />
        </div>
        <van-list v-model:loading="loading1" :finished="finished1" finished-text="没有更多了" @load="onLoad1">
          <div class="item-box" v-for="(item, index) in zbList.list" :key="index">
            <div class="titleSJY">{{ item.sbmc }}</div>
            <div class="lineSJY">所属部门: {{ item.ssbm }}</div>
            <div class="lineSJY">
              <div class="first-one">装备型号: {{ item.xh }}</div>
              <div style="display: flex">
                装备类型:&nbsp;<dict-tag :options="D_BZ_ZNZBFL" :value="item.scode" :tag="false" />
              </div>
            </div>
            <div class="lineSJY">
              <div>生产厂商: {{ item.sccs }}</div>
            </div>
            <div class="lineSJY">
              <div class="first-one">采购日期: {{ item.cgrq }}</div>
              <div>到期时间: {{ item.dqsj }}</div>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="警用器械管理">
        <div class="search-boxSJY">
          <van-search v-model="zbList.qxMc" placeholder="请输入警用器械名称" style="width: 100%"
            @update:model-value="getJyqxList(1)" />
        </div>
        <van-list v-model:loading="loading2" :finished="finished2" finished-text="没有更多了" @load="onLoad2">
          <div class="item-box" v-for="(item, index) in zbList.jyqxList" :key="index">
            <div class="titleSJY">
              <div class="line-y"></div>
              &nbsp;&nbsp;{{ item.qxMc }}
            </div>
            <div class="lineSJY">
              <div class="first-one">器械编码: {{ item.qxbh }}</div>
              <div>器械名称: {{ item.qxMc }}</div>
            </div>
            <div class="lineSJY">
              <div class="first-one">
                器械类型:&nbsp;<dict-tag :options="D_BZ_JYQXFL" :value="item.scode" :tag="false" />
              </div>
              <div>生产厂商: {{ item.sccs }}</div>
            </div>
            <div class="lineSJY">
              <div class="first-one">采购日期: {{ item.cgrq }}</div>
              <div>到期时间: {{ item.dqsj }}</div>
            </div>
            <div class="lineSJY">
              <div class="first-one">所属部门: {{ item.ssbm }}</div>
              <div>录入批次: {{ item.qxPch }}</div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { getZnzb, selectJyqx } from "../../api/scyy.js";
import TopNav from "../../components/topNav.vue";
import { ref, reactive, onMounted, watch } from "vue";
import { getDictList, setDict } from "../../utils/dict";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const { D_BZ_ZNZBFL, D_BZ_JYQXFL } = getDictList("D_BZ_ZNZBFL", "D_BZ_JYQXFL");
function goCreateEquipment(val) {
  router.push({ name: "CreateEquipment", params: { sign: val } });
}
const active = ref(0);
watch(active, (newVal, oldVal) => {
  if (newVal === 0) {
    zbList.list = [];
    getList();
  } else {
    zbList.jyqxList = [];
    getJyqxList();
  }
});
watch(route.params.flag, (val) => {
  active.value = val;
});
const zbList = reactive({
  list: [],
  sbmc: "",
  jyqxList: [],
  qxMc: "",
});
onMounted(() => {
  getList();
});
// 获取智能装备
const loading1 = ref(false);
const finished1 = ref(false);
const page1 = ref(1);
const total1 = ref(0);
function getList(val) {
  loading1.value = false;
  getZnzb({
    pageNo: page1.value,
    pageSize: 10,
    sbmc: zbList.sbmc,
  })
    .then((res) => {
      if (val === 1) {
        zbList.list = res.records;
      } else {
        res.records.forEach((ele) => {
          zbList.list.push(ele);
        });
      }
      total1.value = res.total;
      onLoad();
      finished1.value = true;
    })
    .catch((err) => {
      finished1.value = true;
    });
}
function onLoad1() {
  if (page1.value * 10 < total1.value) {
    page1.value++;
    getList();
  }
}

// 查询警用器械
const loading2 = ref(false);
const finished2 = ref(false);
const page2 = ref(1);
const total2 = ref(0);
function getJyqxList(val) {
  loading2.value = false;
  selectJyqx({
    pageNo: page2.value,
    pageSize: 10,
    qxMc: zbList.qxMc,
  })
    .then((res) => {
      if (val === 1) {
        zbList.jyqxList = res.records;
      } else {
        res.records.forEach((ele) => {
          zbList.jyqxList.push(ele);
        });
      }
      total2.value = res.total;
      finished2.value = true;
    })
    .catch((err) => {
      finished2.value = true;
    });
}
function onLoad2() {
  if (page2.value * 10 < total2.value) {
    page2.value++;
    getJyqxList();
  }
}
</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);
  line-height: 6vw;
}
</style>
