<template>
	<view class="button-sp-area">
		<input class="uni-input" v-model="transactionId" placeholder="请输入 transactionId" />
		<button type="primary" plain="true" @click="init">init</button>
		<button type="primary" plain="true" @click="getMetaInfo">getMetaInfo</button>
		<button type="primary" plain="true" @click="verify">verify</button>
		<button type="primary" plain="true" @click="setCustomUi">setCustomUi</button>
		
	</view>
</template>

<script>
	const aliyunVerify = uni.requireNativePlugin('VerifyIntlUniPlugin');
	
	export default {
		data() {
			return {
				title: '',
				transactionId: ''
			}
		},
		onLoad() {
			
		},
		methods: {
		    init:function() {
				console.log("init");
				const json={
					CustomUrl:"https://cloudauth-device.ap-southeast-5.aliyuncs.com",
					CustomHost:"cloudauth-device.ap-southeast-5.aliyuncs.com"
				};
				aliyunVerify.initWithOptions(json);
			},
			getMetaInfo:function() {
				console.log("getMetaInfo");
				var t = aliyunVerify.getMetaInfo();
				console.log(t);
				uni.showToast({
					title: t,
					icon: 'none'
				});
			},
			setCustomUi:function(){
				const json={
					faceConfig:{faceBGColor:"#FF00FF"}
				};
				var t = aliyunVerify.setCustomUI(JSON.stringify(json));
				console.log("setCustomUi"+t);
			},
			verify:function(){
				console.log("Face Verify");
				aliyunVerify.startVerify({
						transactionId: this.transactionId,
					}, 
					function(t){
						console.log(t);
						const msg = JSON.stringify(t);
						console.log(msg);
						uni.showToast({
							title: msg,
							icon: 'none'
						});
					}
				);
			}
		}
	}
</script>

<style>
	.uni-input {
		border: 1px solid #ccc;
		border-radius: 8upx;
		padding: 20upx;
		margin-bottom: 20upx;
		font-size: 28upx;
	}

	button {
		margin-top: 30upx;
		margin-bottom: 30upx;
	}

	.button-sp-area {
		margin: 0 auto;
		width: 60%;
	}

	.content {
		text-align: center;
		height: 400upx;
	}

	.wrapper {
		flex-direction: column;
		justify-content: center;
	}

	.button {
		width: 200px;
		margin-top: 30px;
		margin-left: 20px;
		padding-top: 20px;
		padding-bottom: 20px;
		border-width: 2px;
		border-style: solid;
		border-color: #458B00;
		background-color: #458B00;
	}

	.text {
		font-size: 30px;
		color: #666666;
		text-align: center;
	}
</style>
