<template>
	<view class="container">
		<view class="tabs">
			<u-tabs :list="tabs" @click="onChangeTab" :current="1" lineColor="#7f006f"></u-tabs>
		</view>
		<!-- 推广权益 -->
		<block v-if="currTab == 10">
			<view class="card">
				<view class="title">推广权益</view>
				<view class="content">
					<u-parse :content="plan.comments"></u-parse>
				</view>
			</view>
		</block>
		<!-- 推广列表 -->
		<block v-if="currTab == 20">
			<view class="search-wrapper">
				<uni-data-select v-model="where.gradeId" :localdata="grade" @change="onSearch"></uni-data-select>
			</view>
			<view class="user-list">
				<u-list :height="700" @scrolltolower="scrolltolower">
					<view class="list">
						<u-list-item v-for="(item, index) in list" :key="index">
							<u-cell :title="`${item.nickname}`" :label="`ID：${userIdPrefix}${item.userId}  粉丝：${item.id}`" isLink>
								<u-avatar slot="icon" size="50" :src="item.avatar"
									customStyle="margin: -3px 5px -3px 0"></u-avatar>
								<!-- <view solt="label">
									<text class="desc-text">{{ `ID：${item.userId}` }}</text>
									<text class="desc-text">{{ `粉丝：${item.id}` }}</text>
								</view> -->
								<view slot="right-icon" class="follow-btn" @click.stop="onFollow">
									<text>{{ item.gradeName }}</text>
								</view>
							</u-cell>
						</u-list-item>
						<u-empty v-if="list.length == 0" mode="search"
							icon="http://cdn.uviewui.com/uview/empty/search.png">
						</u-empty>
					</view>
				</u-list>
			</view>
		</block>
		<!-- 我的团队 -->
		<block v-if="currTab == 30">
			<view class="user-list">
				<u-list :height="700" @scrolltolower="scrolltolower">
					<view class="list">
						<u-list-item v-for="(item, index) in list" :key="index">
							<u-cell :title="`${item.nickname}`" :label="`ID：${userIdPrefix}${item.userId}  粉丝：${item.id}`" isLink>
								<u-avatar slot="icon" size="50" :src="item.avatar"
									customStyle="margin: -3px 5px -3px 0"></u-avatar>
								<!-- <view solt="label">
									<text class="desc-text">{{ `ID：${item.userId}` }}</text>
									<text class="desc-text">{{ `粉丝：${item.id}` }}</text>
								</view> -->
								<view slot="right-icon" class="follow-btn" @click.stop="onFollow">
									<text>{{ item.gradeName }}</text>
								</view>
							</u-cell>
						</u-list-item>
						<u-empty v-if="list.length == 0" mode="search"
							icon="http://cdn.uviewui.com/uview/empty/search.png">
						</u-empty>
					</view>
				</u-list>
			</view>
		</block>
	</view>
</template>

<script>
	import * as UserRefereeApi from '@/api/user-referee.js'
	import * as UserPlanApi from '@/api/love-user-plan.js'
	import * as MerchantApi from '@/api/merchant.js'

	import {
		username,
		userIdPrefix
	} from '@/config.js';

	const userId = uni.getStorageSync('userId')

	// tab栏数据
	const tabs = [{
		name: `推广权益`,
		value: 10
	}, {
		name: `推广列表`,
		value: 20
	}, {
		name: `我的团队`,
		value: 30
	}]

	export default {
		data() {
			return {
				userIdPrefix,
				tabs,
				currTab: 20,
				planId: 0,
				plan: null,
				// 会员类型
				grade: [{
						value: 2,
						text: '注册用户'
					},
					{
						value: 3,
						text: '普通会员'
					},
					{
						value: 4,
						text: '尊享会员'
					},
					{
						value: 7,
						text: '线上门店'
					},
					{
						value: 8,
						text: '门店合伙人'
					},
					{
						value: 9,
						text: '门店运营总监'
					},
					{
						value: 10,
						text: '实体门店'
					},
					{
						value: 11,
						text: '旗舰店'
					},
					{
						value: 12,
						text: '区县级运营中心'
					},
					{
						value: 13,
						text: '市级运营中心'
					},
					{
						value: 14,
						text: '省级运营中心'
					}
				],
				// 会员列表
				list: [],
				where: {},
				page: 0,
				// 控制onShow事件是否刷新订单列表
				canReset: false,
				disabled: false
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.planId = options.id
			this.getPlan()
			this.list = []
			this.onRefreshList()
		},

		methods: {
			getPlan() {
				const app = this
				const {
					planId
				} = this
				UserPlanApi.getUserPlan(planId).then(res => {
					app.plan = res.data
				})
			},
			getMerchant() {
				const app = this
				MerchantApi.listMerchant({
					userId
				}).then(result => {
					let arr = []
					app.merchantList = []
					result.data.map(d => {
						arr.push({
							label: d.merchantName,
							id: d.merchantId,
							code: d.merchantCode
						})
					})
					app.merchantList.push(arr)
				})
			},
			// 刷新会员列表
			onRefreshList() {
				const app = this
				app.where.page = app.page
				app.where.dealerId = userId
				return new Promise((resolve, reject) => {
					UserRefereeApi.pageUserReferee(app.where)
						.then(result => {
							const list = result.data.list
							// 合并新数据
							app.list = app.list.concat(list)
							if (result.data.count > app.list.length) {
								app.canReset = true
							} else {
								app.canReset = false
							}
							resolve(list)
						})
				})
			},
			scrolltolower(e) {
				console.log("e: ", e);
			},
			navTo(url, userId) {
				this.$push(url, userId)
			},
			onFollow(e) {
				console.log("e11: ", e);
			},
			onSearch() {
				this.list = []
				this.where.page = 1
				this.onRefreshList()
			},
			onChangeTab(e) {
				const app = this
				app.currTab = e.value
				if (e.value == 10) {

				}
				if (e.value == 20) {
					app.list = []
					app.where.gradeStart = undefined
					app.where.gradeEnd = undefined
					app.onRefreshList()
				}
				if (e.value == 30) {
					app.list = []
					app.where.gradeStart = 7
					app.where.gradeEnd = 14
					app.onRefreshList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0rpx;
		background-color: #f3f3f3;
		height: 90vh;
	}

	.user-list {
		width: 700rpx;
		margin: 20rpx auto;
		padding: 10rpx 0;
		border-radius: 20rpx;
		background-color: #ffffff;

		.desc-text {
			margin-right: 50rpx;
		}
	}

	.follow-btn {
		padding: 4rpx 20rpx;
		color: #ffffff;
		font-size: 26rpx;
		border-radius: 50rpx;
		margin-right: 10rpx;
		background: linear-gradient(#47076b, #8d1a50);

		image {
			width: 24rpx;
			height: 66rpx;
			margin-right: 6rpx;
		}
	}

	.search-wrapper{
		width: 250rpx;
		padding: 0 20rpx;
	}

	.tabs {
		width: 700rpx;
		margin: auto;
		display: flex;
		justify-content: center;
	}

	.card {
		width: 700rpx;
		min-height: 500rpx;
		margin: 20rpx auto;
		padding: 10rpx 0;
		background-color: #ffffff;
		border-radius: 20rpx;

		.title {
			width: 640rpx;
			margin: 10rpx auto;
			line-height: 3rem;
			border-bottom: 2rpx solid #f3f3f3;
		}

		.content {
			width: 640rpx;
			margin: 10rpx auto;
			line-height: 2rem;
			color: #666666;
		}
	}
</style>
