<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">{{ cash || '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: 'ExtractRed'})">提现至银行卡</view>
				</view>
			</view>
		</view>
		<!-- 账户记录 -->
		<view class="record">
			<view class="record-tabs">
				<view class="tabs-item" :class="logsType === '' ? 'show': ''" @click="onLogsType('')">全部</view>
				<view class="tabs-item" :class="logsType === 'in' ? 'show': ''" @click="onLogsType('in')">收入</view>
				<view class="tabs-item" :class="logsType === 'out' ? 'show': ''" @click="onLogsType('out')">支出</view>
			</view>
			<record :list="logs" :logsType="logsType" />
			<!-- ios安全距离 -->
			<view class="ios-bottom"></view>
		</view>
	</view>
</template>

<script>
	import record from '@/components/property/record'
    import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy/junyi-h5-copy'
	import {
		logs,
		accountCashs,// 现金红包新增 
	} from '@/apis/interfaces/wallet'
	export default {
		components: {
			record
		},
		data() {
			return {
				logs: [],
				logsType: '', // ''全部in入out出
				cash:'0.00',
				has_more:true,
				page:1
			};
		},
		onLoad() {
			this.getlog()
		},
		onShow() {
			if(uni.getStorageSync('refresh')){
				this.logsType = ''
				this.reset()
				uni.setStorageSync('refresh',false)
			}else{
			}
		},
		onReachBottom() {
			if(this.has_more){
				this.page = this.page+1
				this.getlog()
			}else{
				uni.showToast({
					title:'我是有底线的~',
					icon:'none'
				})
			}
		},
		methods: {
			getlog() {
				let data = {
					type:this.logsType,//''全部in入out出
					page:this.page					
				}
				accountCashs(data).then(res => {
					this.logs = this.logs.concat(res.lists.data)
					this.cash = res.cash
					this.has_more = res.lists.page.has_more
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.message
					})
				})
			},
			// 交易记录
			onLogsType(index) {
				if (this.logsType === index) return
				this.logsType = index
				this.reset()
			},
			reset(){
				this.logs = []
				this.has_more = true
				this.page =1
				this.getlog()
			},
			// 区块地址
			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,
								success() {
									uni.showToast({
										title: '区块链地址已复制',
										icon : 'none'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</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 top, #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/2 $padding $padding*3;
			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: 300rpx;
					height: 75rpx;
					line-height: 75rpx;
					color: $mian-color;
					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: $mian-color;
					&::before {
						position: absolute;
						bottom: 0;
						left: $padding;
						right: $padding;
						height: 4rpx;
						content: " ";
						background-color: $mian-color;
					}
				}
			}
		}
	}
</style>
