<template>
	<view>
		<!-- 提示信息 -->
		<view class="prompt">
			请按照顺序记录并确保正确备份助记词
		</view>
		<!-- 助记词 -->
		<ul class="mnemonic">
			<li v-for="(item, index) in mnemonic" :key="index">{{item}}</li>
		</ul>
		<!-- 按钮 -->
		<view class="buttons">
			<view class="text">注：助记词是用户账户的唯一标识，不能分享给他人，掌握该助记词即可控制该账户与钱包</view>
			<button type="default" @click="goto('/pages/wallet/validation')">验证助记词</button>
		</view>
		<!-- <view class="skip">暂时不验证？<navigator url="/pages/index/index" open-type="switchTab">点此跳过</navigator></view> -->
	</view>
</template>

<script>
	import { seed } from "../../apis/interfaces/wallet"
	export default {
		data() {
			return {
				mnemonic: [], // 助记词
				sign	: ''  // 校验签名
			}
		},
		onLoad() {
			seed().then(res => {
				this.mnemonic = res.seed.split(' ')
				this.sign	  = res.sign
			}).catch(err => {
				uni.showToast({
					icon: 'none',
					title: err.message
				})
			})
		},
		methods: {
			goto(url){
				uni.redirectTo({
					url: url + '?seed=' + this.mnemonic + '&sign=' + this.sign
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 提示信息
	.prompt{
		color: $text-gray;
		text-align: center;
		line-height: 90rpx;
		font-size: $title-size-m;
	}
	// 跳过
	.skip{
		padding: $padding * 2;
		text-align: center;
		color: $text-gray;
		navigator{
			color: $mian-color;
			margin-left: $margin/2;
			display: inline-block;
		}
	}
	// 助记词
	.mnemonic{
		margin: $margin $margin * 2;
		border-radius: $radius-m;
		box-shadow: 0 0 4rpx 4rpx rgba($color: $text-color, $alpha: .02);
		background-color: white;
		padding: $padding;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		li{
			text-align: center;
			height: 58rpx;
			line-height: 58rpx;
			width: 58rpx;
			margin: $margin / 2;
			color: $text-color;
			background: rgba($color: $border-color, $alpha: .4);
		}
	}
	// 按钮
	.buttons{
		padding: $padding $padding * 2;
		.text{
			text-align: center;
			margin-bottom: $margin * 2;
			font-size: $title-size-lg;
			color: $red-color;
		}
		button{
			height: 90rpx;
			line-height: 90rpx;
			background-color: $mian-color;
			border-radius: $radius-lg;
			color: white;
			font-weight: bold;
			font-size: $title-size;
		}
	}
</style>
