<script lang="ts" setup>
import { onMounted } from 'vue';
import * as ww from '@wecom/jssdk';
import { WeComLogin } from '../api';
import emitter from '/@/utils/emitter';

const props = defineProps({
	isScan: {
		type: Boolean,
		default: false,
	},
});

// 初始化企业微信扫码登录
function initWeComQRCode() {
	ww.createWWLoginPanel({
		el: '#wx_qrcode',
		params: {
			login_type: 'CorpApp',
			appid: 'ww467ec1685e8262e6', // 企业微信企业 ID
			agentid: '1000071', // 应用 AgentID
			redirect_uri: 'https://operate.zosi.com.cn/web/', //正式环境网址
			state: 'Wechat',
			scope: 'snsapi_privateinfo',
			redirect_type: 'callback',
		},
		onCheckWeComLogin({ isWeComLogin }) {
			// console.log(isWeComLogin)
		},
		onLoginSuccess({ code }) {
			handleWeComLogin({ code: code, state: 'Wechat' });
		},
		onLoginFail(err) {
			// console.log(err)
		},
	});
}

async function handleWeComLogin(query: any) {
	// console.log('扫码成功')
	try {
		const res = await WeComLogin(query);
		if (res) {
			emitter.emit('scan-wecomLogin', { loginInfo: res });
			// console.log('发送跳转')
		}
	} catch (error) {
		console.log('error:', error);
	}
}

onMounted(() => {
	if (props.isScan) {
		initWeComQRCode();
	}
});
</script>

<template>
	<div class="login-scan-container">
		<div id="wx_qrcode"></div>
		<!--<div class="font12 mt20 login-msg">{{ $t('message.scan.text') }}</div>-->
	</div>
</template>


<style lang="scss" scoped>
.login-scan-animation {
	opacity: 0;
	animation-name: error-num;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

.login-scan-container {
	//padding: 20px;
	display: flex;
	align-items: center;
	flex-direction: column;
	text-align: center;
	@extend .login-scan-animation;
	animation-delay: 0.1s;

	:deep(img) {
		margin: auto;
	}

	.login-msg {
		color: var(--el-text-color-placeholder);
		@extend .login-scan-animation;
		animation-delay: 0.2s;
	}
}

:deep(#wx_qrcode iframe) {
	height: 365px;
}
</style>
