<template>
	<view class="content">
		<view class="title">
			积分记录
		</view>
		<view class="list" v-if="accounts.length > 0">
			<view class="item" v-for="(item, index) in accounts" :key="index">
				<image class="item-img" src="@/static/img/giftPack-img09.png" mode="widthFix"></image>
				<view class="item-cont">
					<view class="item-cont-top">
						<div class="item-cont-name">{{item.title}}</div>
						<div class="item-cont-number">{{item.variable}}</div>
					</view>
					<view class="item-cont-bottom">
						<div class="item-cont-total" v-if="userData.gold">余额：{{userData.gold.balance}}</div>
						<div class="item-cont-time">{{item.created_at}}</div>
					</view>
				</view>
			</view>
			
			<view class="pagesLoding" v-if="lodingStats">
			    <block v-if="page.has_more">
			        <image class="pagesLoding-icon" src="/static/icon/refresh_loding.gif" mode="widthFix"></image>加载中...
			    </block>
			    <block v-else>
			        没有更多了~
			    </block>
			</view>
		</view>
		
		<!-- 暂无内容 -->
		<view class="campusTips" v-else>
		    <view class="campusTips-cont">
		    	<image src="/static/img/giftPack-null.png" mode="aspectFill"></image>
		    	<view>抱歉，目前暂无内容~</view>
		    </view>
		</view>
	</view>
</template>

<script>
	import { logs } from '@/apis/interfaces/giftPack'
	import { index } from '@/apis/interfaces/user'
	export default {
	    data() {
	        return {
				userData    : '', //用户
				accounts    : '',           // 账户列表
				page: {
				    has_more: false
				},                          // 下一页
				lodingStats: false          // 数据加载完渲染
	        }
	    },
	    
	    // 生命周期函数--监听页面显示
	    onShow() {
			// 存储环境-月兑活动
			getApp().globalData.envType = 'giftPEnv'
			
	        // 获取账变记录
	        this.accountInfo();
			
			// 获取用户接口
			this.userInfo();
	    },
	    methods: {
			// 用户接口
			userInfo() {
				// 获取用户信息
				index().then(res => {
				    this.userData = res
				}).catch(err => {
				    if (!err.login) {
				        uni.showModal({
				            title: '用户登录已过期',
				            content: '请重新登录',
				            showCancel: false,
				            success: res => {
				                if (res.confirm) {
				                    uni.redirectTo({
				                        url: '/pages/giftPack/signin'
				                    });
				                }
				            }
				        });
				    }
				});
			},
			
			// 账变记录
			accountInfo(page) {
			    logs({
					type    : 'gold',
			        page    : page,
					channel : 'all'
			    }).then(res=>{
			        let newStores = this.accounts,
			            newData = []
			        if(page == 1 || page == undefined) newStores = []
			        newData = newStores.concat(res.data)
			        this.accounts    = newData
			        this.page        = res.page
			        this.lodingStats = false
			        uni.stopPullDownRefresh()
			    })
			},
	    }
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		box-sizing: border-box;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: 600;
	}
	
	.list {
		margin-top: 30rpx;
		.item {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			.item-img {
				width: 54rpx;
				margin-top: 25rpx;
			}
			.item-cont {
				width: calc(100% - 54rpx);
				padding-left: 30rpx;
				box-sizing: border-box;
				.item-cont-top {
					display: flex;
					font-size: 32rpx;
					font-weight: 600;
					margin-bottom: 20rpx;
					.item-cont-name {
						flex: 1;
					}
				}
				.item-cont-bottom {
					font-size: 28rpx;
					color: #a4a4a4;
					display: flex;
					.item-cont-total {
						flex: 1;
					}
				}
			}
		}
	}
	
	.campusTips {
		margin-top: 40rpx;
		padding: 30rpx;
		box-sizing: border-box;
		.campusTips-cont {
			background-color: #fff;
			border-radius: 20rpx;
			text-align: center;
			padding: 80rpx;
			box-sizing: border-box;
			color: #9c7557;
			image {
				width: 340rpx;
				height: 280rpx;
				margin-bottom: 30rpx;
			}
			.campusTips-cont-go {
				display: inline-block;
				border: #9c7557 2rpx solid;
				line-height: 66rpx;
				padding: 0 40rpx;
				margin-top: 30rpx;
				font-size: 28rpx;
				border-radius: 90rpx;
			}
		}
	}
</style>