<template>
  <div class="list_box" @click="onGoDetail">
    <div class="detail_box">
      <van-image width="80px" height="85px" :class="_getBase64(item)" :src="item.baseUrl" style="flex: 1"
        v-if="props.type === '01'">
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>

      <template v-if="props.type === '01'">
        <div class="detail_item">
          <div class="item user_info">
            <span>{{ item.xm }}</span>
            <span>{{ setDict(item.mzdm, props.dict) }}</span>
            <span>{{ item.zjhm }}</span>
          </div>
          <span class="red status_box" v-if="item.gldjdm == 1">A类</span>
          <span class="yellow status_box" v-else-if="item.rylb == 2">B类</span>
          <span class="orange status_box" v-else>C类</span>
          <div class="item">居住地址：{{ item.jzdDzxz }}</div>
          <div class="item">
            联系电话：{{ item.lxdh }}&emsp;&emsp;
            <!-- 同住人员：{{item.tzry + "人" }} -->
          </div>
          <!-- <div class="item">责任区：{{ item.jzdZrqdm }}</div> -->
        </div>
      </template>
      <template v-else>
        <div class="detail_item">
          <div class="item user_info">
            <span>{{ item.dwmc }}</span>
          </div>
          <span class="red status_box" v-if="item.gldj == '1'">A类</span>
          <span class="yellow status_box" v-else-if="item.gldj == '2'">B类</span>
          <span class="orange status_box" v-else>C类</span>
          <div class="item">地址：{{ item.zcdz }}</div>
          <div class="item">
            联系电话：{{ item.dwlxdh }}&emsp;&emsp;从业人员：{{
              item.cyrs + "人"
            }}
          </div>
          <div class="item">责任区：{{ item.sszrqmc }}</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import router from "../router/index.js";
import { setDict } from "../utils/dict";
import { defineProps, ref } from "vue";
import { getBase64 } from "../utils/tools.js";
const props = defineProps({
  item: Object, //列表内容
  path: String, //跳转详情的路由
  dict: {
    type: Array,
    default: []
  },
  type: String, //内容类型 01 实有人口 02实有单位
});
//获取base64地址
function _getBase64(item) {
  getBase64((res) => {
    item.baseUrl = res;
  }, `http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=${item.zjhm}`);
}
//跳转
function onGoDetail() {
  router.push({
    path: props.path,
    query: props.item,
  });
}
</script>
<style lang="scss" scoped>
@import "../assets/styles/mixin.scss";

.list_box {
  @include font_size($font_medium_s);
  @include font_color($font-color-theme);
  margin: 0vw 2vw 2vw 2vw;
  padding: 2vw 1vw;
  @include item_bottom_color($bottom-border-top-clore-theme);

  .time_box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .count_size {
      font-size: 5vw;
      display: inline-block;
      margin: 0 1vw;
      color: red;
    }
  }
}

// .list_box:nth-child(1) {
// 	border: none!important;
// }

.detail_box {
  margin-top: 1vw;
  display: flex;
  position: relative;

  .detail_item {
    flex: 3.5;
    margin-left: 2vw;

    .user_info {
      @include font_size($font_medium);
      font-weight: 600;
      color: #507ce9;
      padding-right: 60px;

      &>span {
        display: inline-block;
        margin-right: 2vw;
      }
    }

    .item {
      line-height: 6vw;
    }

    .status_box {
      display: inline-block;
      color: #fff;
      font-size: 10px;
      border-radius: 20px;
      padding: 0px 15px;
      position: absolute;
      top: 1vw;
      right: 2vw;
    }

    .red {
      background-color: red;
    }

    .yellow {
      background-color: #ffcc40;
    }

    .orange {
      background-color: orange;
    }
  }

  .zwzl_box {
    position: absolute;
    right: -1vw;
    width: 18vw;
    top: 6vw;
  }
}
</style>
