<template>
	<view class="content">
		<u-sticky bgColor="#446EFE">
			<view class="type-tab">
				<text :class="{'active': type == 'self' }" @click="onTabs('self')">个人业绩</text>/
				<text :class="{'active': type == 'group' }" @click="onTabs('group')">团队业绩</text>
			</view>
		</u-sticky>
		<!-- 账户余额 -->
		<oct-calendar-picker ref="CalendarPicker" @change="onDay" />
		<view class="total" :style="'background-image: url(' + require('@/static/imgs/cash_back.png') + ');'">
			<view class="total-value nowrap">{{count}}</view>
			<view class="total-text">{{type == 'self' ? '个人总业绩': '团队总业绩'}}</view>
			<view class="total-total">筛选区间业绩：{{total}}</view>
		</view>
		<!-- 账户记录 -->
		<view class="logs">
			<view class="log-item">
				<view class="log-header">
					<view class="log-header-data" @click="onPickeShow()">
						<label>筛选：</label>
						<view class="log-header-data-q">
							<view :class="{'show': dayTime.start_at != ''}">{{dayTime.start_at || "开始日期"}}</view>
							<view :class="{'show': dayTime.end_at != ''}">{{dayTime.end_at || "结束日期"}}</view>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="log-header-title" @click="onDefaultLog">默认</view>
				</view>
				<block v-if="list.length > 0">
					<view class="log-flex" v-for="(item, index) in list" :key="index">
						<view class="log-flex-item">
							<label>类&nbsp;&nbsp;&nbsp;&nbsp;型：</label>
							<view class="log-flex-val nowrap">{{item.type}}</view>
						</view>
						<view class="log-flex-item">
							<label>金&nbsp;&nbsp;&nbsp;&nbsp;额：</label>
							<view class="log-flex-val nowrap">{{item.perf}}</view>
						</view>
						<view class="log-flex-item">
							<label>客&nbsp;&nbsp;&nbsp;&nbsp;户：</label>
							<view class="log-flex-val nowrap">{{item.nick_name || '-'}}</view>
						</view>
						<view class="log-flex-item">
							<label>推荐人：</label>
							<view class="log-flex-val nowrap">{{item.parent_name || '-'}}</view>
						</view>
						<view class="log-flex-item">
							<label>时&nbsp;&nbsp;&nbsp;&nbsp;间：</label>
							<view class="log-flex-val nowrap">{{item.created_at}}</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="list-null">
						<u-empty
							mode="history"
							icon="http://cdn.uviewui.com/uview/empty/history.png"
							text="暂无相关账户记录"
						>
						</u-empty>
					</view>
				</block>
			</view>
			<u-loadmore v-if="pagesShow" :status="status" />
		</view>
	</view>
</template>

<script>
	import { cash } from '@/apis/interfaces/account.js'
	export default {
		data() {
			return {
				dayShow		: false,
				minDate		: '',
				maxDate		: '',
				dayTime		: {
					start_at: '',
					end_at	: ''
				},
				type		: 'self',
				total		: '0.00',
				count		: '0.00',
				list		: [],
				page		: {
					current	: 1,
					has_more: false,
				},
				pagesShow	: false,
				status  	: ''
			};
		},
		created() {
			this.getLog()
			// 获取当天前日期
			let date  = new Date()
			let year  = date.getFullYear()
			let month = date.getMonth() + 1
			let day   = date.getDate() + 1
			this.maxDate = year + '-' + month + '-' + day
		},
		methods: {
			// 打开时间筛选
			onPickeShow(){
				this.$refs.CalendarPicker.open()
			},
			// 筛选tab
			onTabs(e){
				if(this.type === e) return
				this.type = e
				this.page.current = 1
				this.getLog()
			},
			// 默认日期
			onDefaultLog(){
				this.dayTime = {
					start_at: '',
					end_at  : ''
				}
				this.page.current = 1
				this.getLog()
			},
			// 选择日期
			onDay(e){
				this.dayTime = {
					start_at: e.startDate,
					end_at  : e.endDate
				}
				this.dayShow = false
				this.page.current = 1
				this.getLog()
			},
			// 获取列表
			getLog(){
				cash({
					start_at: this.dayTime.start_at,
					end_at	: this.dayTime.end_at,
					type	: this.type,
					page	: this.page.current
				}).then(res => {
					let { total, lists, start, now, count } = res;
					let atList   	= lists.page.current == 1 ? [] : this.list
					if(this.minDate == '') this.minDate = start
					this.list 		= atList.concat(lists.data)
					this.total 		= total
					this.count		= count
					this.page 		= lists.page
					this.pagesShow 	= false
				}).catch(err => {
					
					console.log(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">
	// 统计类型选择
	.type-tab{
		text-align: center;
		padding-bottom: 20rpx;
		color: white;
		font-size: 30rpx;
		text{
			margin: 0 30rpx;
			line-height: 70rpx;
			&.active{
				font-weight: bold;
				font-size: 34rpx;
			}
		}
	}
	// 账户余额
	.total{
		margin: 30rpx 30rpx 0;
		background-size: cover;
		background-position: center;
		border-radius: 20rpx;
		padding: 50rpx 30rpx;
		color: white;
		.total-value{
			font-weight: bold;
			font-size: 60rpx;
			font-family: Arial, Helvetica, sans-serif;
		}
		.total-text{
			font-size: 30rpx;
			opacity: .7;
			line-height: 40rpx;
			padding-top: 10rpx;
		}
		.total-total{
			margin-top: 30rpx;
			border-top: solid 1px rgba(255, 255, 255, .7);
			font-size: 30rpx;
			line-height: 40rpx;
			padding-top: 30rpx;
		}
	}
	// 记录空
	.list-null{
		height: 50vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	// 记录
	.logs{
		padding: 30rpx;
		box-sizing: border-box;
		// 记录筛选
		.log-header{
			border-bottom: solid 1rpx #ddd;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			.log-header-title{
				line-height: 70rpx;
				font-size: 30rpx;
				color: gray;
				color: $main-color;
			}
			.log-header-data{
				display: flex;
				align-items: center;
				label{
					font-size: 30rpx;
				}
				.log-header-data-q{
					font-size: 24rpx;
					line-height: 30rpx;
					color: gray;
					.show{ color: $main-color; }
				}
			}
		}
		// 记录
		.log-item{
			background: white;
			padding: 10rpx 30rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.tabs{
				border-bottom: solid 1rpx #F6F6F6;
				margin: 0 -30rpx 10rpx;
			}
			.log-flex{
				border-bottom: solid 1rpx #F6F6F6;
				padding: 20rpx 0;
				&:last-child{border-bottom: none;}
				&-item{
					line-height: 54rpx;
					font-size: 32rpx;
					display: flex;
					label{
						color: gray;
						width: 140rpx;
					}
				}
				&-val{
					text-align: right;
					width: calc(100% - 140rpx);
				}
			}
		}
	}
</style>
