new Vue({
	el: '#app',
	data() {
		return {
			token: '',
		};
	},
	mounted() {
		var config = {
			vid: '6000eb38551c0d24017b5525',
			mode: 'click',
			scene: 0,
			container: this.$refs.vaptcha,
			style: 'light',
			color: '#00BFFF',
			lang: 'auto',
			area: 'auto',
		};
		this.loadV3Script().then(() => {
			window.vaptcha(config).then((obj) => {
				// vue3需要将obj存储到vue外部，例如window对象
				window.vaptchaObj = obj;

				obj.listen('pass', function () {
					// this.token = obj.getToken();
					// alert('pass');
				});
				obj.listen('close', function () {
					obj.reset();
				});

				obj.render();
			});
		});
	},
	methods: {
		// 请勿将v3编译进vue项目中
		loadV3Script() {
			if (typeof window.vaptcha === 'function') {
				//如果已经加载就直接放回
				return Promise.resolve();
			} else {
				return new Promise((resolve) => {
					var 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);
				});
			}
		},
		getToken() {
			let serverToken = window.vaptchaObj.getServerToken();
			this.token = serverToken.token;
		},
		reset() {
			window.vaptchaObj.reset();
		},
	},
});