<template>
  <el-dialog :title="title" :model-value="visible && model === 'dialog'" @update:model-value="visible = false">
    <slot></slot>
    <div class="tc mt-20 mb-20">
      <img :src="src" alt="" width="200" height="200" />
    </div>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
  <div v-if="model === 'normal'">
    <div class="tc mt-20 mb-20">
      <img :src="src" alt="" width="200" height="200" />
    </div>
  </div>
</template>

<script setup>
import { useQRCode } from "@vueuse/integrations/useQRCode";
import { ElDialog } from "element-plus";
import "element-plus/es/components/dialog/style/css";

defineOptions({
  name: "AppQrCode",
});

const props = defineProps({
  src: { type: String, required: true, default: "" },
  title: { type: String, default: "二维码" },
  model: {
    type: String,
    validator: (value) => {
      const typeList = ["dialog", "normal"];
      if (typeList.includes(value)) {
        return true;
      } else {
        throw new Error(`model必须是${typeList.join("、")}之一`);
      }
    },
    default: "dialog",
  },
});
const visible = defineModel("visible", {
  type: Boolean,
  required: false,
  default: false,
});

const src = useQRCode(() => props.src, {
  width: 200,
  height: 200,
  margin: 1,
  correctLevel: "H",
});
</script>

<style scoped lang="scss"></style>
