<script setup lang="ts">
import QrcodeVue from 'qrcode.vue';
import { getClientURL } from '@/tools';


const props = withDefaults(defineProps<{ url: string; title?: string; mode?: 'img' | 'qr' }>(), {
  title: '扫一扫',
  mode: 'qr',
});

const show = defineModel('show', { default: false });
const config = reactive({
  size: 300,
  margin: 2,
  background: '#0f2925',
  foreground: '#38ff6e',
});

const url = computed(() => {
  return props.mode === 'qr'
         ? `${ getClientURL('/pdf/preview.html') }?url=${ encodeURIComponent(props.url) }`
         : props.url;
});
</script>

<template>
  <van-dialog
    v-model:show="show"
    :title="props.title"
    cancel-button-text="好的"
    show-cancel-button
    :show-confirm-button="false"
    close-on-click-overlay
  >
    <div class="content">
      <qrcode-vue v-if="props.mode === 'qr'" :value="url" v-bind="config"></qrcode-vue>
      <img v-else-if="props.mode === 'img'" :src="url" alt="二维码">
      <div v-else>{{ url }}</div>
    </div>
  </van-dialog>
</template>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    padding: 10px 0;
  }
}
</style>
