<template>
	<view class="content">
		<view class="total">
			<uni-icons type="staff" size="50" color="white"></uni-icons>
			<view class="total-user">
				<view class="total-number">{{count.one}}人</view>
				<view class="total-title">客户总人数</view>
			</view>
		</view>
		
		<block v-if="users.length > 0">
			<view class="team-item" v-for="(item, index) in users" :key="index" @click="onCallPhone(item.real_username)">
				<u-avatar :src="item.avatar" size="48"></u-avatar>
				<view class="team-content">
					<view class="nowrap name">{{item.nickname}}</view>
					<view class="nowrap identitys">
						<text class="identity certification-y" v-if="item.certification"><image src="@/static/icons/user_nav_03.png"></image>已实名</text>
						<text class="identity identity-2" v-if="item.identity.order == 2">实习顾问</text>
						<text class="identity identity-1" v-if="item.identity.order == 1">普通用户</text>
						<text class="identity identity-3" v-if="item.identity.order == 3">顾问</text>
					</view>
					<view class="nowrap submit">联系电话：{{item.username}}</view>
					<view class="nowrap submit">注册时间：{{item.created_at}}</view>
				</view>
				<view class="mobile">
					<uni-icons class="mobile-icon" type="phone-filled" size="18" color="white"></uni-icons>
				</view>
			</view>
			<!-- 分页 -->
			<u-loadmore v-if="pagesShow" :status="status" />
		</block>
		<block v-else>
			<view class="list-null">
				<u-empty
					mode="data"
					icon="http://cdn.uviewui.com/uview/empty/data.png"
					text="暂无客户数据"
				>
				</u-empty>
			</view>
		</block>
	</view>
</template>

<script>
	import { relations } from '@/apis/interfaces/user.js'
	export default {
		data() {
			return {
				users		: [],
				count		: {
					all: 0
				},
				// 分页
				page		: {
					current	: 1,
					has_more: false,
				},
				pagesShow	: false,
				status	 	: false,
			};
		},
		created() {
			this.getList()
		},
		methods: {
			getList(){
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				relations({
					larer : 1,
					page  : this.page.current
				}).then(res => {
					let { users, count } = res;
					let atList   	= users.page.current == 1 ? [] : this.users
					this.count 		= count
					this.users 		= atList.concat(users.data)
					this.page		= users.page
					this.pagesShow 	= false
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			onCallPhone(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		},
		onReachBottom() {
			this.pagesShow = true;
			if(this.page.has_more){
				this.status    = 'loading';
				this.page.current++
				this.getList()
				return
			}
			this.status    = 'nomore';
		}
	}
</script>

<style lang="scss">
	.content{
		box-sizing: border-box;
		background: white;
	}
	// 统计数据
	.total{
		margin: 30rpx;
		background: linear-gradient(to top left, #446EFE, #0f36bb);
		box-shadow: 10rpx 0 15rpx 15rpx rgba(0, 0, 0, .03);
		border-radius: 20rpx;
		padding: 50rpx;
		color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.total-title{
			font-size: 28rpx;
			opacity: .8;
			padding-top: 10rpx;
		}
		.total-number{
			text-align: right;
			font-weight: bold;
		}
	}
	
	// 团队列表
	.team-item{
		background: white;
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		border-radius: 20rpx;
		margin: 0 30rpx 30rpx 30rpx;
		box-shadow: 10rpx 0 15rpx 15rpx rgba(0, 0, 0, .03);
		position: relative;
		overflow: hidden;
		&::after{
			width: 30rpx;
			height: 30rpx;
			border-radius: 15rpx;
			background: linear-gradient(to top left, #446EFE, #0f36bb);
			position: absolute;
			left: -15rpx;
			top: 30rpx;
			content: " ";
		}
		.team-content{
			width: calc( 100% - 48px - 100rpx );
			padding-left: 30rpx;
			box-sizing: border-box;
			.name{
				font-weight: bold;
				font-size: 34rpx;
			}
			.submit{
				line-height: 40rpx;
				font-size: 26rpx;
				color: gray;
			}
			.identitys{
				margin-bottom: 10rpx;
				.identity{
					font-size: 24rpx;
					border-radius: 15rpx;
					line-height: 30rpx;
					padding: 0 10rpx;
					color: white;
					margin-right: 20rpx;
					&.identity-2{
						background: #443DE2;
					}
					&.identity-1{
						background: #e1e1e1;
					}
					&.identity-3{
						background: #FEAD45;
					}
					&.certification-y{
						background: #FFF7EC;
						border-color: #FEAD45;
						color: #FEAD45;
						image{
							width: 32rpx;
							height: 32rpx;
							vertical-align: middle;
							margin-bottom: 5rpx;
						}
					}
				}
			}
		}
		.mobile{
			width: 100rpx;
			border-radius: 35rpx;
			margin-top: 9px;
			height: 30px;
			line-height: 30px;
			color: white;
			background: #446EFE;
			text-align: center;
			.mobile-icon{
				display: inline-block;
			}
		}
	}
</style>
