<template>
	<view class="">
		<navigation :showBack="true">
		{{i18n.backupMneTit}}
		</navigation>
		<view class="main">
			<view class="imgcon">
			<image src="../../../static/tongyonh/notifications_image.png" mode="aspectFill" class="img1"></image>	
			<image src="../../../static/tongyonh/Shield-protected.png" mode="aspectFill" class="img2"></image>
			</view>
		  <view class="title">
		  		{{i18n.BackupTips}}
		  </view>
		  <view class="bottom">
		  		<u-checkbox-group @change="checkedAll()">
		  			<u-checkbox 
		  				@change="checkboxChange(index)" 
		  				v-model="item.checked" 
		  				v-for="(item, index) in list" :key="index" 
		  				:name="item.name"
						shape=""
						size="48"
						:wrap="true"
						active-color="#5B53FF"
						:disabled="item.disabled"
		  			><text class="textname">{{item.name}}</text></u-checkbox>
		  		</u-checkbox-group>
				<button  class="custom-style" @click="test"  :class="inde?'sheng':''">{{i18n.startBack}}</button>
		  	</view>
		</view>
	</view>
	
</template>

<script>
	import cont from "@/components/navigation/navigation.vue"
	export default {
		data() {
			return {
				list: [
					{
						name: this.$t('index').Axioms,
						checked:  false,
						disabled: false
					},
					{
						name: this.$t('index').retrieve,
						checked:  false,
						disabled: false
					},
					{
						name: this.$t('index').disclose,
						checked:  false,
						disabled: false
					}
				],
				inde:false,
				showI:-1
			};
		},
		methods: {
			test(){
				if(this.inde){
					console.log(this.list,777)
					for(var i=0;i<this.list.length;i++){
						this.list[i].checked=false
					}
					this.inde=false
					console.log(this.list,8888)
					uni.navigateTo({
						url:'./backUp2/index',
					})
				
				}else{
					uni.showToast({
						title: this.$t('index').agreetobackup,
						icon: 'none',
						duration: 1500
					}) 
				}
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(i) {
			      this.list[i].checked=true
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			// 全选
			checkedAll() {
				for(var i=0;i<this.list.length;i++){
					console.log(i)
				
				if(this.list[i].checked==true){
					this.inde=true;
					console.log(this.inde,'true')
				}else{
					this.inde=false
					console.log(this.inde)
				} 
				}
			}
		},
		onLoad(item){
			console.log("item",item)
			if(item!=''||item!=undefined){
				var word2=this.$Token.generateMnemonic();
				// 读到钱包助记词信息,存入缓存
				uni.setStorage({
					key: 'word',
					data: word2,
					success: function() {
						console.log('success',word2)
					}
				});;
				uni.setStorageSync('createWalletName',item.name)
			}
		},
		computed: {
			i18n() {
				return this.$t('index')
			
			},
		}
	};
</script>
<style scoped>
	.custom-style {
		line-height: 112rpx;
		text-align: center;
		 color: #fff;
		 background-color: #ABA7FD;
		 border-radius: 40rpx;
	}
	.u-default-hover{
		background-color: #5B53FF !important;
		border-radius: 40rpx !important;
		color: #fff !important;
		border: none;
	}
</style>

<style>

	@import './index.css';

</style>
