<template>
  <el-row>
    <el-col :lg="18" :sm="24">
      <div class="wPanel">
        <img class="forWei poimg" src="@/assets/h5/cx@2x.png">

        <h2>个人会员查询</h2>
        <el-form ref="queryRef" :model="queryParams" :rules="rules" label-width="120">
          <el-form-item label="证件号码" prop="queryCode">
            <el-input
              v-model.trim="queryParams.queryCode"
              placeholder="请输入证件号码/个人会员编号"
              size="large"
              clearable
              prefix-icon="Postcard"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="图形验证码" prop="code">
            <captcha
              ref="codeRef" v-model="queryParams.code" v-model:uuid="queryParams.uuid" :auto-load="false"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button round type="default" plain @click="handleQuery">
              <el-icon class="el-icon--left">
                <Search />
              </el-icon>
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-divider class="forPc" />
      <div class="wPanel mt20">
        <img class="forWei poimg" src="@/assets/h5/jg@2x.png">

        <h2>个人会员查询结果</h2>

        <div v-if="showCard" class="memberCard">
          <div class="card">
            <img :src="fillImgUrl(photo)" alt="" class="img">
            <div class="memberNumber">{{ resultForm.code }}</div>
            <div class="birthday">{{ fileData(resultForm.birth) }}</div>
            <div class="phone">010-87188971</div>
            <div class="service">https://www.taekwondo.org.cn/</div>
            <div class="validity">{{ fileData(resultForm.startTime) +'-'+fileData(resultForm.endTime) }}</div>
            <div class="nameC">
              <div ref="content" class="content">{{ resultForm.name }} </div>
            </div>
          </div>
          <div style="text-align: center;margin-top: 10px">
            <a :href="fillImgUrl(down)" target="_blank" download="">
              <el-button type="primary" :disabled="!down">下载会员证</el-button>
            </a>
          </div>
        </div>
        <el-form label-width="100">
          <el-form-item label="会员名称">
            <el-input v-model="resultForm.name" readonly />
          </el-form-item>
          <el-form-item label="会员编号">
            <el-input v-model="resultForm.code" readonly />
          </el-form-item>
          <el-form-item label="性 别">
            <el-input v-model="resultForm.sex" readonly />
          </el-form-item>
          <el-form-item label="出生日期">
            <el-input v-model="resultForm.birth" readonly />
          </el-form-item>
          <el-form-item label="有效期开始">
            <el-input v-model="resultForm.startTime" readonly />
          </el-form-item>
          <el-form-item label="有效期结束">
            <el-input v-model="resultForm.endTime" readonly />
          </el-form-item>
        </el-form>
      </div>

    </el-col>
  </el-row>

  <div v-if="showCert" class="cert">
    <div class="bg_certificate bg_c1">
      <button type="button" class="close" @click="closeCert">
        <span aria-hidden="true">×</span>
      </button>
      <input readonly type="text" class="input_certificate c1_01" :value="resultForm.code">
      <input readonly type="text" class="input_certificate c1_02" :value="resultForm.name">
      <input readonly type="text" class="input_certificate c1_03" :value="resultForm.birth">
      <input readonly type="text" class="input_certificate c1_04" :value="resultForm.idcCode">
      <input readonly type="text" class="input_certificate c1_05" :value="resultForm.startTime">
      <input readonly type="text" class="input_certificate c1_06" :value="resultForm.endTime">
      <input readonly type="text" class="input_certificate c1_07" :value="resultForm.webStatus" style="color: black;">
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { nextTick, toRefs, ref } from 'vue'
import Captcha from '@/views/login/components/captcha'
import * as authentic from '@/apiPc/authentic'
import { fillImgUrl } from '/@/utils/ruoyi'
import { downStuCertSingle } from '@/api/person/info.js'
import { customMessageBox } from '@/utils/ruoyi'

const showCard = ref(false)
const down = ref()
const photo = ref()
const { proxy } = getCurrentInstance()
const data = reactive({
  queryParams: {
    type: '2',
    queryCode: undefined,
    code: undefined,
    uuid: undefined
  },
  rules: {
    queryCode: [{ required: true, trigger: 'blur', message: '请输入证件号/个人会员编号' }],
    code: [{ required: true, trigger: 'blur', message: '请输入图形验证码' }]
  },
  resultForm: {},
  showCert: false
})
const { queryParams, rules, resultForm, showCert } = toRefs(data)

function handleQuery() {
  proxy.$refs['queryRef'].validate((valid) => {
    if (valid) {
      resultForm.value = {}
      showCard.value = false
      showCert.value = false
      authentic.accurateQuery(queryParams.value).then(res => {
        if (res.data) {
          resultForm.value = res.data
          showCert.value = true
          if (res.data.perId) {
            photo.value = res.data.photo
            showCard.value = true
            getDown(res.data.perId)
            setFontSize()
          }
        } else {
          customMessageBox('没有查询到相应的数据')
        }
      }).finally(getCode)
    }
  })
}

function getCode() {
  proxy.$refs['codeRef'].getCode()
}
function closeCert() {
  showCert.value = false
}
function init() {
  getCode()
}


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 setFontSize() {
  // const dom = proxy.$refs['content']
  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'
    }
  })
}

async function getDown(perId) {
  const res = await downStuCertSingle(perId)
  down.value = res.data
}
defineExpose({
  init
})
</script>

<style scoped lang="scss">

h2 {
  color: var(--el-color-primary);
  font-size: 18px;
  text-align: center;
  margin: 0 0 30px;
}

:deep(.el-input__wrapper) {
  background: #FBFCFD;
}

.forWei {
  display: none;
}

@media (max-width: 500px) {
  h2 {
    color: #000;
    position: relative;
    z-index: 2;
  }
  .forWei {
    display: block;
  }
  .forPc {
    display: none
  }
  .memberCard{
    display: none;
  }
  .wPanel {
    position: relative;
  }
  .poimg {
    width: 110px;
    position: absolute;
    right: 10px;
    top: 0;
  }
  .search-btn {
    background: var(--el-color-primary);
    color: #fff;
    border: none;
    display: block;
    width: calc(100vw - 260px);
  }
}

.bg_c1 {
  background: url("@/assets/v1/cert/1.png") no-repeat;
}
.bg_certificate {
  position: relative;
  padding: 10px;
  width: 800px;
  height: 565px;
  .close{    -webkit-appearance: none;
    padding: 0;    float: right;
    cursor: pointer;
    border: 0;
    margin-top: 10px;
    margin-right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background-color: #900;
    color: #fff;
    font-size: 16px;
    opacity: 1;
  }
  .input_certificate {
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    font-family: "宋体";
    border: none;
    background: none;
  }
  .c1_01{ top:220px; left:250px;}
  .c1_02{ top:280px; left:250px;}
  .c1_03{ top:340px; left:250px;}
  .c1_04{ top:400px; left:250px;}
  .c1_05{ top:220px; left:520px;}
  .c1_06{ top:280px; left:520px;}
  .c1_07{ top:340px; left:520px;}
  .c2_01{ top:220px; left:250px;width:400px;}
  .c2_02{ top:280px; left:250px;}
  .c2_03{ top:340px; left:250px;}
  .c2_04{ top:280px; left:520px;}
  .c2_05{ top:340px; left:520px;}
}
.cert{position: fixed;height: 100vh;width: 100vw;overflow: auto;z-index: 2;
  display: flex;align-items: center;justify-content: center;
  top: 0;left: 0;background: rgba(0,0,0,0.6);
}


.memberCard{
  padding-left: 100px;
  margin-bottom: 20px;
}
.card{
  position: relative;
  width: 600px;
  height: 380px;
  margin: 0 auto;
  background: url('@/assets/member/memberCard.png') no-repeat;
  background-size: 100%;
}

.img{
  width: 115px;
  height: 115px;
  border-radius: 50%;
  position: absolute;
  left: 63px;
  top: 131px;
}
.birthday{
  position: absolute;
  top:157px;
  left: 435px;
  font-size: 16px;
  color: #9f6a44;
}
.memberNumber{
  position: absolute;
  top:183px;
  left: 284px;
  font-size: 19px;
  color: #9f6a44;
  font-weight: 600;
  letter-spacing: 1px;
}
.phone{
  position: absolute;
  top: 295px;
  left: 337px;
  font-size: 16px;
  color: #bc9060;
}
.service{
  position: absolute;
  top: 316px;
  left: 337px;
  font-size: 16px;
  color: #bc9060;

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

}
.nameC{
  position: absolute;
  top: 146px;
  left: 239px;
  //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;
  height: 35px;
  //white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
  transform-origin: 0 55%;
  white-space: nowrap;
}
</style>