<template>
	<view class="detail-content">
		<u-section title="充值记录" :subTitle="`总数 ${total}`"
		color="#a3d4fe" fontSize="40" :arrow="false" subColor="#cbe7fb" />
		<scroll-view :scroll-top="scrollTop" :scrollY="true" class="rechargeList"
		scroll-with-animation @scroll="scroll">
			<u-collapse :itemStyle="{borderTopRightRadius: '10rpx', border: '2rpx solid #eee',
			borderTopLeftRadius: '10rpx',marginTop: '30rpx'}" :arrow="false" :headStyle="{color:'#b3a0da',
			borderTopLeftRadius: '10rpx', cursor: 'pointer', borderTopRightRadius: '10rpx'}" 
			:bodyStyle="{minHeight: '100rpx',backgroundColor: '#fbfbfb',}">
				<u-collapse-item v-for="(item, index) in rechargeList" :key="item.id">
					<template slot="title">
						<view class="recharge-item-title">
							<view class="cit-left">
								{{ index+1 }}.  钻石充值
								<text :class="item.result ? 'citl-green' : 'citl-red'">
									{{ item.addOrSub === 'sub' ? '- ' : '+ ' }}{{ options[item.buyType-1] }}
								</text>
							</view>
							<view class="cit-right">
								{{ dateFormat(item.createTime) }}
							</view>
						</view>
					</template>
					<view class="recharge-item-content">
						{{ item.orderType || '钻石充值' }} {{ options[item.buyType-1] }}钻 {{ item.amount }}￥ —{{ item.result || '支付失败' }}
					</view>
				</u-collapse-item>
				<u-loadmore @loadmore="getMore" :status="isFinish" color="#b3a0da" marginTop="30" marginBottom="20" />
			</u-collapse>
		</scroll-view>
		<view class="recharge-tips">
			<view class="tips-green"><view class="tip-green"></view>充值成功</view>
			<view class="tips-red"><view class="tip-red"></view>充值失败</view>
		</view>
		<view @click="goTop">
			<u-back-top :scrollTop="oldScrollTop" zIndex="100" :iconStyle="{ color: '#fff' }" 
			:customStyle="{background: 'linear-gradient(180deg, rgba(56,45,79,1) 0%, #b3a0da 100%)',filter: 'opacity(0.96)'}"></u-back-top>
		</view>
	</view>
</template>

<script>
import configService from '@/common/config.service.js';
export default {
	data(){
		return{
			// 是否结束——loadmore加载更多，loading加载中，nomore无更多
			isFinish: 'nomore',
			form: {
				size: 20,
				current: 1
			},
			// 滚动顶部
			scrollTop: 0,
			oldScrollTop: 0,
			// 充值记录
			rechargeList: [],
			// 总数
			total: 0,
			// 额度选项
			options: [5,10,20,30,50,100],
		}
	},		
	mounted() {
		this.init();
	},
	methods:{
		// 滚动回顶部
		goTop() {
			this.scrollTop = this.oldScrollTop;
			this.$nextTick(()=>{
			    this.scrollTop = 0;
			});
		},
		// 滚动监听
		scroll(e){
			this.oldScrollTop = e.detail.scrollTop;
		},
		// 时间格式化
		dateFormat(time){
			let date = new Date(time);
			let month = date.getMonth()+1,
			day = date.getDate(),
			hour = date.getHours(),
			minute = date.getMinutes(),
			second = date.getSeconds();
			return `${date.getFullYear()}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`;
		},
		// 加载更多
		getMore(){
			if(this.isFinish === 'nomore') return;
			this.form.current++;
			this.getRechargeList();
		},
		// 获取充值记录列表
		async getRechargeList(){
			this.isFinish = 'loading';
			let res = await this.$api.getOrders(this.form);
			if(res?.success){
				const { records, size, total, current } = res.data;
				if(current === 1) this.rechargeList = records;
				else this.rechargeList.push(...records);
				this.isFinish = size*current >= total ? 'nomore' : 'loadmore';
				this.total = total;
			}else{
				this.$refs.uToast.show({type:'error',title: "充值记录获取失败!"});
				this.isFinish = 'loadmore';
			}
		},
		// 初始化
		init(){
			const { id } = JSON.parse(this.$store.state.user_message);
			if(!id) return;
			this.form = {size: 20,current: 1,memberId: id};
			this.getRechargeList();
		},	
	},
}
</script>

<style scoped lang="scss">
.detail-content{
	width: 800rpx;
	height: 100vh;
	padding: 50rpx 50rpx 20rpx;
	border-radius: 16rpx;
	.rechargeList{
		margin: 30rpx 0;
		width: 100%;
		height: 88vh;
		.recharge-item-title{
			width: 100%;
			margin: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.cit-left{
				max-width: 50%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text{
					margin-left: 20rpx;
				}
				.citl-green{
					color: #49cc90;
				}
				.citl-red{
					color: #f93e3e;
				}
			}
		}
		.recharge-item-content{
			margin: 10rpx 30rpx;
			color: #888888;
		}
	}
	.recharge-tips{
		display: flex;
		align-items: center;
		.tips-green{
			display: flex;
			align-items: center;
			color: #49cc90;
			margin-right: 20rpx;
			.tip-green{
				width: 22rpx;
				height: 22rpx;
				margin-right: 10rpx;
				background-color: #49cc90;
			}
		}
		.tips-red{
			display: flex;
			align-items: center;
			color: #f93e3e;
			.tip-red{
				width: 22rpx;
				height: 22rpx;
				margin-right: 10rpx;
				background-color: #f93e3e;
			}
		}
	}
}
.u-back-top{
	cursor: pointer;
	&:hover{
		box-shadow: 0 0 20rpx #9989bb;
	}
	&:active{
		box-shadow: 0 0 10rpx #9989bb;
	}
}
::v-deep .u-more-text{
	cursor: pointer;
	&:hover{
		opacity: 0.8;
	}
	&:active{
		opacity: 0.6;
	}
}
::v-deep .u-collapse-head{
	background-color: #eee;
	&:hover{
		opacity: 0.8;
	}
	&:active{
		opacity: 0.6;
	}
}
</style>