<template>
  <div class="container" style="padding-top: 13vw">
    <TopNav :navTitle="'盘查人员信息'" />
    <van-form>
      <div class="title_tab other_type_title">人员信息</div>
      <div
        @click="routerPush(item)"
        class="info_box item_box"
        v-for="(item, i) in userInfo"
        :key="i"
      >
        <div class="item">
          <span class="name">姓名</span>：
          <span class="text">
            <span class="info">{{ item.xm ? item.xm : "未知" }}</span>
          </span>
        </div>

        <div class="item">
          <span class="name">权重</span>：
          <span class="text">
            <span class="info">{{ item.qz }}</span>
          </span>
        </div>

        <div class="item">
          <span class="name">身份证号</span>：
          <span class="text">
            <span class="info">{{ item.zjhm }}</span>
          </span>
        </div>
      </div>
    </van-form>
    <van-empty
      description="暂无数据"
      image="default"
      v-if="userInfo.length <= 0"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import TopNav from "../../../components/topNav";
import { useRoute, useRouter } from "vue-router";
import { hintToast } from "../../../utils/tools.js";
import { Toast ,showLoadingToast} from "vant";
import { editYyzxApi } from "../../../api/yyzxApi.js";
const router = useRouter();
const route = useRoute();
const userInfo = ref([]);
const TOASTT = ref()
onMounted(() => {
  if (route.query.dhhm) {
    _getUserInfo(route.query.dhhm);
  }
});
// 电话
function _getUserInfo(val) {
  TOASTT.value = Toast.loading({
    message: "加载...",
    forbidClick: true,
    loadingType: "spinner",
    duration: 0,
  });
  editYyzxApi(`/mosty-hczx/tbHcBpcry/getRyListBySjhm/${val}`, {})
    .then((res) => {
      TOASTT.value.clear();
      if (res.length > 0) userInfo.value = res;
    })
    .catch((err) => {
      TOASTT.value.clear();
    });
}
function routerPush(row) {
  router.push({
    path: "/quarantinePersonnel",
    query: { sfzh: row.zjhm, pcsrlx: "6", dhpc: route.query.dhhm },
  });
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.popupTitle {
  text-align: center;
  background-color: rgb(11, 137, 247);
  height: 6vh;
  line-height: 6vh;
}
.title_tab {
  margin: 2vw 0 2vw 6vw;
}

.info_box {
  margin: 2vw 4vw;
  padding: 2vw;
  box-sizing: border-box;
  @include font_color($font-color-theme);
  @include font_size($font_medium_s);
  .item {
    display: flex;
    justify-content: space-between;
    background-color: #e8eeff;
    margin-bottom: 2vw;
    padding: 2vw;
    box-sizing: border-box;
    .name {
      display: inline-block;
      width: 14vw;
      text-align-last: justify;
    }
    .text {
      display: inline-block;
      width: calc(100% - 15vw);
      .info {
        float: right;
      }
    }
  }
}
.rycard {
  display: flex;
  img {
    margin-right: 2.5vw;
  }
  .item_ry {
    line-height: 1.5em;
  }
}
</style>
