<template>
	<view>
		<!-- 设置钱包密码 -->
		<view class="password">
			<view class="prompt">请设置6位数字密码，建议不要使用连续的数字</view>
			<view class="group">
				<view class="inputs" @click="onShowKet('password')">
					<block v-if="password.length > 0">
						<text v-for="item in password.length" :key="item">•</text>
					</block>
					<block v-if="keyShow && valKye === 'password'">
						<text class="flicker-animation">|</text>
					</block>
					<block v-else>
						<text v-if="password.length === 0" class="placeholder">请设置密码</text>
					</block>
				</view>
				<view class="inputs" :class="{'hide': verify === ''}" @click="onShowKet('verify')">
					<block v-if="verify.length > 0">
						<text v-for="item in verify.length" :key="item">•</text>
					</block>
					<block v-if="keyShow && valKye === 'verify'">
						<text class="flicker-animation">|</text>
					</block>
					<block v-else>
						<text v-if="verify.length === 0" class="placeholder">请确认密码</text>
					</block>
				</view>
			</view>
		</view>
		<!-- key键盘 -->
		<u-keyboard
			mode="number"
			random
			dotDisabled
			:overlay="false"
			:show="keyShow"
			:showCancel="false"
			@change="keyValChange"
			@backspace="keyValBackspace"
			@confirm="keyShow = false"
		></u-keyboard>
		<!-- 按钮 -->
		<view class="buttons">
			<button type="default" form-type="submit" @click="createWallet">确认激活</button>
		</view>
	</view>
</template>

<script>
import { security } from '@/apis/interfaces/wallet';
export default {
	data() {
		return {
			password: '',
			verify	: '',
			valKye	: '',
			keyShow	: false
		};
	},
	methods: {
		// 唤起key
		onShowKet(key){
			this.valKye  = key
			this.keyShow = true
		},
		// 键盘输入
		keyValChange(e){
			if(this[this.valKye].length >= 6) return
			this[this.valKye] += e
		},
		// 键盘删除
		keyValBackspace(e){
			if(this[this.valKye].length) this[this.valKye] = this[this.valKye].substr(0, this[this.valKye].length - 1)
		},
		// 激活钱包
		createWallet() {
			if (this.password === '' || this.verify === '') {
				uni.showToast({
					icon: 'none',
					title: '请设置密码'
				});
				return;
			}
			if (this.password !== this.verify) {
				uni.showToast({
					icon: 'none',
					title: '两次输入密码不一致'
				});
				return;
			}
			
			security({
				code: Number(this.password)
			}).then(res => {
				this.$Router.replace({
					name: 'WalletProperty'
				})
			}).catch(err => {
				uni.showToast({
					icon: 'none',
					title: err.message
				});
			});
		}
	}
};
</script>

<style>
	.flicker-animation{
		animation: flicker .8s infinite;
	}
	@keyframes flicker{
		0%{opacity: 0;}
		100{opacity: 1;}
	}
</style>

<style lang="scss" scoped>
// 副标题
.sub-title {
	color: $text-gray;
	text-align: center;
	margin: $margin * 2 $margin;
	font-size: $title-size-m;
}

// 设置密码
.password {
	padding: 0 $padding * 2;
	.prompt {
		margin-top: $margin * 2;
		font-size: $title-size-m;
		color: $main-color;
		text-align: center;
	}

	.group {
		padding-top: $padding;
		.inputs {
			padding: 10rpx $padding + 10;
			margin-top: $margin;
			border-radius: $radius-m;
			background-color: $window-color;
			height: 70rpx;
			line-height: 70rpx;
			font-size: $title-size-lg;
			text-align: center;
			text{
				padding: 0 10rpx;
				text-align: center;
			}
			.placeholder{
				color: $text-gray;
			}
		}
	}
}

// 按钮
.buttons {
	padding: $padding * 2;
	.text {
		text-align: center;
		line-height: 90rpx;
		height: 90rpx;
		margin-bottom: $margin * 2;
		font-size: $title-size-lg;
		color: $main-color;
		font-weight: bold;
	}

	button {
		height: 90rpx;
		line-height: 90rpx;
		background-color: $main-color;
		border-radius: $radius-m;
		color: white;
		font-weight: bold;
		font-size: $title-size;
		&::after{
			display: none;
		}
	}
}
</style>
