<template>
  <div class="login-qrcode-container">
    <div ref="qrcodeRef" @click="handlePreview"></div>
    <div class="font12 mt20 login-msg">
      <i class="iconfont icon-saoyisao mr5"></i>
      <span>{{ text }}</span>
    </div>

    <el-dialog
        title="停车二维码"
        align-center
        center
        append-to-body
        width="500px"
        draggable
        v-model="state.visible"
        destroy-on-close :show-close="true">
      <div ref="dialog_qrcode_ref"></div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="Qrcode">
import {ref, onMounted, nextTick,reactive,onUnmounted} from 'vue';
import QRCode from 'qrcodejs2-fixes';

// 定义变量内容
const qrcodeRef = ref<HTMLElement | null>(null);
const dialog_qrcode_ref = ref<HTMLElement | null>(null);


const props = defineProps({
  link: {
    type:String,
  },
  text:{
    type:String
  }

})

const state = reactive({
  visible:false
})

// 初始化生成二维码
const initQrcode = () => {
  nextTick(() => {
    (<HTMLElement>qrcodeRef.value).innerHTML = '';
    new QRCode(qrcodeRef.value, {
      text: `${props.link}`,
      width: 120,
      height: 120,
      colorDark: '#000000',
      colorLight: '#ffffff',
    });


  });
};

const handlePreview = () => {
  state.visible =true;
  nextTick(()=>{
    (<HTMLElement>dialog_qrcode_ref.value).innerHTML = '';
    new QRCode(dialog_qrcode_ref.value, {
      text: `${props.link}`,
      width: 400,
      height: 400,
      colorDark: '#000000',
      colorLight: '#ffffff',
    });
  })
}
// 页面加载时
onMounted(() => {
  initQrcode();
});

onUnmounted(()=>{
  state.visible =false;
})
</script>

<style scoped lang="scss">
.login-qrcode-animation {
  opacity: 0;
  animation-name: error-num;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.login-qrcode-container {
  margin-top: 20px;
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
  @extend .login-qrcode-animation;
  animation-delay: 0.1s;

  :deep(img) {
    margin: auto;
  }

  .login-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-text-color-placeholder);
    @extend .login-qrcode-animation;
    animation-delay: 0.2s;
  }
}
</style>
