<template>
	<view class="content">
		<!-- tabs -->
		<view class="tabs">
			<view class="item" :class="{'show': tabsIndex == 'day'}" @click="onTbas('day')">日成交</view>
			<view class="item" :class="{'show': tabsIndex == 'month'}" @click="onTbas('month')">月成交</view>
			<view class="item" :class="{'show': tabsIndex == 'year'}" @click="onTbas('year')">年成交</view>
		</view>
		<!-- 统计信息 -->
		<view class="statistics">
			<view class="statistics-flex">
				<picker mode="date" :fields="tabsIndex" :value="dateValue" :end="endDate" @change="pickerDate">
					<view class="statistics-date">
						{{dateValue}}<uni-icons class="arrowdown" type="arrowdown" color="#555"></uni-icons>
					</view>
				</picker>
				<view class="statistics-lay" :class="{ 'show' : sort != '' || payType != '' || channel != ''}" @click="onScreening">
					筛选 <uni-icons class="arrowdown" type="settings" color="gray"></uni-icons>
				</view>
			</view>
			<view class="statistics-text">
				<text>成交产品数量 {{visitor.goods_count}} 人</text>
				<text>成交产品金额 {{visitor.total}} 元</text>
			</view>
		</view>
		<!-- 数据列表 -->
		<view class="lists">
			<block v-if="orders.length > 0">
				<view class="item" v-for="(item, index) in orders" :key="index">
					<image class="cover" :src="item.user.avatar" mode="aspectFill"></image>
					<view class="title nowrap">
						{{item.user.nickname}}
						<view class="type">{{item.amount}}</view>
					</view>
					<view class="sub-title nowrap">订单号码: {{item.order_no}}</view>
					<view class="sub-title nowrap">订单时间: {{item.created_at}}</view>
					<view class="sub-tabs">
						<text>{{item.driver}}</text>
						<text>{{item.channel}}</text>
					</view>
				</view>
				<!-- 分页 -->
				<uni-load-more :status="pageStatus" :iconSize="16"></uni-load-more>
			</block>
			<block v-else>
				<view class="list-null">
					<image class="icon" src="@/static/icons/listnull-icon.png" mode="widthFix"></image>
					<view class="sub-title">暂无相关成交客户记录</view>
				</view>
			</block>
		</view>
		<!-- 列表筛选 -->
		<uni-popup ref="settingsPopup" background-color="#FFFFFF" @maskClick="onReset">
			<view class="popup-content">
				<view class="title">排序方式</view>
				<view class="popup-choose-flex">
					<view class="item" :class="{'show' : sort == 'money_asc'}" @click="sort = 'money_asc'">金额从低到高</view>
					<view class="item" :class="{'show' : sort == 'money_desc'}" @click="sort = 'money_desc'">金额从高到低</view>
					<view class="item" :class="{'show' : sort == 'sold_asc'}" @click="sort = 'sold_asc'">销量从低到高</view>
					<view class="item" :class="{'show' : sort == 'sold_desc'}" @click="sort = 'sold_desc'">销量从高到低</view>
				</view>
				<view class="title">支付方式</view>
				<view class="popup-choose-flex">
					<view class="item" :class="{'show' : payType == 'eb'}" @click="payType = 'eb'">易币交易</view>
					<view class="item" :class="{'show' : payType == 'money'}" @click="payType = 'money'">现金交易</view>
				</view>
				<view class="title">成交渠道</view>
				<view class="popup-choose-flex">
					<view class="item" :class="{'show' : channel == 'app'}" @click="channel = 'app'">APP</view>
					<view class="item" :class="{'show' : channel == 'mini'}" @click="channel = 'mini'">自媒体</view>
				</view>
				<view class="popup-btns">
					<view class="item" @click="onReset">重置</view>
					<view class="item" @click="onSettings">确定</view>
				</view>
			</view>
			<view class="ios-bottom"></view>
		</uni-popup>
	</view>
</template>

<script>
	import getDate from '@/public/date'
	import { orderUsers } from '@/apis/interfaces/store'
	export default {
		data() {
			return {
				tabsIndex	: 'day',
				dateValue	: '',
				endDate	 	: '',
				visitor	 	: {
					day: 0,
					all: 0
				},
				orders		: [],
				sort		: '',
				payType		: '',
				channel		: '',
				// 分页
				pageStatus	: '',
				page		: 1
			};
		},
		created() {
			getDate().then(res => {
				this.dateValue = res
				this.endDate   = res
				this.getLists()
			})
		},
		methods:{
			// tabs筛选
			onTbas(type){
				getDate(type).then(res => {
					this.tabsIndex = type
					this.dateValue = res
					this.page      = 1
					this.getLists()
				})
			},
			onReset(){
				this.sort	 = ''
				this.payType = ''
				this.channel = ''
			},
			onSettings(){
				this.getLists()
				this.$refs.settingsPopup.close()
			},
			// 日期筛选
			pickerDate(e){
				let dateValue = e.detail.value
				this.dateValue = dateValue
				this.getLists()
			},
			// 列表筛选
			onScreening(){
				this.$refs.settingsPopup.open('bottom')
			},
			// 获取列表
			getLists(){
				orderUsers({
					type	 : this.tabsIndex,
					date	 : this.dateValue,
					sort	 : this.sort,
					pay_type : this.payType,
					channel	 : this.channel,
					page	 : this.page
				}).then(res => {
					if(res.orders.page.current === 1){
						this.orders = []
					}
					this.visitor 	= res.visitor
					this.orders  	= this.orders.concat(res.orders.data)
					this.page   	= res.orders.page.current
					this.pageStatus	= res.orders.page.has_more ? 'more': 'noMore'
				}).catch(err => {
					uni.showToast({
						title: err,
						icon : 'none'
					})
				})
			}
		},
		onReachBottom() {
			if(this.pageStatus == 'more'){
				this.pageStatus = 'loading'
				this.page += 1
				this.getLists()
			}
		}
	}
</script>

<style lang="scss">
	// 筛选层
	.popup-content{
		padding: $padding * 2;
		.title{
			font-weight: bold;
			font-size: $title-size;
			color: $text-color;
			margin-top: $margin;
		}
		.popup-choose-flex{
			padding: $padding /2 0;
			margin: 0 -($margin - 20rpx);
			display: flex;
			flex-wrap: wrap;
			.item{
				width: calc(33.33% - #{$margin - 10});
				font-size: $title-size-sm;
				text-align: center;
				background: $border-color-lg;
				line-height: 68rpx;
				margin: $margin - 20;
				color: $text-gray;
				border:solid 1rpx $border-color-lg;
				box-sizing: border-box;
				&.show{
					border:solid 1rpx $text-price;
					color: $text-price;
				}
			}
		}
		.popup-btns{
			padding-top: $padding*2;
			display: flex;
			justify-content: space-between;
			margin: 0 -$margin/2;
			.item{
				margin: $margin/2;
				color: $text-price;
				background: rgba($color: $text-price, $alpha: .1);
				width: calc(50% - #{$margin});
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				&:last-child{
					background-color: $text-price;
					color: white;
				}
			}
		}
	}
	// 空提示
	.list-null{
		width: 100vw;
		height: 40vh;
		background: white;
		text-align: center;
		@extend .vertical;
		.sub-title{
			color: $text-gray;
			font-size: $title-size-m;
		}
		.icon{
			width: 288rpx;
		}
	}
	// content
	.content{
		padding-top: 80rpx;
	}
	// tabs
	.tabs{
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		background: white;
		justify-content: space-around;
		line-height: 80rpx;
		font-size: $title-size-m;
		color: $text-gray;
		.item.show{
			color: $text-price;
			font-weight: bold;
		}
	}
	// 统计信息
	.statistics{
		margin-top: $margin;
		background-color: white;
		border-bottom: solid 1rpx $border-color;
		padding: $padding;
		.statistics-flex{
			display: flex;
			justify-content: space-between;
			.statistics-date{
				font-size: $title-size + 4;
				font-weight: bold;
				line-height: 60rpx;
				.arrowdown{
					margin-left: $margin/2;
				}
			}
			.statistics-lay{
				font-size: $title-size-sm;;
				color: gray;
				line-height: 50rpx;
				&.show{
					color: $text-price;
				}
				.arrowdown{
					margin-left: $margin/2;
				}
			}
		}
		
		.statistics-text{
			font-size: $title-size-sm;
			color: gray;
			line-height: 50rpx;
			text{
				margin-left: $margin;
				&:first-child{
					margin: 0;
				}
			}
		}
	}
	// 客户列表
	.lists{
		padding: $padding/2 0;
		background: white;
		.item{
			padding: ($padding - 10) $padding ($padding - 10) ($padding*2 + 68);
			position: relative;
			min-height: 68rpx;
			&::after{
				position: absolute;
				left: $padding*2 + 68;
				top: 0;
				right: 0;
				content: ' ';
				border-bottom: solid 1rpx $border-color;
			}
			&:first-child::after{
				display: none;
			}
			.cover{
				position: absolute;
				left: $padding;
				top: $padding - 10;
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				background-color: #eee;
			}
			.title{
				padding-right: 200rpx;
				position: relative;
				line-height: 58rpx;
				font-size: $title-size-lg;
				.type{
					position: absolute;
					right: 0;
					top: 0;
					width: 180rpx;
					text-align: right;
					color: $text-price;
				}
			}
			.sub-title{
				line-height: 40rpx;
				font-size: $title-size-sm;
				color: $text-gray;
			}
			.sub-tabs{
				padding-top: $padding/2;
				font-size: $title-size-sm;
				text{
					margin-right: $margin - 10;
					background: $border-color-lg;
					color: $text-gray;
					padding: 0 ($padding/2);
				}
			}
		}
	}
</style>
