<template>
  <div class="">
    <!-- <button @click="generateAndDownloadQRCode" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      下载分享二维码
    </button> -->
    <slot></slot>
  </div>
</template>

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

// const SHARE_URL = "https://www.baidu.com";

const generateAndDownloadQRCode = async (SHARE_URL, filename, params = {}) => {
  try {
    // 生成二维码的 DataURL
    const qrCodeDataUrl = await QRCode.toDataURL(SHARE_URL, {
      errorCorrectionLevel: "H",
      width: 300,
      margin: 2,
      ...params
    });

    // 创建一个临时链接元素
    const downloadLink = document.createElement("a");
    downloadLink.href = qrCodeDataUrl;
    downloadLink.download = `${filename}.png`;

    // 触发下载
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  } catch (error) {
    console.error("生成二维码失败:", error);
    alert("生成二维码失败，请重试");
  }
};
defineExpose({
  generateAndDownloadQRCode
});
</script>

<style scoped>
.qr-code-share {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
</style>
