<template>
    <vxe-modal v-model="dialogVisible" :title="title" show-zoom resize show-footer destroy-on-close transfer
        @hide="close" :width="width" :z-index="1002">
        <template #default>
            <div>
                <div v-if="info" ref="codeImgRef" style="width: 400px; margin: 0 auto;padding: 10px;">
                    <div class="mb-6 f-w-6 f-s-16 c-333">{{ info?.trainingName }}</div>
                    <div class="mb-6">会议时间：{{ info?.trainingStart.slice(0, -3) }}~{{ info?.trainingEnd.slice(0, -3) }}</div>
                    <div class="mb-6">会议方式：{{ selectDictLabel(dict.lm_training_join_type, info.joinType) }}</div>
                    <div class="mb-6">联系电话：{{ info?.tel }}</div>
                    <div>签到二维码</div>
                    <div class="d-flex j-c a-c pd-20">
                        <vueQr :text="qrCode" :size="300"></vueQr>
                    </div>
                </div>
            </div>

            <div v-if="!+info.joinType" class="d-flex j-c">
                <el-button @click="saveImg">保存签到二维码</el-button>
            </div>
        </template>
    </vxe-modal>
</template>

<script setup name="SignInCode" lang="ts">
import { propTypes } from '@/utils/propTypes';
import vueQr from 'vue-qr/src/packages/vue-qr.vue';
import html2canvas from 'html2canvas';
const emit = defineEmits(['update:show', 'close', 'success']);
const props = defineProps({
    show: propTypes.bool.def(false),
    title: propTypes.string.def('签到二维码'),
    width: propTypes.number.def(500),
    info: propTypes.any.def(null),
    dict: propTypes.object.def({})
});
const VITE_APP_SHARE_QR_CODE_URL = ref(import.meta.env.VITE_APP_SHARE_QR_CODE_URL);
const dialogVisible = ref(false);
const close = () => {
    if (timer.value) {
        clearTimeout(timer.value);
    }
    emit('update:show', false);
    emit('close', false);
};
const qrCode = ref<string>(`${VITE_APP_SHARE_QR_CODE_URL.value}/meeting-sign-in?meetid=${props?.info?.id}&state=${new Date().getTime()}`);
// 5s设置一次二维码qrCode setTimeout
const timer = ref<any>(null);
const setQrCode = () => {
    if (timer.value) {
        clearTimeout(timer.value);
    }
    timer.value = setTimeout(() => {
        qrCode.value = `${VITE_APP_SHARE_QR_CODE_URL.value}/meeting-sign-in?meetid=${props?.info?.id}&state=${new Date().getTime()}`;
        setQrCode();
    }, 5000);
}

const codeImgRef = ref<HTMLElement | null>(null);
const saveImg = () => {
    html2canvas(codeImgRef.value, {
        useCORS: true,
        allowTaint: false,
        scale: 2
    }).then((canvas) => {
        const url = canvas.toDataURL('image/png');
        const a: any = document.createElement('a');
        a.download = `${props?.info?.trainingName}-签到二维码.png`;
        a.href = url;
        a.click();
    });
};
watch(
    () => props.show,
    (val) => {
        dialogVisible.value = val;
        if (val) {
            setQrCode();
        }
    },
    { immediate: true }
);
</script>
<style scoped>
</style>