/* eslint-disable vue/require-prop-type-constructor */ /* eslint-disable
vue/require-prop-type-constructor */
<template>
  <div>
    <div class="box_bg" id="htmlPdfcan" v-if="fromObj.thebidtype == '1'">
      <div class="pic_title">
        中国烟草机动车驾驶员上岗证
      </div>
      <div class="titleStyle1">证号：<span class="textStyle">{{ fromObj.idnumber }}</span></div>
      <div class="pic_cent">
        <div class="nameStyle">姓名：<span class="textStyle">{{ fromObj.drivername }}</span></div>
        <div class="nameStyle">性别：
          <span class="textStyle">{{ fromObj.sex == '1' ? '男' : '女' }}</span>
        </div>
        <div class="nameStyle">出生年月：<span class="textStyle">{{ fromObj.brithday }}</span></div>
      </div>
      <div class="pic_fix">
        <div class="pic_right">
          <div class="nameStyle">工作单位：<span class="textStyle">{{ fromObj.jobpart }}</span></div>
          <div class="nameStyle">发证单位：<span class="textStyle">{{ fromObj.tbdw }}</span></div>
          <div class="nameStyle">发证时间：<span class="textStyle">{{ fromObj.fristpoststime }}</span></div>
          <div class="nameStyle">
            审验时间：<span class="textStyle">{{ fromObj.verificationtime }}</span>
          </div>
          <div class="nameStyle">
            截止时间：<span class="textStyle">{{ fromObj.nextpoststime }}</span>
          </div>
        </div>
        <div class="pic_left">

          <img v-if="fromObj.img" :src="fromObj.img" alt="" style="height:100%;width:auto;">
          <img v-else :src="getImgUrl('indexImages/zwtp.jpg')" alt="" style="height:100%;width:auto;">
        </div>
      </div>
      <!-- 底部 -->
      <div class="foot">
        <div class="imgs">
          <img :src="getImgUrl('indexImages/yan.jpg')">
        </div>
        <div class="foot_font">中国烟草 CHINA TOBACCO
        </div>
      </div>
    </div>
    <div class="box_bg" id="htmlPdfcan" v-if="fromObj.thebidtype == '2'">
      <div class="pic_title">
        车辆业务外包驾驶员准驾证
      </div>
      <div class="titleStyle1">证号：<span class="textStyle">{{ fromObj.idnumber }}</span></div>
      <div class="pic_cent">
        <div class="nameStyle">姓名：<span class="textStyle">{{ fromObj.drivername }}</span></div>
        <div class="nameStyle">性别：
          <span class="textStyle">{{ fromObj.sex == '1' ? '男' : '女' }}</span>
        </div>
        <div class="nameStyle">出生年月：<span class="textStyle">{{ fromObj.brithday }}</span></div>
      </div>
      <div class="pic_fix">
        <div class="pic_right">
          <div class="nameStyle">车辆所属单位：<span class="textStyle">{{ fromObj.xtCityName }}</span></div>
          <div class="nameStyle">发证单位：<span class="textStyle">{{ fromObj.xtCityName }}</span></div>
          <div class="nameStyle">发证时间：<span class="textStyle">{{ fromObj.fristpoststime }}</span></div>
          <div class="nameStyle">
            审验时间：<span class="textStyle">{{ fromObj.verificationtime }}</span>
          </div>
          <div class="nameStyle">
            截止时间：<span class="textStyle">{{ fromObj.nextpoststime }}</span>
          </div>
        </div>
        <div class="pic_left">
          <img v-if="fromObj.img" :src="fromObj.img" alt="" style="height:100%;width:auto;">
          <img v-else :src="getImgUrl('indexImages/zwtp.jpg')" alt="" style="height:100%;width:auto;">
        </div>
      </div>
      <!-- 底部 -->
      <div class="foot" style="background: rgb(14, 95, 55);">
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import { getImgUrl } from "@/utils/tools.js"
const fromObj = ref({})
const props = defineProps({
  // 数据
  driveruserid: {
    type: String,
    default: {}//驾驶员信息
  },
});
onMounted(() => {
  getcardData(props.driveruserid)
})
function getcardData(id) {
  getApi({ id }, '/mosty-jcgl/driverposts/queryDriverpostsByUserid').then(res => {
    if (res) {
      fromObj.value = res
      if (fromObj.value.pic) {
        getimg(fromObj.value.pic)
      }
    }
  })
}

//获取驾驶员图片
function getimg(id) {
  getApi({}, `/mosty-base/minio/file/download/${id}`).then(
    (res) => {
      if (res) {
        fromObj.value.img = res.url;
      }
    }
  );
}
</script>

<style scoped lang="scss">
.box_bg {
  width: 470px;
  height: 327px;
  padding: 10px;
  font-family: '仿宋', monospace;
  font-weight: 600;
  box-shadow: 2px 2px 8px gray;
  overflow: hidden;
  border: 1px solid #d3c4c4;
  border-radius: 10px;
  text-align: left;
  box-sizing: border-box;
  background: url('~@/assets/images/bg.png') repeat center;
  background-size: 4% 4%;
  position: relative;
  margin: 20px auto;

  .pic_title {
    font-size: 18px;
    text-align: center;
    color: #000;
    font-family: '黑体';
    margin: 10px auto;
  }
}

.pic_cent {
  width: 100%;
  display: flex;
  justify-content: space-between;

}

.pic_fix {
  display: flex;
  justify-content: space-between;

  .pic_left {
    width: 110px;
    height: 130px;
    display: flex;
    align-content: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-left: 15px;
  }



  .pic_right {
    width: 73%;
    margin-right: 10px;
  }
}


.nameStyle {
  margin-top: 1px;
  color: gray;
  font-size: 16px;
  font-family: '仿宋';
}

.textStyle {
  color: rgb(0, 61, 141);
  font-size: 16px;
  font-family: '仿宋';
  border-bottom: 1px dashed rgb(0, 61, 141);
}

.titleStyle1 {
  font-size: 18px;
  text-align: center;
  color: gray;
  font-family: '仿宋';
}

.trainTitleStyle {
  font-size: 18px;
  margin: 10px 12px auto;
  font-size: 16px;
  font-family: '仿宋';
  color: rgb(0, 61, 141);
}

.foot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 620px;
  height: 50px;
  background: rgb(42, 82, 151);
  display: flex;

  .foot_font {
    font-size: 20px;
    color: white;
    font-style: italic;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.imgs {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgb(42, 82, 151);
  display: flex;
  align-items: center;
  justify-content: center;

  >img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-top: -80px;
  }
}
</style>
