<template>
	<view class="content">
		<view class="title">
			<view class="title-name">消费金账户余额</view>
		</view>
		
		<view class="redBack">
			<view class="list">
				<view class="label">
					<view class="label-title">可用余额<image src="/static/icon/giftPack-show.png" mode="widthFix"></image></view>
					<view class="label-number">{{account.gold}}</view>
					<view class="label-go">可用余额，入账记录 </view>
				</view>
				<view class="label">
					<view class="label-title">待发放</view>
					<view class="label-number">{{blockeds}}</view>
					<navigator hover-class="none" :url="'/pages/giftPack/logsFrozen?type=gold' + '&blockeds=' + blockeds" class="label-go">立即查询 > </navigator>
				</view>
			</view>
		</view>
		
		<view class="integra-cont">
			<view class="integra-title">
				<view class="integra-title-name">明细记录</view>
				<view class="integra-title-picker">
					<picker @change="screenBind" :value="screenIndex" :range-key="'name'" :range="screenArray">
						{{screenArray[screenIndex].name}}
					</picker>
					<image class="integra-title-icon" src="/static/icon/arrow_down.png"></image>
				</view>
			</view>
			<view class="integra-cont-list" v-if="accounts.length > 0">
				<view class="integra-cont-label" v-for="(item, index) in accounts" :key="index">
					<view class="integra-cont-title">
						<view class="integra-cont-name">{{item.title}}</view>
						<view class="integra-cont-tips">消费金余额</view>
					</view>
					<view class="integra-cont-time">扣除时间：{{item.created_at}}</view>
					<view class="integra-cont-number">{{item.variable}}</view>
				</view>
			</view>
			
			<!-- 暂无内容 -->
			<view class="recommend-hint" v-else>
				<image src="/static/img/legal_tips.png"></image>
				<view>抱歉，目前暂无内容~</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { logs } from '@/apis/interfaces/giftPack'
	import { index } from '@/apis/interfaces/user'
	export default {
	    data() {
	        return {
				blockeds    : '',
				account     : '',
				accounts    : '',           // 账户列表
				screenArray : [
					{
						channel: 'all',
						name: '全部'
					},
					{
						channel: 'in',
						name: '入账'
					},
					{
						channel: 'out',
						name: '出账'
					}
				],                      //账变记录筛选数组
				screenChannel: '',  //账变记录筛选数组标识
				screenIndex  : 0 ,      //账变记录筛选index
				page        : 1,     //分页
				lodingStats : false  //加载状态
	        }
	    },
	    
	    // 生命周期函数--监听页面显示
	    onShow() {
			// 存储环境-月兑活动
			getApp().globalData.envType = 'giftPEnv'
			
	        // 获取账变记录
	        this.accountInfo();
	    },
	    methods: {
			// 账变记录
			accountInfo(page) {
			    logs({
					type    : 'gold',
			        page    : page || '',
					channel : this.screenChannel
			    }).then(res=>{
			        let newStores = this.accounts,
			            newData = []
			        if(page == 1 || page == undefined) newStores = []
			        newData = newStores.concat(res.data)
			        this.accounts    = newData
					this.blockeds    = res.blockeds
					this.account     = res.account
			        this.page        = res.page
			        this.lodingStats = false
			        uni.stopPullDownRefresh()
			    })
			},
			
			// 筛选账变记录-条件
			screenBind(e) {
				this.screenIndex  = e.detail.value,
				this.screenChannel= this.screenArray[e.detail.value].channel
		
				// 获取账变记录
				this.accountInfo();
			},
			
			// 页面相关事件处理函数--监听用户下拉动作
			onPullDownRefresh() {
			    // 获取账变记录
			    this.accountInfo();
			},
			        
			// 上拉加载
			onReachBottom(){
			    this.lodingStats = true
			    let pageNumber = this.page.current
			    if(this.page.has_more){
			        pageNumber++
					// 获取账变记录
					this.accountInfo(pageNumber);
			    }
			}
	    }
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff9f9;
		height: 100vh;
		overflow-y: scroll;
	}
	
	.title {
		font-size: 34rpx;
		font-weight: 600;
		text-align: center;
		.title-name {
			text-align: center;
			position: relative;
			width: 440rpx;
			margin: 0 auto;
			color: #f25448;
			line-height: 60rpx;
			&::after,
			&::before {
				position: absolute;
				content: '';
				top: calc(50% - 14rpx);
				background-image: url('/static/img/giftPackArrow.png');
				background-size: 100%;
				background-position: center;
				width: 80rpx;
				height: 28rpx;
				display: block;
			}
			&::after {
				left: 0;
				transform: rotate(180deg);
			}
			&::before {
				right: 0;
			}
		}
	}
	
	.redBack {
		background-image: linear-gradient(to top, #fe796f, #f25549);
		border-radius: 30rpx;
		padding: 30rpx 0 40rpx;
		box-sizing: border-box;
		margin: 30rpx 0;
		position: relative;
	}
	.redBack::after,
	.redBack::before {
		position: absolute;
		content: '';
		left: 20rpx;
		border-radius: 0 0 20rpx 20rpx;
	}
	.redBack::after {
		background-color: rgba(243, 85, 73, .4);
		z-index: 2;
		width: calc(100% - 40rpx);
		left: 20rpx;
		bottom: -14px;
		height: 14px;
	}
	.redBack::before {
		background-color: rgba(243, 85, 73, .2);
		z-index: 1;
		width: calc(100% - 80rpx);
		left: 40rpx;
		bottom: -50rpx;
		height: 50rpx;
	}
	
	.list {
		display: flex;
		.label {
			flex: 2;
			color: #ffffff;
			box-sizing: border-box;
			&:last-child {
				padding-left: 60rpx;
				position: relative;
			}
			&:first-child {
				padding-left: 40rpx;
				padding-right: 20rpx;
			}
			&:last-child::after {
				position: absolute;
				content: '';
				left: 0;
				top: 15%;
				width: 2rpx;
				height: 70%;
				background-color: #ffffff;
				opacity: .6;
			}
		}
		.label-title {
			line-height: 54rpx;
			display: flex;
			image {
				width: 32rpx;
				margin: 14rpx 0 0 15rpx;
			}
		}
		.label-number {
			margin: 10rpx 0 30rpx;
			font-size: 48rpx;
			font-weight: 600;
		}
		.label-go {
			font-size: 26rpx;
			opacity: .9;
		}
	}
	
	.integra-cont {
		margin-top: 100rpx;
		.integra-title {
		    display: flex;
			margin-bottom: 30rpx;
			.integra-title-name {
				font-size: 36rpx;
			    font-weight: 600;
			    flex: 1;
			}
			.integra-title-picker {
			    display: flex;
			    color: #797979;
			    font-size: 32rpx;
				.integra-title-icon {
				    width: 28rpx;
				    height: 28rpx;
				    margin: 6rpx 0 0 10rpx;
				}
			}
		}
		.integra-cont-label {
			background-color: #ffffff;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			position: relative;
			.integra-cont-title {
				display: flex;
				line-height: 40rpx;
				.integra-cont-tips {
					margin-left: 20rpx;
					color: #ff9833;
					border: 2rpx solid #ff9833;
					border-radius: 80rpx;
					font-size: 26rpx;
					padding: 0 15rpx;
				}
			}
			.integra-cont-time {
				font-size: 26rpx;
				color: #666666;
				margin-top: 20rpx;
			}
			.integra-cont-number {
				position: absolute;
				top: 50rpx;
				right: 30rpx;
				color: #f25448;
				font-size: 38rpx;
			}
		}
	}
	
	/* 暂无内容 */
	.recommend-hint {
	    text-align: center;
	    color: #999;
	    padding: 100rpx 0;
	}
	
	.recommend-hint image {
	    width: 200rpx;
	    height: 200rpx;
	}
</style>