<template>
  <div class="work-badge" style="height: 100%">
    <div class="badge-top" style="height: 5%">
      <div class="badge-number">NO.{{ f_head_code }}</div>
    </div>
    <div class="badge-middle" style="height: 80%">
      <img class="badge-image" :src="f_head_pic" alt="Badge Image">
      <h1 class="name">{{ f_head_name }}</h1>
      <div class="white-line"></div>
      <span class="position">{{ f_head_post }}</span>
    </div>
    <div class="badge-bottom" style="height: 10%">
      <div class="contact">
        <img class="phone-icon" src="../../../assets/123.png" style="height: 30px;width: 30px" alt="Phone Icon">
        <span style="font-size: 30px;font-style: italic;">{{ f_head_phone }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import {HttpResetClass} from "vue-client";

export default {
  name: 'WorkBadge',
  title:'WorkBadge',
  data () {
    return {
      // 默认值或初始状态
      f_head_pic: '',
      f_head_code: '',
      f_head_name: '',
      f_head_post: '',
      f_head_phone: ''
    };
  },
  async ready () {
    console.log(window.location.href)
    let id = ''
    let url = window.location.href
    if (url.includes('id')){
      const urlObj = new URL(url);
      id = urlObj.searchParams.get('id');
      let QRCode = await new HttpResetClass().load('post',`rs/sql/tel_singleTable_OrderBy`,{data: {
          items: 'tqr.*,tf.f_downloadpath as url',
          tablename: 't_qr_code tqr left join t_files tf on tf.f_businessid = tqr.id and f_table_name = \'t_qr_code\'',
          condition: `f_head_code = '${id}'`,
          orderitem: '1'
        }},{resolveMsg: null,rejectMsg: null})
      if (QRCode && QRCode.data && QRCode.data.length > 0){
        if (QRCode.data[0].url){
          this.f_head_pic = QRCode.data[0].url
        }else {
          this.f_head_pic = `/rs/image/file/${QRCode.data[0].f_head_pic}`
        }
        this.f_head_code = QRCode.data[0].f_userhead_code
        this.f_head_name = QRCode.data[0].f_head_name
        this.f_head_post = QRCode.data[0].f_head_post
        this.f_head_phone = QRCode.data[0].f_head_phone
      }else {
        console.log('获取二维码信息失败')
        console.log(QRCode)
      }
    }
  }
};
</script>
<style scoped>
.white-line {
  width: 65%;
  height: 5px;
  background-color: white;
  margin: 10px 0 10px 17%;
}
.work-badge {
  display: flex;
  flex-direction: column;
  background-image: url('../../../assets/f8632d3c8c4c1cb68e99da754cab1a7.png');
  align-items: center;
  background-color: #007BFF;
  color: white;
  padding: 20px;
}

.badge-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 2%;
}

.badge-image {
  border: 3px solid #fcfcfc;
  width: 80%;
  border-radius: 15px;
}

.badge-number {
  font-size: 24px;
  float: left;
  text-align: left;
  font-weight: bold;
}

.badge-middle {
  text-align: center;
  margin-bottom: 2%;
}

.name {
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 10px;
}

.position {
  font-size: 24px;
}

.badge-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact {
  display: flex;
  align-items: center;
}

.phone-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
</style>
