<template>
	<view class="content">
		<u-sticky bgColor="#f8f8f8">
			<u-tabs
				:current="current"
				:list="tabs"
				:scrollable="false"
				lineColor="#446EFE"
				@click="onTabs"
			></u-tabs>
		</u-sticky>
		<!-- 账户记录 -->
		<view class="logs" v-if="list.length > 0">
			<view class="log-item" v-for="(item, index) in list" :key="index">
				<view class="log-flex">
					<view class="title nowrap">{{item.rule.title}}{{item.rule.remark}}</view>
					<view class="price">{{item.amount}}</view>
				</view>
				<view class="log-flex">
					<view class="time">{{item.created_at}}</view>
					<view class="state">{{item.frozen.text}}</view>
				</view>
			</view>
			<u-loadmore v-if="pagesShow" :status="status" />
		</view>
		<view v-else class="list-null">
			<u-empty
				mode="history"
				icon="http://cdn.uviewui.com/uview/empty/history.png"
				text="暂无相关账户记录"
			>
			</u-empty>
		</view>
	</view>
</template>

<script>
	import { log } from '@/apis/interfaces/account.js'
	export default {
		data() {
			return {
				tabs		: [
					{ val: 'out', name: '消费记录' },
					{ val: 'in', name: '充值记录' }
				],
				current		: 0,
				list		: [],
				page		: {
					current	: 1,
					has_more: false,
				},
				pagesShow	: false,
				status  	: ''
			};
		},
		created() {
			this.current = this.$Route.query.type
			this.getLog()
		},
		methods: {
			onTabs(e){
				if(this.current === e.index) return
				this.current = e.index
				this.page.current = 1
				this.getLog()
			},
			// 获取列表
			getLog(){
				log({
					type: this.tabs[this.current].val,
					page: this.page.current
				}).then(res => {
					let { logs } = res;
					let atList   = logs.page.current == 1 ? [] : this.list
					this.list = atList.concat(logs.data)
					this.page = logs.page
					this.pagesShow = false
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		},
		onReachBottom() {
			this.pagesShow = true;
			if(this.page.has_more){
				this.status    = 'loading';
				this.page.current++
				this.getLog()
				return
			}
			this.status    = 'nomore';
		}
	}
</script>

<style lang="scss">
	// 记录空
	.list-null{
		height: 80vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	// 记录
	.logs{
		padding: 30rpx;
		box-sizing: border-box;
		.log-item{
			background: white;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.log-flex{
				padding: 5rpx 0;
				display: flex;
				justify-content: space-between;
				line-height: 40rpx;
				align-items: center;
				.title{
					font-weight: bold;
					font-size: 32rpx;
					width: calc(100% - 200rpx);
				}
				.price{
					font-size: 32rpx;
					width: 200rpx;
					text-align: right;
					font-weight: bold;
					color: $main-color;
				}
				.time{
					font-size: 28rpx;
					color: gray;
				}
				.state{
					font-size: 28rpx;
				}
			}
		}
	}
</style>
