<template>
	<view class="xkl-com-bg">
		<!-- <view style="height: 20rpx;"></view>
		<view class="u-flex" style="padding: 20rpx;background-color: #ffffff;padding: 20rpx;border-radius: 10rpx;">
			<view style="width: 160rpx;font-size: 30rpx;">日期选择</view>
			<view @click="screen.showcalendar = true" style="color: #232323;">
				<text v-if="search.start_date">{{search.start_date}} - {{search.end_date}}</text>
				<text v-else>请选择日期</text>
			</view>
		</view>
		<view style="height: 20rpx;"></view>
		<view style="background-color: #ffffff;padding: 20rpx;">
			<u-grid :border="false" :col="4" style="background-color: #ffffff; border-radius: 10rpx;">
				<u-grid-item :customStyle="{padding:'20rpx 0'}">
					<view>{{total}}</view>
					<view style="height: 10rpx;"></view>
					<text class="grid-text-mini">直推人数</text>
				</u-grid-item>
				<u-grid-item :customStyle="{padding:'20rpx 0'}">
					<view>{{total}}</view>
					<view style="height: 10rpx;"></view>
					<text class="grid-text-mini">团队人数</text>
				</u-grid-item>
				<u-grid-item :customStyle="{padding:'20rpx 0'}">
					<view>{{total}}</view>
					<view style="height: 10rpx;"></view>
					<text class="grid-text-mini">直推充电桩</text>
				</u-grid-item>
				<u-grid-item :customStyle="{padding:'20rpx 0'}">
					<view>{{total}}</view>
					<view style="height: 10rpx;"></view>
					<text class="grid-text-mini">团队充电桩</text>
				</u-grid-item>
			</u-grid>
		</view> -->
		<view style="height: 20rpx;"></view>
		<view style="background-color: #ffffff;padding: 20rpx;">邀请人数：{{total}}</view>
		<view style="height: 20rpx;"></view>
		<view>
			<!-- navigator -->
			<!-- :url="`/pages/team/detail?team_shop_id=${item.id}`" -->
			<view  v-for="(item,index) in teamItems"
				:key="index"
				style="background-color: #ffffff;border-radius: 10rpx;padding: 30rpx;margin-bottom: 20rpx; font-size: 30rpx;">
				<view class="u-flex u-flex-y-center">
					<u--image width="100rpx" height="100rpx" :src="item.avatar_url"
						shape="circle">
					</u--image>
					<view style="width: 20rpx;"></view>
					<view>
						<view>{{item.nickname}}</view>
						<view style="height: 10rpx;"></view>
						<view>{{item.username}}</view>
					</view>
				</view>
				<u-divider></u-divider>
				<view class="u-flex u-flex-between">
					<view>
						<view>手机号：{{item.mobile}}</view>
						<view style="height: 10rpx;"></view>
						<!-- <view>等级：v{{item.vip}}</view> -->
						<view>等级：***</view>
					</view>
					<view style="width: 20rpx;"></view>
					<view>
						<!-- <view>余额：￥{{item.money}}</view> -->
						<!-- <view style="height: 10rpx;"></view> -->
						<view>自购：{{item.device_num}}</view>
					</view>
				</view>
				<view style="height: 16rpx;"></view>
				<view>注册时间：{{item.created_at}}</view>
			</view>
		</view>

		<u-loadmore :status="loadStatus" />

		<u-calendar :show="screen.showcalendar" minDate="2024-02-01" mode="range" @confirm="confirmcalendar"
			@close="screen.showcalendar = false" :showTitle="false" :defaultDate="[]"></u-calendar>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	let self;
	export default {
		data() {
			return {
				screen: {
					showcalendar: false,
				},
				teamItems: [],
				loadStatus: 'loadmore',
				total: 0,
				page: {
					current: 0,
					last_page: 1,
					page: 1,
				},
				search: {
					level: 1,
					page: 1,
					start_date: '',
					end_date: '',
				},
			}
		},
		onLoad() {
			self = this;
			self.getShopTeam();
		},
		onReachBottom() {
			if (!self.pageStatus()) {
				return;
			}
			self.loadStatus = 'loading';
			self.search.page += 1;
			self.getShopTeam();
		},
		async onPullDownRefresh() {
			self.search.page = 1;
			self.teamItems = [];
			await self.getShopTeam();
			uni.stopPullDownRefresh();
		},
		methods: {
			confirmcalendar(e) {
				self.search.start_date = e[0];
				self.search.end_date = e[e.length - 1];
				self.screen.showcalendar = false;
			},
			pageStatus() {
				self.loadStatus = 'loadmore';
				if (self.search.page >= self.page.last_page) {
					self.loadStatus = 'nomore';
					return false;
				}
				return true;
			},
			getShopTeam() {
				self.$http.get('/shop/v10/user/team', self.search).then(({
					data,
					success
				}) => {
					self.teamItems = self.teamItems.concat(data.data);
					self.page.last_page = data.last_page;
					self.total = data.total;
					self.pageStatus();

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.xkl-com-bg{
		min-height: 100vh;
	}
</style>