<template>
    <Dialog class="app-register-code" teleport="body" v-model:show="showDialog" :show-confirm-button="showConfirmButton"
        confirm-button-text="保存" show-cancel-button @confirm="onConfirm">
        <div class="app-register-code__wrapper">
            <div class="app-register-code__canvas">
                <app-qrcode class="app-register-code__qrcode" v-model="base64Data" :text="qrContent"
                    :logo="require('@mobile/assets/logo.svg')" />
            </div>
            <div class="app-register-code__content" :data-clipboard-text="props.text" v-copy="onCopy">{{ props.text }}</div>
        </div>
    </Dialog>
</template>

<script lang="ts" setup>
import { computed, shallowRef } from 'vue'
import { Dialog, showFailToast, showSuccessToast } from 'vant'
import { getServiceUrl } from '@/services/http'
import plus from '@/utils/h5plus'
import AppQrcode from '@/components/base/qrcode/index.vue'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    text: String,
})

const emit = defineEmits(['update:show'])
const showConfirmButton = shallowRef(false)
const base64Data = shallowRef('')

const qrContent = computed(() => {
    const url = getServiceUrl('mobileOpenUrl')
    return url + '/#/?code=' + props.text
})

const showDialog = computed({
    get: () => props.show,
    set: (val) => emit('update:show', val)
})

const onCopy = (status: boolean) => {
    if (status) {
        showSuccessToast('复制成功')
    } else {
        showFailToast('复制失败')
    }
}

// 保存二维码
const onConfirm = () => {
    plus.saveImage(base64Data.value, 'thj_' + (props.text ?? new Date().getTime()))
}

plus.onPlusReady(() => {
    showConfirmButton.value = true
})
</script>

<style lang="less">
@import './index.less';
</style>