<template>
	<view class="">
		<navigation :showBack="true">
			Backup mnemonics
		</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">
		  	 Backup Tips
		  </view>
		  <view class="bottom">
		  		<u-checkbox-group @change="checkboxGroupChange">
		  			<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"
		  			>{{item.name}}</u-checkbox>
		  		</u-checkbox-group>
				<u-button  class="custom-style" @click="test" :class="inde?'sheng':''">Start backup</u-button>
		  	</view>
		</view>
	</view>
	
</template>

<script>
	import cont from "@/components/navigation/navigation.vue"
	export default {
		data() {
			return {
				list: [
					{
						name: 'Axioms are the only way to control assets.',
						checked: true,
						disabled: true
					},
					{
						name: 'You cannot retrieve a lost mnemonic, so be sure to back it up!',
						checked: true,
						disabled: true
					},
					{
						name: 'Do not disclose your mnemonic to anyone.',
						checked: true,
						disabled: true
					}
				],
				inde:1,
			};
		},
		methods: {
			test(){
		
				if(true){
					uni.navigateTo({
						url:'./backUp2/index',
					})
				
				}
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(i) {
				if(this.inde%2==0){
					this.list[i].checked=true;
				}else{
				this.list[i].checked=false;	
				}
				this.inde++
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			// 全选
			checkedAll() {
				this.list.map(val => {
					val.checked = true;
				})
			}
		}
	};
</script>
<style scoped>
	.custom-style {
		height: 112rpx;
		text-align: center;
		 color: #fff;
		 background-color: #ACA8FE;
		 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>
