<template>
    <div class="followForm" ref="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 v-if="!qrCode||loseEffect" class="q-pt-md" style="position: absolute;right: 11vw;top: 27vw">
                <el-icon class="cursor-pointer">
                    <RefreshRight
                    v-if="!RefreshLoading"
                    @click="() => getQrcode(1)"
                    color="#564bec"
                    />
                    <Refresh v-else  color="#564bec"/>
              </el-icon>
            </div>
             <div class="pa followBoxQR" style="font-size: 0.73vw;" v-loading="qrLoading">
                <img :src="qrCode" style="width: 13.95vw;height: auto;" v-if="!qrLoading"></img>
                <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, watch, onBeforeUnmount } from 'vue'
import { useRouter } from "vue-router";
import { storeToRefs } from 'pinia'
import { useScreenStore } from '@/store'
import { ApiResult } from '@/configs/axios'
import UserServices from '@/services/UserService'
import { ElMessage, FormInstance } from 'element-plus';
import { useUserStore } from '@/store/user';

const user = useUserStore()
const qrCode = ref('')
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: {},
    },
    show: {
        type: Boolean,
        default: false,  
    }
})
const params = reactive({
    ConfigId: '' as any,
    TCID: '' as any,
})
const emit = defineEmits<{
    (event: 'close'): void,
}>()

const queryTimer = ref<any>(null)
const loseEffect = ref(false)
const scene_id = ref('')
const RefreshLoading = ref(false)
const followForm = ref()

const close = () => {
    emit('close')
}
if(model.value==0 && ConfigId.value) params.ConfigId = ConfigId.value


const beginTimerHandler = ()=>{
    queryTimer.value = setInterval(async ()=>{
        await userLoginHandler(0)
    },3000)
}

const stopTimerHandler = async ()=>{
    if(queryTimer.value){
        clearInterval(queryTimer.value)
        queryTimer.value=null
        userLoginHandler(1)
    }
}

const getQrcode = async (type:any) =>{
    qrLoading.value = true
    if(type)RefreshLoading.value = true
    const result = await UserServices.GetShowQrcode(1)
    if(result.data.resultCode==ApiResult.SUCCESS){
        if(result.data.data&&result.data.data.url) qrCode.value = result.data.data.url
        if(result.data.data&&result.data.data.scene_id) {
            beginTimerHandler()
            scene_id.value = result.data.data.scene_id
        }
        loseEffect.value = false
        qrLoading.value = false
    }else qrLoading.value = false
    
    if(type)RefreshLoading.value = false
}

const userLoginHandler = async (type:any)=>{
    const result = await user.setUserWechatLoginAsync(scene_id.value,type)
    if(result.status=='SUCCESS'){
        if(!type) {
            stopTimerHandler()
            ElMessage.success({message:'关注成功'})
            location.reload()
        }
    }else if(result.status=='ERROR') {
        if(!type) {
            stopTimerHandler()
            loseEffect.value = true
            ElMessage.error({message:'二维码维码已失效，请重新获取'})
        }
    }
}

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

watch(()=>props.show,(n,o)=>{
    if(!n) stopTimerHandler()
    if(n) getQrcode()
},{
    immediate: true
})

onMounted( () => {
    document.addEventListener('click', (e) => {
        if (props.show&&followForm.value) {
            followForm.value.click()
        }
    });
})
onBeforeUnmount(() => {
    document.removeEventListener('click', () => {});
})
</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>