<template>
  <div class="qrcode-container">
    <canvas ref="qrcodeCanvas"></canvas>
    <div v-if="!text" class="qrcode-placeholder">请提供文本以生成二维码</div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import QRCode from 'qrcode'

const props = defineProps({
  text: {
    type: String,
    required: true,
    default: ''
  },
  size: {
    type: Number,
    default: 128
  },
  options: {
    type: Object,
    default: () => ({})
  }
})

const qrcodeCanvas = ref(null)

const generateQRCode = async () => {
  if (!props.text || !qrcodeCanvas.value) {
    // 如果没有文本或者canvas未准备好，则清空canvas
    const ctx = qrcodeCanvas.value?.getContext('2d');
    if (ctx) {
      ctx.clearRect(0, 0, qrcodeCanvas.value.width, qrcodeCanvas.value.height);
    }
    return;
  }

  try {
    const defaultOptions = {
      width: props.size,
      height: props.size,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#ffffff'
      },
      errorCorrectionLevel: 'M' // 容错级别 L M Q H
    };
    
    const finalOptions = { ...defaultOptions, ...props.options };

    await QRCode.toCanvas(qrcodeCanvas.value, props.text, finalOptions);
  } catch (err) {
    console.error('生成二维码失败:', err);
  }
}

onMounted(() => {
  generateQRCode()
})

watch(() => [props.text, props.size, props.options], () => {
  generateQRCode()
}, { deep: true })

</script>

<style scoped>
.qrcode-container {
  display: inline-flex; /* 使容器适应内容大小 */
  justify-content: center;
  align-items: center;
  position: relative;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 8px;
  background-color: #fff;
}

canvas {
  display: block; /* 移除canvas默认的底部空间 */
}

.qrcode-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #999;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.8);
}
</style> 