<template>
	<view class="promoter-list" ref="container">
		<view class="header">
			<view class="promoterHeader bg-color-red">
				<view class="headerCon acea-row row-between-wrapper">
					<view>
						<view class="name">推广人数</view>
						<view>
							<text class="num">{{ first + second }}</text>
							<text>人</text>
						</view>
					</view>
				</view>
			</view>
			<view class="nav acea-row row-around">
				<view class="item" :class="screen.grade == 0 ? 'on' : ''" @click="checkGrade(0)">
					一级({{ first }})
				</view>
				<view class="item" :class="screen.grade == 1 ? 'on' : ''" @click="checkGrade(1)">
					二级({{ second }})
				</view>
			</view>
			<view class="search acea-row row-between-wrapper">
				<form @submit.prevent="submitForm">
					<view class="input">
						<input placeholder="点击搜索会员名称" v-model="screen.keyword" />
						<text class="iconfont icon-guanbi"></text>
					</view>
				</form>
				<view class="iconfont icon-sousuo2"></view>
			</view>
		</view>
		<view class="list">
			<view class="sortNav acea-row row-middle" :class="fixedState === true ? 'on' : ''">
				<view class="sortItem" @click="sort('childCount')">
					团队排序
					<image src="@/static/images/sort1.png" v-if="childCount == 1" />
					<image src="@/static/images/sort2.png" v-if="childCount == 2" />
					<image src="@/static/images/sort3.png" v-if="childCount == 3" />
				</view>
				<view class="sortItem" @click="sort('numberCount')">
					金额排序
					<image src="@/static/images/sort1.png" v-if="numberCount == 1" />
					<image src="@/static/images/sort2.png" v-if="numberCount == 2" />
					<image src="@/static/images/sort3.png" v-if="numberCount == 3" />
				</view>
				<view class="sortItem" @click="sort('orderCount')">
					订单排序
					<image src="@/static/images/sort1.png" v-if="orderCount == 1" />
					<image src="@/static/images/sort2.png" v-if="orderCount == 2" />
					<image src="@/static/images/sort3.png" v-if="orderCount == 3" />
				</view>
			</view>
			<view :class="fixedState === true ? 'sortList' : ''">
				<view class="item acea-row row-between-wrapper" v-for="(val, spreadListIndex) in spreadList" :key="spreadListIndex">
					<view class="picTxt acea-row row-between-wrapper">
						<view class="pictrue">
							<image :src="val.avatar" />
						</view>
						<view class="text">
							<view class="name line1">{{ val.nickname }}</view>
							<view>加入时间: {{ val.time }}</view>
						</view>
					</view>
					<view class="right">
						<view>
							<text class="font-color-red">{{ val.childCount }}</text> 人
						</view>
						<view>{{ val.orderCount }} 单</view>
						<view>{{ val.numberCount ? val.numberCount : 0 }} 元</view>
					</view>
				</view>
			</view>
		</view>
		<Loading :loaded="loaded" :loading="loading"></Loading>
	</view>
</template>
<script>
	import {
		getSpreadUser
	} from "@/api/user";
	import Loading from "@/components/Loading";
	export default {
		name: "PromoterList",
		components: {
			Loading
		},
		props: {},
		data: function() {
			return {
				fixedState: false,
				screen: {
					page: 1,
					limit: 15,
					grade: 0,
					keyword: "",
					sort: ""
				},
				childCount: 2,
				numberCount: 2,
				orderCount: 2,
				loaded: false,
				loading: false,
				spreadList: [],
				loadTitle: "",
				first: "",
				second: ""
			};
		},
		mounted: function() {
			this.getSpreadUsers();
		},
		onReachBottom() {
			!this.loading && this.getSpreadUsers();
		},
		watch: {
			"screen.sort": function() {
				this.screen.page = 0;
				this.loaded = false;
				this.loading = false;
				this.spreadList = [];
				this.getSpreadUsers();
			}
		},
		methods: {
			handleScroll: function() {
				// var scrollTop =
				//   document.documentElement.scrollTop || document.body.scrollTop;
				// var offsetTop = document.querySelector(".header").clientHeight;
				// if (scrollTop >= offsetTop) {
				//   this.fixedState = true;
				// } else {
				//   this.fixedState = false;
				// }
			},
			submitForm: function() {
				this.screen.page = 0;
				this.loaded = false;
				this.loading = false;
				this.spreadList = [];
				this.getSpreadUsers();
			},
			getSpreadUsers: function() {
				let that = this,
					screen = that.screen;
				if (that.loaded || that.loading) return;
				that.loading = true;
				getSpreadUser(screen).then(
					res => {
						that.loading = false;
						that.spreadList.push.apply(that.spreadList, res.data.list);
						that.loaded = res.data.list.length < that.screen.limit; //判断所有数据是否加载完成；
						that.loadTitle = that.loaded ? "人家是有底线的" : "上拉加载更多";
						that.screen.page = that.screen.page + 1;
						that.first = res.data.total;
						that.second = res.data.totalLevel;
					},
					err => {
						uni.showToast({
				title: err.msg || err.response.data.msg,
				icon: 'none',
				duration: 2000
			});
					},
					300
				);
			},
			checkGrade: function(val) {
				if (val == this.screen.grade) return;
				else {
					this.screen.page = 1;
					this.screen.grade = val;
					this.loading = false;
					this.loaded = false;
					this.spreadList = [];
					this.getSpreadUsers();
				}
			},
			sort: function(types) {
				let that = this;
				switch (types) {
					case "childCount":
						if (that.childCount == 2) {
							that.childCount = 1;
							that.orderCount = 2;
							that.numberCount = 2;
							that.screen.sort = "childCount DESC";
						} else if (that.childCount == 1) {
							that.childCount = 3;
							that.orderCount = 2;
							that.numberCount = 2;
							that.screen.sort = "childCount ASC";
						} else if (that.childCount == 3) {
							that.childCount = 2;
							that.orderCount = 2;
							that.numberCount = 2;
							that.screen.sort = "";
						}
						break;
					case "numberCount":
						if (that.numberCount == 2) {
							that.numberCount = 1;
							that.orderCount = 2;
							that.childCount = 2;
							that.screen.sort = "numberCount DESC";
						} else if (that.numberCount == 1) {
							that.numberCount = 3;
							that.orderCount = 2;
							that.childCount = 2;
							that.screen.sort = "numberCount ASC";
						} else if (that.numberCount == 3) {
							that.numberCount = 2;
							that.orderCount = 2;
							that.childCount = 2;
							that.screen.sort = "";
						}
						break;
					case "orderCount":
						if (that.orderCount == 2) {
							that.orderCount = 1;
							that.numberCount = 2;
							that.childCount = 2;
							that.screen.sort = "orderCount DESC";
						} else if (that.orderCount == 1) {
							that.orderCount = 3;
							that.numberCount = 2;
							that.childCount = 2;
							that.screen.sort = "orderCount ASC";
						} else if (that.orderCount == 3) {
							that.orderCount = 2;
							that.numberCount = 2;
							that.childCount = 2;
							that.screen.sort = "";
						}
						break;
					default:
						that.screen.sort = "";
				}
			}
		}
	};
</script>
