<template>
<el-dialog v-model="dialogVisible" width="637" class="dialog-box" v-if="sc"
    align-center
    destroy-on-close
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false">
    <template #header="{ close, titleId, titleClass }">
        <div class="msg-header" >
            <svg-icon icon-class="qrCode" class="header-icon" />
            <div class="header-title">{{ t('share.downloadQrCode') }}</div>
            <div class="header-close" >
            <el-icon color="rgba(196, 196, 196, 1)" @click="close" ><Close /></el-icon>
            </div>
        </div>
    </template>
    <div class="msg-body" >
        <div>
            <div style="width: 100%;display: flex;justify-content: space-around;">
                <div class="qr-bg" style="width: 87px;height: 87px;padding: 3px">
                    <div class="img-wrap" @click="changeSize(100)" >
                        <vue-qrcode :value="getShareUrl(sc)" :width="81" :margin="1" />
                    </div>
                </div>
                <div class="qr-bg" style="width: 97px;height: 97px;padding: 3px">
                    <div class="img-wrap" @click="changeSize(200)" >
                        <vue-qrcode :value="getShareUrl(sc)" :width="91" :margin="1" />
                    </div>
                </div>
                <div class="qr-bg" style="width: 114px;height: 114px;padding: 4px">
                    <div class="img-wrap" @click="changeSize(300)" >
                        <vue-qrcode :value="getShareUrl(sc)" :width="106" :margin="1" />
                    </div>
                </div>
                <div class="qr-bg" style="width: 127px;height: 127px;padding: 4px">
                    <div class="img-wrap" @click="changeSize(500)" >
                        <vue-qrcode :value="getShareUrl(sc)" :width="119" :margin="1" />
                    </div>
                </div>
            </div>
            <el-radio-group v-model="size" style="width: 100%;justify-content: space-around;margin-top: 14px;margin-bottom: 30px;" >
                <el-radio :value="100" style="width: 87px;">
                    <div >{{ t('share.size1') }}</div>
                </el-radio>
                <el-radio :value="200" style="width: 97px;">
                    <div>{{ t('share.size2') }}</div>
                </el-radio>
                <el-radio :value="300" style="width: 114px;">
                    <div>{{ t('share.size3') }}</div>
                </el-radio>
                <el-radio :value="500" style="width: 127px;">
                    <div>{{ t('share.size4') }}</div>
                </el-radio>
            </el-radio-group>
        </div>
        <el-button @click="downLoadImg" style="width: 100%;" size="large" type="primary">{{ t('common.download') }}</el-button>
    </div>
</el-dialog>

</template>

<script setup>
import { useLocale } from 'element-plus'
import { ref, defineModel, watch } from 'vue';
import Qrcode from 'qrcode'
import VueQrcode  from 'vue-qrcode'

const { proxy } = getCurrentInstance();
const { t } = useLocale()
const dialogVisible = defineModel("show")
const props = defineProps({
    sc: {
        type: String,
        default: null
    }
})
const size = ref(100)
const loading = ref(false)

function changeSize(value) {
    size.value = value
}

function downLoadImg() {
    Qrcode.toDataURL(getShareUrl(props.sc), {width: size.value, margin: 1}, function (err, url) {
        if (err) {
            console.log(err)
            return
        }
        const base64Data = url
        let arr = base64Data.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        let blob = new Blob([u8arr], { type: mime });
        let objUrl = URL.createObjectURL(blob);
        let aTag = document.createElement('a');
        aTag.href = objUrl;
        aTag.download = 'qrcode';
        document.body.appendChild(aTag);
        aTag.click();
        URL.revokeObjectURL(objUrl);
        document.body.removeChild(aTag);
    })
}

function getShareUrl(sc) {
    let domain = window.location.hostname
    return 'https://' + domain + '/api/promotion/' + sc
}

watch(dialogVisible, (n, o) => {
    if(!n) {
        
    }
})
</script>

<style lang="scss">
.dialog-box {
    border-radius: 16px;
    padding: 0;

    .el-dialog__header {
        margin-right: 0;
        padding: 0;
        overflow: hidden;
    }

    .el-dialog__body {
        box-sizing: border-box;
        padding: 16px 22px;
        min-height: 250px;
    }

    .msg-header {
        border-radius: 16px 16px 0 0;
        width: 100%;
        height: 50px;
        position: relative;
        overflow: hidden;
        background-color: #0F3675;
        display: flex;
        align-items: center;
        color: #fff;

        .header-icon {
            width: 25px;
            height: 28px;
            margin-left: 22px;
            margin-right: 14px;
        }

        .header-title {
            font-size: 26px;
            font-weight: 700;
        }

        .header-close {
            cursor: pointer;
            position: absolute;
            bottom: 0;
            right: 20px;
            font-size: 32px;
        }
    }

    .msg-body {
        background-color: #ffffff;
    }
}

.qr-bg {
    margin-top: auto;
    background: linear-gradient(90deg, rgba(16, 55, 118, 1) 0%, rgba(146, 219, 237, 1) 100%);

    .img-wrap {
        width: 100%;
        height: 100%;
        background-color: #fff;
        cursor: pointer;
    }
}

.el-radio {
    margin-right: 0;
    font-size: 16px;
    justify-content: center;
}
</style>