<template>
	<a-modal
		class="weiXinModel generalModel"
		v-model:visible="weiXinModel"
		:footer="null"
		:width="pageWidth"
		:maskClosable="false"
		:centered="true"
		:closable="false"
		:mask="weiXinModelMask"
		:keyboard="false"
		:destroyOnClose="true"
		:zIndex="1000"
	>
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
				<!-- <i class="fi fi-rr-cross-small"></i> -->
				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
					</svg>

			</div>
		</div>
		<div class="weiXinLogin">
			<div id="wx_id_signin"></div>
		</div>
	<div class="mark_loading" v-show="loadingShow">
		<a-spin size="large" />
	</div>
	</a-modal>

</template>

<script>
import { defineComponent,ref,reactive,toRefs, onMounted} from "vue";
import { useRoute } from 'vue-router';
export default defineComponent({
    components: {
    },
    setup(){
		const route = useRoute();
		let weiXinModel = reactive({
			weiXinModel:false,
			weiXinModelMask:true,
			pageWidth:'50%',
		})
		let data = reactive({
			loadingShow:false,
			scriptSrc:'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js',
		})
		const init = async ()=>{
			weiXinModel.weiXinModel = true
			var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
			await new Promise((resolve, reject) => {
				if(!existingScript){
					const script = document.createElement('script')
					script.type = 'text/javascript'
					script.src = data.scriptSrc
					document.body.appendChild(script)
					script.onload = ()=>{
						resolve()
					}
				}else{resolve()}
			})
			setWeiXin()
		}
		const setWeiXin = ()=>{
			let http = window.location.href.replace(/^https?:\/\//, '')
			http = 'https://www.aida.com.hk'
			new WxLogin({
				self_redirect: false,    //默认为false(保留当前二维码)  true(当前二维码所在的地方通过iframe 内跳转到 redirect_uri)
				id: "wx_id_signin",  //容器的id
				appid: "wxcfb92eb28d6385f5",  //应用唯一标识，在微信开放平台提交应用审核通过后获得
				scope: "snsapi_login",   //应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
				redirect_uri: `${http}${route.path}`,    //扫完码授权成功跳转到的路径
				state: 'weiXin',    //用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止 csrf 攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加 session 进行校验
				style: "black",   //提供"black"、"white"可选，默认为黑色文字描述
				href: "data:text/css;base64,DQoud2ViX3FyY29kZV90eXBlX2lmcmFtZXsNCglkaXNwbGF5OiBmbGV4Ow0KCWFsaWduLWl0ZW1zOiBjZW50ZXI7DQoJanVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQp9DQoud2ViX3FyY29kZV9wYW5lbF9hcmVhew0KCWhlaWdodDogMTAwJTsNCglkaXNwbGF5OiBmbGV4Ow0KCWFsaWduLWl0ZW1zOiBjZW50ZXI7DQoJanVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQp9"  //自定义样式链接，第三方可根据实际需求覆盖默认样式
			});
		}
		const cancelDsign = ()=>{
			weiXinModel.weiXinModel = false
		}
        return{
			...toRefs(weiXinModel),
			...toRefs(data),
			init,
			cancelDsign,
        }
    },
    data() {
        return {
        };
    },
    methods: {
    },
});
</script>
<style lang="less" scoped>
.weiXinLogin {
    width: 100%;
    height: 100%;
	#wx_id_signin{
		display: flex;
		justify-content: center;
		height: 100%;
		align-items: center;
	}
	.web_qrcode_type_iframe{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tpl_for_iframe{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>