<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Button, Image } from 'ant-design-vue';
import html2canvas from 'html2canvas';

const qrCodeUrl = ref('');
const htmlToImage = ref('');
const url = ref('');
const previewTitle = ref('二维码');
const previewAddress = ref('');
const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  footer: false,
  header: false,
  showCancelButton: true,
  showConfirmButton: true,
  confirmText: '保存诊所卡片图片',
  cancelText: '保存诊所二维码图片',
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const { values, title, address } =
        modalApi.getData<Record<string, any>>();
      if (values) {
        url.value = values;
        qrCodeUrl.value = values;
        previewTitle.value = title;
        previewAddress.value = address;
      }
    }
  },
});
/**
 * 下载二维码
 * @param name
 * @param isQr
 */
const downloadQRCode = async (name: string, isQr = false) => {
  const element = isQr ? qrCodeUrl.value : htmlToImage.value;
  html2canvas(element, {
    useCORS: true,
    allowTaint: true,
    logging: false,
  }).then((canvas) => {
    // 创建a标签下载
    const link = document.createElement('a'); // 创建a标签
    link.href = canvas.toDataURL(); // 是canvas对象的一种方法，用于将canvas对象转换为base64位编码
    link.setAttribute('download', `${previewTitle.value}${name}.png`); // 利用了a标签的download 来下载 canvas图片
    link.style.display = 'none'; // 将图片隐藏起来
    document.body.append(link); // 插入到其中
    link.click();
  });
};
</script>
<template>
  <Modal :title="`${previewTitle}二维码`" class="w-[50%]">
    <div class="qrBox" style="text-align: center">
      <div ref="htmlToImage" class="qrModal">
        <div id="qrcode" ref="qrCodeUrl" class="qrcode">
          <div class="qrTitle">{{ previewTitle }}</div>
          <Image :preview="false" :src="url" height="30" width="30" />
          <div class="qrAddress">
            <span class="addressTitle">诊所地址：</span>{{ previewAddress }}
          </div>
        </div>
      </div>

      <Button
        style="margin: 20px auto"
        type="primary"
        @click="downloadQRCode('二维码卡片下载')"
      >
        二维码卡片下载
      </Button>
      <Button
        style="margin: 20px auto 20px 20px"
        type="primary"
        @click="downloadQRCode('二维码下载', true)"
      >
        二维码下载
      </Button>
    </div>
  </Modal>
</template>
<style lang="scss" scoped>
.qrModal {
  padding: 20px 30px;
  // 宽度适应文本长度
  margin: 0 auto;
  text-align: center;
  background: radial-gradient(
    circle at center,
    rgb(173 216 230 / 80%),
    rgb(135 206 235 / 80%),
    rgb(100 149 237 / 80%)
  );

  .qrTitle {
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }

  .qrAddress {
    margin-top: 30px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
  }

  .addressTitle {
    color: #3a8ee6;
  }

  .qrcode {
    width: fit-content;
    padding: 20px 30px;
    //width: 50%;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
  }
}
</style>
