<template>
  <el-dialog :model-value="visible" title="店铺服务码" :width="360" center @close="close">
    <div class="p-5px">
      <div class="text-14px text-gray-500 leading-20px">药店专属服务码，用于患者到药店后扫码进入震元堂互联网医院进行在线复诊等操作。</div>
      <div class="p-15px" ref="qrcodeRef">
        <vue-qrcode class="mx-auto" tag="img" :value="qrcode" :options="{ width: 240, margin: 2 }"></vue-qrcode>
        <div class="text-16px text-dark-500 text-center leading-24px">{{ store.name || '' }}</div>
      </div>
      <img v-if="href" :src="href" alt="">
    </div>
    <template #footer>
      <div class="text-center py-10px">
        <el-button type="primary" @click="download()">下载二维码</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { computed, ref } from 'vue';
import html2canvas from 'html2canvas';
import VueQrcode from "@chenfengyuan/vue-qrcode";

const emits = defineEmits(['close'])
const props = defineProps({
  store: { type: Object, default: () => ({}) },
  visible: { type: Boolean, default: false },
})
const qrcode = computed(() => props.store.store_id ? `https://zyt.youcan365.com/store?storeId=${props.store.store_id}` : '') //  写死震元堂的服务地址
const qrcodeRef = ref()
function close() {
  emits('close')
}

function download() {
  if (qrcode.value && qrcodeRef.value) {
    html2canvas(qrcodeRef.value, {
      scale: window.devicePixelRatio,
      scale: 2,
    }).then(canvas => {
      const link = document.createElement('a');
      link.href = canvas.toDataURL('image/png');
      link.download = `${props.store.name || ''}.png`;
      link.click();
    });
  }
}

</script>