<template>
  <div>
    <!--    图片预览-->
    <el-dialog
      v-model="show" title="会员证" :close-on-click-modal="true" draggable width="900"
      @close="close"
    >
      <div style="display: flex; justify-content: center;" @contextmenu.prevent="youji">
        <el-image style="width: 600px; height: 380px;position: relative" :src="urlHref" :fit="fit" />
        <img :src="fillImgUrl(photo)" alt="" class="img">
        <div class="memberNumber">{{ form.perCode }}</div>
        <div class="birthday">{{ fileData(form.birth) }}</div>
        <div class="phone">010-87188971</div>
        <div class="service">https://www.taekwondo.org.cn/</div>
        <div class="validity">{{ fileData(form.beginTime) +'-'+fileData(form.validityDate) }}</div>
        <div class="nameC">
          <div ref="content" class="content">{{ form.name }} </div>
        </div>
      </div>
      <template #footer>
        <div style="text-align: center;">
          <a :href="fillImgUrl(down)" target="_blank" download="" style="margin-right: 10px"><el-button type="primary" :disabled="!down">下载会员证</el-button></a>
          <el-button @click="close">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { getCurrentInstance, nextTick, ref } from 'vue'
import { downStuCertSingle, getInfo } from '@/api/person/info.js'
import url from '@/assets/member/memberCard.png'
import uUrl from '@/assets/member/memberCardU.png'
import { fillImgUrl } from '/@/utils/ruoyi'
const down = ref(null)
const show = ref(false)
const urlHref = ref()
const photo = ref()
const form = ref({})
const perId = ref()
const { proxy } = getCurrentInstance()

async function open(row) {
  urlHref.value = row.certStage == 4 ? uUrl : url
  perId.value = row.perId
  const res = await getInfo(row.perId)
  photo.value = res.data.photo2
  form.value = res.data
  show.value = true
  await download()
  await setFontSize()
}

async function download() {
  const res = await downStuCertSingle(perId.value)
  down.value = res.data
}

function fileData(time) {
  if (!time) return 
  const data = new Date(time.replace(/-/g, '/'))
  const year = data.getFullYear()
  const month = data.getMonth() + 1
  const dates = data.getDate()
  return year + '年' + month + '月' + dates + '日'
}

function close() {
  show.value = false
  down.value = null
  form.value = {}
  const dom = proxy.$refs['content']
  dom.style.fontSize = '34px'
  dom.style.width = '120px'
  dom.style.transform = `scale(1)`
}

function youji() {}

function setFontSize() {
  nextTick(() => {
    const dom = proxy.$refs['content']
    dom.style.fontSize = '34px'
    dom.style.width = '120px'
    dom.style.transform = `scale(1)`
    const { paddingRight } = getComputedStyle(dom)
    const padding = parseFloat(paddingRight)
    if (dom.scrollWidth > dom.offsetWidth) {
      // dom.style.fontSize = `${(dom.offsetWidth - padding * 2) / dom.scrollWidth * 21}px`
      const size = (dom.offsetWidth - padding * 2) / dom.scrollWidth * 38
      dom.style.transform = `scale(${size / 38})`
      dom.style.width = '100%'
    } else {
      dom.style.fontSize = '34px'
    }
  })
}
defineExpose({
  open

})
</script>

<style lang="scss" scoped>

.img{
  width: 114px;
  height: 114px;
  border-radius: 50%;
  position: absolute;
  left: 214px;
  top: 215px;
}
.birthday{
  position: absolute;
  top:241px;
  left: 584px;
  font-size: 16px;
  color: #9f6a44;
}
.memberNumber{
  position: absolute;
  top:267px;
  left: 438px;
  font-size: 19px;
  color: #9f6a44;
  font-weight: 600;
  letter-spacing: 1px;
}
.phone{
  position: absolute;
  top: 377px;
  left: 488px;
  font-size: 16px;
  color: #bc9060;
}
.service{
  position: absolute;
  top: 399px;
  left: 488px;
  font-size: 16px;
  color: #bc9060;

}
.validity{
  position: absolute;
  top: 419px;
  left: 488px;
  font-size: 16px;
  color: #bc9060;

}
.nameC{
  position: absolute;
  top: 230px;
  left: 389px;
  //font-size: 30px;
  color: #9f6a44;
  font-weight: 600;
  //letter-spacing: 5px;
  //width: 85px;
  //height: 30px;
  line-height: 30px;
  padding-top: 3px;
}
.content{
  width: 120px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  //white-space: nowrap;
  height: 35px;
  overflow: hidden;
  overflow-x: auto;
  transform-origin: 0 55%;
  white-space: nowrap;
}

</style>