<template>
	<view class="recordlistStyle" :style="{ height: contentHeight }">
		<u-empty v-if="g.length == 0" text="暂无相关购买记录" mode="list"></u-empty>
		<view v-if="g.length > 0" style="height:calc(100vh);width:calc(100vw);overflow:hidden;">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
				<view class="recordList">
					<view class="r_list_item" v-for="(x, i) in g" :key="i">
						<view class="list_top">
							<text>支付金额：{{x.Money}}</text>
							<text>支付时间：{{x.PayTimeStr}}</text>
						</view>
						<view class="list_top">
							<text>等级名称：{{x.GradeName}}</text>
							<text>过期时间：{{x.ExpiryDateStr}}</text>
						</view>
						<view class="list_top" style="border-bottom:1px dashed #d1d1d1;padding-bottom:10px;">
							<text>
								支付状态：<text v-if="x.PayState==1">已支付</text><text v-if="x.PayState==0">未支付</text>
							</text>
						</view>
						<view class="list_top_last">
							<view style="width:13%;">
								备注：
							</view>
							<view style="width:86%">
								{{x.Remark}}
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#f3f4f6" />
			</scroll-view>
		</view>
		<view class="loading" v-if="loading">
			<u-loading mode="flower" size="48">></u-loading>
			<Text style="color: #fff; margin-top: 10rpx;">加载中...</Text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: '购买记录',
				mainColor: '',
				contentHeight: 0,
				g: [],
				loading: false,
				msg: {
					pageIndex: 1,
					pageSize: 10
				},
				page_count: 1,
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉，加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				}
			};
		},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + 'px';
			this.mainColor = this.$uiConfig.mainColor;
		},
		mounted() {
			let currentPages = getCurrentPages();
			let u = '/' + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync('basedata') ? wx.getStorageSync('basedata').bar_title : [];
			pages.forEach(x => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			uni.setNavigationBarTitle({
				title: this.pageTitle
			});
		},
		onLoad: function(option) {
			//option为object类型，会序列化上个页面传递的参数
			this.loading = true;
			this.init();
		},
		methods: {
			init() {
				this.request2({
						url: '/api/AppletUser/GetVipBuyPageList',
						data: this.msg
					},
					res => {
						if (res.resultCode == 1) {
							this.loading = false;
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = 'nomore';
							}
						}
					}
				);
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = 'loading';
					this.init();
				} else {
					this.status = 'nomore';
				}
			}
		}
	};
</script>
<style>
	.recordlistStyle {
		width: 100%;
		height: 100%;
		background: #f3f4f6;
	}

	.recordlistStyle .recordList {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10px;
	}

	.recordlistStyle .r_list_item {
		width: 94%;
		height: auto;
		border-radius: 6px;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		margin-bottom: 15px;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		padding: 10px;
		color: #FFFFFF;
		background-image: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/shareTop.png);
	}

	.recordlistStyle .loading {
		width: 180rpx;
		height: 180rpx;
		background: #000000;
		opacity: 0.7;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 50%;
		top: 30%;
		margin-left: -100rpx;
		z-index: 999;
	}

	.recordlistStyle .list_top {
		width: 100%;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: justify;
		justify-content: space-between;
		margin-bottom: 6px;
	}

	.list_top_last {
		padding-top: 3px;
		justify-content: flex-start;
		width: 100%;
		display: flex;
		flex-direction: wrap;
		margin-bottom: 6px;
		align-items: top;
	}
</style>