<template>
    <div v-if="store.state.showloginmodal" class="htmlCode flexcenter" v-html="htmlCode" ref="htmlRef"></div>
</template>

<script setup>
import { goTologin } from '@/utils/util';
import { ref, watch, onMounted, getCurrentInstance, nextTick, createApp } from 'vue'
import store from '@/store/index';


console.log("store", store);
let showLoginModal = ref(false);

watch(() => store.state.showloginmodal, (newValue) => {
    console.log("newValue", newValue);
    // store.state.showloginmodal = false
    if (newValue) init1()
});


store.state.showloginmodal ? init1() : ''

const { proxy } = getCurrentInstance()

let htmlCode = ref("")
let htmlRef = ref(null)

const init1 = () => {

    if (document.documentElement.clientHeight <= 724) {
        goTologin()
        return
    }

    let url = encodeURIComponent(location.href);
    proxy.$get(`https://passport.gter.net/login/ajax?inajax=1&referer=${url}`).then(res => {
        htmlCode.value = res
        nextTick(() => {
            executeScripts()
        })
    })
}


const aaa = () => {
    clearInterval(timer1);
    clearInterval(timer);
    clearInterval(timee)
    dragValidationState = false
    isSuccess = false
    store.state.showloginmodal = false
};

const scriptTags = []; // 存储创建的 script 标签

let scripts = ""
const executeScripts = () => {
    const closeEleent = htmlRef.value.querySelector("#registerNewApp #app"); // 使用 querySelector 获取元素

    const customElement = document.createElement('div'); // 创建一个真实的 DOM 节点
    customElement.className = 'qwe'; // 设置节点的类名为 "qwe"
    customElement.addEventListener('click', aaa); // 绑定事件 "poi"
    closeEleent.appendChild(customElement); // 将真实的 DOM 节点添加到具有 ref="aa" 的元素中

    scripts = htmlRef.value.querySelectorAll('script');

    scripts.forEach((script, index) => {
        if (script.src) {
            // 创建一个新的script标签来加载外部脚本
            const newScript = document.createElement('script');
            newScript.src = script.src;
            newScript.onload = () => {
                console.log('外部脚本已加载');
                // 可以在这里使用外部脚本提供的功能
            };
            document.body.appendChild(newScript);
        } else {
            if (typeof openWin != undefined) {
                // 创建一个新的script标签并将其中的JavaScript代码执行
                const newScript = document.createElement('script');
                newScript.innerHTML = script.innerHTML;
                newScript.setAttribute('data-name', `script-${index}`); // 为每个 script 标签设置一个名称
                if (typeof openWin === 'undefined') {
                    document.body.appendChild(newScript);
                    scriptTags.push(newScript)
                } else init()
            }

        }
    });
}


</script>

<style lang="less">
.htmlCode {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1111;
}

.htmlCode * {
    box-sizing: content-box;
}

.htmlCode .register .box,
.htmlCode .register .box {
    border-radius: 10px;
}

.qwe {
    position: absolute;
    top: -48px;
    right: -48px;
    height: 35px;
    width: 35px;
    overflow: hidden;
    z-index: 1000;
    cursor: pointer;
}
</style>