<template>
    <div class="followForm">
        <div class="followForm-bj"></div>
        <div class="followBox row flex-center">
            <div class="followBox-center">
                <img src="../../assets//img/follow.png" 
                style="height: 33.7vw;"/> 
                <span class="close-btn cursor-pointer column items-center flex-center"
             @click="close"><IconClose size="0.83vw"></IconClose></span>
             <div class="pa followBoxQR" style="font-size: 0.73vw;" v-loading="qrLoading">
                <QRCode :value="qrCode" style="width: 13.95vw;height: auto;" v-if="!qrLoading"></QRCode>
                <QRCode value="http://www.viitto.com" style="width: 13.95vw;height: auto;" v-if="qrLoading"></QRCode>
             </div>
            </div>
        </div>
        
        
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { useRouter } from "vue-router";
import { storeToRefs } from 'pinia'
import { useScreenStore } from '@/store'
import { ApiResult } from '@/configs/axios'
import WechatSerice from '@/services/WechatSerice'
const qrCode = ref('none')
const qrLoading = ref(false)
const router = useRouter();

const { market, model, ConfigId, CoverImg, dataLoading } = storeToRefs(useScreenStore())

const props = defineProps({
    DetaTem:{
        type: Boolean,
        default: false,
    },
    Details:{
        type: Object,
        default: {},
    }
})
const params = reactive({
    ConfigId: '' as any,
    TCID: '' as any,
})
const emit = defineEmits<{
    (event: 'close'): void,
}>()

const close = () => {
    emit('close')
}
if(model.value==0 && ConfigId.value) params.ConfigId = ConfigId.value
const getQrcode = async () => {
    qrLoading.value = true
    const response = await WechatSerice.GetShowQrcode({})
    if(response.data.resultCode == ApiResult.SUCCESS){
       qrCode.value = response.data.data
    }
    qrLoading.value = false
}

const goVipIntroduce = () =>{
    router.push({
        path:`/p/show`
    })
}
getQrcode()
</script>

<style lang="scss" scoped>
.followForm,.followForm-bj{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
}
.followForm-bj{
    background: #000;
    opacity: 0.6;
    z-index: 11;
}
.followBox{
    position: relative;
    z-index: 12;
}
.followBox-center{
    position: relative;
    top: 9.32vw;
}
.followBox .close-btn{
    position: absolute;
    top: 1.98vw;
    right: -3vw;
    width: 1.77vw;
    height: 1.77vw;
    border:2px solid #AFAFAF;
    text-align: center;
    color:#AFAFAF;
    border-radius: 50%;
}
.followBox .close-btn:hover{
    color: #FFF;
    border-color: #FFF;
}
.followBoxQR{
    width: 13.95vw;
    position: absolute;
    left: 4.55vw;
    top: 9.7vw;
    /* background: red; */
    border-radius: .7vw;
}  
</style>