<template>
	<view class="">
		<navigation :showBack="true">
			Backup mnemonics
		</navigation>
		<view class="main">
		<view class="title">
			Confirm your wallet mnemonic
		</view>
		<view class="title2">
			Please click on the booster words in order to ensure that your backup booster words
			are correct
		</view>
		<view class="textareaa">
			<view class="mnemonicBlock u-rela item" v-for="(item,index) in wordArr" :key="index">
				<text @click="returnWord(item,index)">{{ item }}</text>
			</view>
		</view>
		<view class="mnemonic">
		    <view class="mnemonicBlock u-rela" v-for="(item,index) in mnemonics" :key="index">
		     <text @click="toWrod(item,index)" class="item">{{ item }}</text>
		     <view class="number u-abso" v-text="index+1<10 ? ((index+1)) : index+1"></view>
		    </view>
		   </view>
		
		<u-button  class="custom-style" @click="confirm">Confirm</u-button>
		
		
		<view class="info_con" v-if="show">
			<image src="../../../../static/tongyonh/xg.png" mode="aspectFit" class="img2" @click="show=false"></image>
			<image src="../../../../static/tongyonh/Frame60.png" mode="aspectFit" class="img"></image>
		  <view class="info">
		  	Successful
		  </view>
		  <view class="text">
		  Backup mnemonic completed!
		  </view>
		  <view class="btn" @click="goTranPaw">
		  	Confirm
		  </view>
		</view>
		
		<view class="info_con" v-if="show2">
			<image src="../../../../static/tongyonh/xg.png" mode="aspectFit" class="img2" @click="show2=false"></image>
			<image src="../../../../static/tongyonh/Subtract.png" mode="aspectFit" class="img"></image>
		  <view class="info">
		  Invalid Seed
		  </view>
		  <view class="text">
		You entered the wrong booster words, <br>please try again.
		  </view>
		  <view class="btncon">
			  <view class="can" @click="show2=false">
			  	Cancel
			  </view>
			  <view class="con" @click="restart">
			 	Confirm
			  </view>
		  
		  </view>
		</view>
		
		
		
		<u-mask :show="show"  z-index="10"></u-mask>
		<u-mask :show="show2"  z-index="10"></u-mask>
		  </view>
	
		</view>
	</view>
	
</template>

<script>
	import cont from "@/components/navigation/navigation.vue"
	export default {
		data() {
			return {
			mnemonics:[],
			wordArr:[],
			show: false,
			index:0,
			returnIndex:0,
			// 拿来对比的
			mnemonics2:[],
			show2:false,
			};
		},
		methods: {
			// 成功去到设置交易密码
			goTranPaw(){
				uni.navigateTo({
					url:'/pages/menu/backUp/transPaw/index'
				})
			},
			// 失败重刷新
			restart(){
				uni.redirectTo({
					url:'../backUp3/index'
				})
			},
			// 提交
			confirm(){
			         var go=false;
				for(var i=0;i<this.mnemonics2.length;i++){
					if(this.mnemonics2[i]==this.wordArr[i]){
						 go=true;
					}else{
						 go=false;
					}
					
				};
			          if(go){
						 this.show=true; 
					  }else{
						  this.show2=true
					  }
			},
		// 获取词语
		getWrod(){
					 var walletInfo = uni.getStorageSync('word');	
					 this.mnemonics=walletInfo.split(' ')
					 // 词语数组打乱顺序
					 this.mnemonics.sort(function() {
					     return (0.5-Math.random());
					 });
					 this.mnemonics2=walletInfo.split(' ')		
		},
		returnWord(item,index){
			 this.wordArr.splice(index,1);
			  this.mnemonics.splice(this.returnIndex,0,item);
			  console.log(this.mnemonics,'return')
			  console.log(this.returnIndex,'return')
			  this.index--
		},
		// 给词到文本框
		toWrod(word,index){
		console.log(word,index,11111)
		  this.mnemonics.splice(index,1);
		  console.log(this.mnemonics,'to')
		 this.wordArr[this.index]=word
		 this.returnIndex=index
		 console.log(this.wordArr)
		 this.index++
		 this.$forceUpdate()
		}
		},
		onLoad() {

		   this.getWrod()
		},
	};
</script>
<style scoped>
	.custom-style {
		height: 112rpx;
		text-align: center;
		 color: #fff;
		background-color: #5B53FF !important;
		 border-radius: 40rpx;
		 margin-top: 50rpx;
	}
	.u-default-hover{
		background-color: #5B53FF !important;
		border-radius: 40rpx !important;
		color: #fff !important;
		border: none;
	}
</style>

<style>

	@import './index.css';

</style>
