const { createApp, onMounted, ref } = Vue;

const app = createApp({
	setup() {
		const token = ref('');

		const loadV3Script = () => {
			return new Promise((resolve) => {
				if (typeof window.vaptcha === 'function') {
					resolve();
				} else {
					const script = document.createElement('script');
					script.src = 'https://v.vaptcha.com/v3.js';
					script.async = true;
					script.onload = script.onreadystatechange = function () {
						if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
							resolve();
							script.onload = script.onreadystatechange = null;
						}
					};
					document.getElementsByTagName('head')[0].appendChild(script);
				}
			});
		};

		onMounted(() => {
			const config = {
				vid: '6000eb38551c0d24017b5525',
				mode: 'click',
				scene: 0,
				container: document.getElementById('vaptcha'),
				style: 'light',
				color: '#00BFFF',
				lang: 'auto',
				area: 'auto',
			};
			console.log(config);
			loadV3Script().then(() => {
				window.vaptcha(config).then((obj) => {
					window.vaptchaObj = obj;
					obj.listen('pass', () => {
						// token.value = obj.getToken();
						// alert('pass');
					});
					obj.listen('close', () => {
						obj.reset();
					});
					obj.render();
				});
			});
		});

		const getToken = () => {
			const serverToken = window.vaptchaObj.getServerToken();
			token.value = serverToken.token;
		};

		const reset = () => {
			window.vaptchaObj.reset();
		};

		return {
			token,
			getToken,
			reset,
		};
	},
});

app.mount('#app');