<template>
  <div style="position: relative;width: 86%; margin-left: 7%; margin-top: 12px" @click="handleCardClick">
    <img src="https://staticweb.hnthyy.cn/images/hunan-dzjkk.png"
         style="width: 100%">
    <div style="position: absolute; bottom: 38px; left: 20px">
      <div style="font-size: 24px;">
        {{ cardInfo.blurName }}
      </div>
      <div>
        {{ cardInfo.blurIdNumber }}
      </div>
    </div>
    <div :id="cardInfo.healthCardId"
         style="position: absolute;
         background-color: white;
         height: 90px;
         bottom: 42px;
         right: 10px">
    </div>
    <div v-if="!cardInfo.healthCardId"
        style="
          position: absolute;
          top: 0; right: 0; bottom: 0; left: 0;
          background-color: rgba(255,255,255,.55);
          display: flex;
          align-items: center;
          justify-content: center;
         ">
      <div style="text-align: center; width: 300px">
        <span style="
               border-radius: 30px;
               background-color: #409eff;
               color: white;
               padding: 0 10px;
               font-size: 40px;">
          +
        </span>
        <div style="margin-top: 8px">点“+”申领电子健康卡</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {qrcanvas} from "qrcanvas";
import {onMounted} from "vue";
import router from '@/router/index'

const props = defineProps({
  cardInfo: {
    type: Object,
    default: {}
  }
})

const handleCardClick = () => {
  if (props.cardInfo.healthCardId) {
    router.push({
      name: 'showCardQrCode',
      query: {
        card: encodeURIComponent(JSON.stringify(props.cardInfo))
      }
    })
  } else {
    router.push('/addElectronicHealthCard')
  }
}

onMounted(() => {
  if (props.cardInfo.healthCardId) {
    document.getElementById(props.cardInfo.healthCardId).innerHTML=''
    const image = new Image();
    image.src = 'https://staticweb.hnthyy.cn/images/dzjkklogo.png';
    image.onload = () => {
      const canvas = qrcanvas({
        size: 90,
        padding: 5,
        data: props.cardInfo.qrCodeText,
        foreground: 'green',
        logo: {
          w: 25,
          h: 25,
          x: 36,
          y: 36,
          image,
        },
      });
      document.getElementById(props.cardInfo.healthCardId).appendChild(canvas)
    };
  }
})
</script>