<template>
	<view class="propertyIndex">
		<view class="propery">
			<image src="/static/imgs/account-bg.png" mode="aspectFill" class="record-bg" />
			<view class="propery-content">
				<view class="currency">能量球钱包
				<span>(≈ {{ price || '0.00' }} CNY)</span>
				 </view>
				<view class="balance">{{ balance.balance || '0.00' }}</view>
				<!-- <view class="frozen">{{ balance.frozen || '0.00' }} 冻结中</view> -->
				<view class="balance-flex">
					<view class="balance-flex-item" @click="showAddress">区块链地址</view>
					<!-- <view class="balance-flex-item" @click="showPrivatekey('privatekey')">我的私钥</view> -->
					<view class="balance-flex-item" @click="$Router.push({name: 'Extract'})">能量球提现</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" :logsType="logsType" />
			<!-- ios安全距离 -->
			<view class="ios-bottom"></view>
		</view>
		<!-- 支付密码 -->
		<uni-popup ref="showPassword">
			<view class="validationPassword">
				<view class="from">
					<view class="title">验证密码</view>
					<input class="input" v-model="password" password placeholder="请验证安全密码" />
				</view>
				<view class="buttons">
					<view class="button cancel" @click="payPassword('cancel', passwordPages)">取消</view>
					<view class="button confirm" @click="payPassword('confirm', passwordPages)">验证</view>
				</view>
			</view>
		</uni-popup>
		<!-- 原密码弹窗 -->
		<!-- <number-jpan :length="6" @closeChange="closeChange($event)" ref="numberPad"></number-jpan> -->
	</view>
</template>

<script>
	import record from '@/components/property/record'
	import {
		sum,
		price,
		logs,
		code,
		securityCheck // 输入旧密码是否正确
	} from '@/apis/interfaces/wallet'
	import numberJpan from "@/components/numberJpan/numberJpan.vue";
	export default {
		components: {
			record
		},
		data() {
			return {
				balance: {},
				price: '0.00',
				logs: [],
				logsType: 0,
				password: '',
				passwordPages: ''
			};
		},
		onShow() {
			this.getsum()
			this.getlog()
		},
		methods: {
			getsum() {
				sum().then(res => {
					this.balance = res
					this.price = res.price
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.message
					})
				})
			},
			getlog() {
				logs().then(res => {
					this.logs = res
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.message
					})
				})
			},
			// 弹出私钥
			showPrivatekey(pages) {
				this.passwordPages = pages
				this.$refs.showPassword.open('center')
			},
			// 验证私钥
			payPassword(type) {
				if (type === 'confirm') {
					if (this.password === '') {
						uni.showToast({
							title: '请输入安全密码',
							icon: 'none'
						})
						return
					}
					securityCheck(this.password).then(res => {
						this.$refs.showPassword.close()
						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;
						}
						this.password = ''
					}).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: '\n地址可以理解为银行卡卡号，与他人转账时是区块链上的两个地址间的交易行为\n\n' + this.balance.address,
					confirmText: '复制',
					confirmColor: '#b11eff',
					showCancel:false,
					success: (res) => {
						if (res.confirm) {
							uni.setClipboardData({
								data: this.balance.address
							})
						}
					}
				})
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				uni.showActionSheet({
					// itemList: ['转账', '收款', '提币', '修改密码'],
					itemList: ['提现', '修改密码'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								console.log('提现了，')
								this.$Router.push({
									name: 'Extract'
								})
								break;
							case 1:
								this.showPrivatekey('resetPassword')
								break;
						}
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.propertyIndex {
		width: 100%;
		min-height: 100vh;
		background-color: #FFFFFF;
	}

	// 验证密码弹出层
	.validationPassword {
		background-color: white;
		border-radius: $radius-m;
		width: 70vw;

		.from {
			padding: $padding*2;

			.title {
				text-align: center;
				font-size: $title-size;
				padding-bottom: $padding*2;
				font-weight: bold;
				color: $text-price;
			}

			.input {
				text-align: center;
				height: 90rpx;
				font-size: $title-size;
				border-radius: $radius-m;
				background: $border-color-lg;
				padding: 0 ($padding*2);
			}
		}

		.buttons {
			display: flex;
			border-top: solid 1rpx $border-color;

			.button {
				width: 50%;
				font-size: $title-size;
				line-height: 90rpx;
				height: 90rpx;
				text-align: center;
				box-sizing: border-box;

				&.cancel {
					border-right: solid 1rpx $border-color;
					color: $text-gray;
				}

				&.confirm {
					color: $text-price;
				}
			}
		}

		// .button{
		// 	background-color: $text-price;
		// 	color: white;
		// 	border-radius: $radius-m;
		// 	border: none;
		// 	margin-top: $margin*2;
		// 	font-size: $title-size;
		// 	height: 90rpx;
		// 	line-height: 90rpx;
		// }
		// .close{
		// 	@extend .button;
		// 	text-align: center;
		// 	color: $text-gray;
		// 	margin-top: $margin;
		// 	background-color: transparent;
		// }
	}

	// 账户
	.propery {
		position: relative;
		padding-top: var(--status-bar-height);
		background-image: linear-gradient(to right, #7c52fc, #976dff);
		position: relative;
		overflow: hidden;

		.record-bg {
			position: absolute;
			width: 100%;
			height: 300rpx;
			bottom: 0;
			right: 0;
			z-index: 1;
			opacity: .5;
			transform: rotate(0);
		}

		// &::before {
		// 	position: absolute;
		// 	left: 0;
		// 	top: 0;
		// 	width: 100%;
		// 	height: 100%;
		// 	content: " ";
		// 	background-image: url(@/static/imgs/account-bg.png);
		// 	background-size: 100%;
		// 	background-repeat: no-repeat;
		// 	opacity: .5;
		// 	transform:rotate(0deg);
		// }

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

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

			.balance {
				font-size: $title-size * 2.5;
				padding: $padding 0;
				color: white;
			}

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

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

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

	// 记录
	.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: $text-price;

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