<script lang="ts" setup>
/**
 * 诊所/药店二维码预览弹窗
 * 按门店 type（0 诊所 / 1 药店）切换「诊所|药店」文案，列表页与门店卡片共用
 */
import { computed, 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('');
/** 门店类型：0=诊所 1=药店，未传时按诊所示 */
const storeType = ref(0);

const isPharmacy = computed(() => Number(storeType.value) === 1);
const kindLabel = computed(() => (isPharmacy.value ? '药店' : '诊所'));
const addressLabel = computed(() => `${kindLabel.value}地址：`);

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, type, store_type } =
        modalApi.getData<Record<string, any>>() || {};
      if (values) {
        url.value = values;
        qrCodeUrl.value = values;
        previewTitle.value = title;
        previewAddress.value = address;
        // 兼容 type / store_type 两种传参
        storeType.value = Number(type ?? store_type ?? 0);
        modalApi.setState({
          confirmText: `保存${kindLabel.value}卡片图片`,
          cancelText: `保存${kindLabel.value}二维码图片`,
        });
      }
    }
  },
});

/**
 * 下载二维码卡片或纯二维码图片
 * @param name 文件名后缀
 * @param isQr true=只截二维码区域，false=截整张卡片
 */
const downloadQRCode = async (name: string, isQr = false) => {
  const element = isQr ? qrCodeUrl.value : htmlToImage.value;
  html2canvas(element, {
    useCORS: true,
    allowTaint: true,
    logging: false,
  }).then((canvas) => {
    const link = document.createElement('a');
    link.href = canvas.toDataURL();
    link.setAttribute('download', `${previewTitle.value}${name}.png`);
    link.style.display = 'none';
    document.body.append(link);
    link.click();
  });
};
</script>
<template>
  <Modal :title="`${previewTitle}二维码`">
    <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">{{ addressLabel }}</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 {
  // 宽度适应文本长度
  margin: 0 auto;
  text-align: center;
  background: radial-gradient(
    circle at center,
    rgba(173, 216, 230, 0.8),
    rgba(135, 206, 235, 0.8),
    rgba(100, 149, 237, 0.8)
  );
  padding: 20px 30px;

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

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

  .addressTitle {
    color: #3a8ee6;
  }

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