<template>
	<view>
		<view class="propery">
			<view class="propery-content">
				<view class="currency">钱包余额</view>
				<view class="balance">{{ balance.balance || '0' }}</view>
				<view class="frozen">{{ balance.frozen || '0' }} 冻结中</view>
				<view class="balance-flex">
					<view class="balance-flex-item" @click="showAddress">区块链地址</view>
					<view class="balance-flex-item" @click="showPrivatekey('privatekey')">我的私钥</view>
				</view>
			</view>
		</view>
		<!-- 账户记录 -->
		<view class="record">
			<view class="record-tabs">
				<view class="tabs-item" :class="logsType === 0 ? 'show': ''" @click="onLogsType(0)">全部</view>
				<view class="tabs-item" :class="logsType === 2 ? 'show': ''" @click="onLogsType(2)">收入</view>
				<view class="tabs-item" :class="logsType === 1 ? 'show': ''" @click="onLogsType(1)">支出</view>
			</view>
			<record :list="logs" />
			<!-- ios安全距离 -->
			<view class="ios-bottom"></view>
		</view>
		<!-- 钱包密码 -->
		<u-popup :show="passwordShow" @close="resetPassword" closeable borderRadius="10">
			<view class="validationPassword">
				<view class="from">
					<view class="title">钱包密码</view>
					<input type="number" v-model="password" maxlength="6" placeholder="请输入钱包密码" />
				</view>
				<view class="buttons">
					<view class="button confirm" @click="payPassword('confirm', passwordPages)">验证</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import record from '@/components/property/record'
	import { sum, logs, securityCheck } from '@/apis/interfaces/wallet'
	export default {
		components: {
			record
		},
		data() {
			return {
				balance		 : {},
				logs		 : [],
				logsType	 : 0,
				password	 : '',
				passwordShow : true,
				passwordPages: ''
			};
		},
		onShow() {
			Promise.all([
				sum(),
				logs()
			]).then(res => {
				this.balance = res[0]
				this.logs = res[1]
			}).catch(err => {
				uni.showToast({
					icon: 'none',
					title: err.message
				})
			})
		},
		methods: {
			// 弹出私钥
			showPrivatekey(pages){
				this.passwordShow = true
				this.passwordPages = pages
			},
			// 重置密码
			resetPassword(){
				this.passwordShow = false
				this.password = ''
			},
			// 验证私钥
			payPassword(type){
				if(type === 'confirm'){
					if(this.password === '') {
						uni.showToast({
							title: '请输入安全密码',
							icon : 'none'
						})
						return
					}
					securityCheck(this.password).then(res => {
						this.resetPassword()
						console.log("密码验证通过")
						
						// switch (this.passwordPages){
						// 	case 'privatekey':
						// 		this.$Router.push({name:'Privatekey', params: {password: this.password}})
						// 		break;
						// 	case 'resetPassword':
						// 		this.$Router.push({name:'ResetPassword', params: {password: this.password}})
						// 		break;
						// }
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none',
						})
					})
					return
				}
				this.$refs.showPassword.close()
			},
			// 交易记录
			onLogsType(index) {
				if (this.logsType === index) return
				this.logsType = index
				this.logs = []
				logs({
					flag: this.logsType
				}).then(res => {
					this.logs = res
				})
			},
			// 区块地址
			showAddress() {
				uni.showModal({
					title: '我的区块链地址',
					content: this.balance.address,
					cancelText: '复制',
					cancelColor: '#009B69',
					success: (res) => {
						if (res.cancel) {
							uni.setClipboardData({
								data: this.balance.address
							})
						}
					}
				})
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				uni.showActionSheet({
					itemList: ['导出助记词', '修改密码'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								this.$Router.push({
									name: 'Transfer'
								})
								break;
							case 1:
								this.$Router.push({
									name: 'WalletCode'
								})
								break;
							case 3:
								this.showPrivatekey('resetPassword')
								break;
						}
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 验证密码弹出层
	.validationPassword{
		.from{
			padding: $padding*2;
			text-align: center;
			.title{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				font-size: $title-size;
				padding-bottom: $padding;
			}
			input{
				background: $window-color;
				height: 90rpx;
				left: 90rpx;
				font-size: $title-size-lg;
				border-radius: 45rpx;
			}
		}
		.buttons{
			text-align: center;
			padding: 0 $padding*2;
			.button{
				height: 90rpx;
				line-height: 90rpx;
				margin-bottom: $margin;
				&.cancel{
					color: $text-gray;
				}
				&.confirm{
					color: white;
					background: $main-color;
					border-radius: 45rpx;
				}
			}
		}
		// 
		// 
	}
	// 账户
	.propery {
		position: relative;
		padding-top: var(--status-bar-height);
		background-image: linear-gradient(to right, $main-color, #22aa98);

		&::before {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			content: " ";
			// background-image: url(@/static/background/wallet-back.png);
			background-size: 100%;
			background-repeat: no-repeat;
		}

		.propery-content {
			position: relative;
			z-index: 1;
			padding: $padding * 5 $padding * 2;
			text-align: center;

			.currency {
				font-size: $title-size-m;
				color: rgba($color: white, $alpha: .8);
			}

			.balance {
				font-size: $title-size * 2;
				padding: ($padding / 2) 0;
				color: white;
			}

			.frozen {
				background: rgba($color: #000000, $alpha: .1);
				color: rgba($color: white, $alpha: .7);
				display: inline-block;
				padding: 0 $padding;
				font-size: $title-size-m;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: $radius-m;
				border: solid 1rpx rgba($color: white, $alpha: .4)
			}

			.balance-flex {
				display: flex;
				justify-content: center;
				margin-top: $margin * 3;

				.balance-flex-item {
					background-color: white;
					width: 200rpx;
					height: 75rpx;
					line-height: 75rpx;
					color: $main-color;
					margin: 0 $margin;
					border-radius: $radius-m;
					font-size: $title-size;
				}
			}
		}
	}

	// 记录
	.record {
		background-color: white;
		border-radius: $radius $radius 0 0;
		padding: $padding ($padding * 2);
		margin-top: -$margin;
		position: relative;
		z-index: 2;

		.record-tabs {
			display: flex;
			justify-content: space-around;
			font-weight: bold;
			font-size: $title-size;
			color: $text-gray;
			line-height: 70rpx;
			margin-bottom: $margin;

			.tabs-item {
				position: relative;
				padding: 0 $padding;

				&.show {
					color: $main-color;

					&::before {
						position: absolute;
						bottom: 0;
						left: $padding;
						right: $padding;
						height: 4rpx;
						content: " ";
						background-color: $main-color;
					}
				}
			}
		}
	}
</style>
