<template>
	<view class="content">
		<block v-if="refereeArr.length > 0">
			<view class="top">
				<view class="top-name">
					我的伙伴（{{refereeCount}}人）
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in refereeArr" :key="index">
					<image class="item-head" :src="item.avatar ? item.avatar : 'https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/5641d82e94651198a0a2236f368ff9ba.png'" mode="aspectFill"></image>
					<view class="item-cont">
						<view class="item-left">
							<view class="item-top">
								<view class="item-name">
									{{item.nickname}}
								</view>
								<view class="item-sex">
									<image src="/static/icon/man.png" mode="aspectFill"></image>
								</view>
							</view>
							<view class="item-identity" v-if="item.identity">
								抖火法律-{{item.identity.name}}
							</view>
						</view>
						<view class="item-right" @click="clickCall(item.username)">
							联系
						</view>
					</view>
				</view>
			</view>
		</block>
		<view class="pack-center pages-hint" v-else>
			<image src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/7ad417d0c215db601b8e1bead05c3a5e.png" mode="aspectFill"></image>
			<view class="pages-hint-text">
				暂无推荐人
			</view>
		</view>
	</view>
</template>

<script>
	import { Relations } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
				refereeCount: '',  // 数量
    			refereeArr  : '',  // 我的伙伴
    		};
    	},
        onShow() {
			// 获取接口信息
			this.refereeInfo();
		},
		methods:{
			// 我的伙伴接口信息
			refereeInfo() {
				Relations().then(res => {
					this.refereeCount = res.count.one
					this.refereeArr   = res.users
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 拨打电话
			clickCall (tel) {
				uni.makePhoneCall({
					phoneNumber: tel,//电话号码
					success: res => {
					},
					fail: err =>{
					}
				})
			}
		}
    }
</script>

<style lang="scss" scoped>
	.top {
		background-color: #ffffff;
		position: fixed;
		width: 100%;
		line-height: 100rpx;
		height: 100rpx;
		top: 0;
		left: 0;
		z-index: 2;
		padding: 0 $padding;
		box-sizing: border-box;
		.top-name {
			position: relative;
			font-weight: 600;
			font-size: $title-size + 4;
			&::after {
				position: absolute;
				content: '';
				left: 30rpx;
				bottom: 0;
				width: 40rpx;
				height: 8rpx;
				border-radius: $radius;
				background-color: #5370eb;
			}
		}
	}
	
	.list {
		padding-top: 100rpx;
		.item {
			padding: $padding;
			box-sizing: border-box;
			position: relative;
			&:nth-child(odd){
				background-color: #fafcfb;
			}
			.item-head {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
			.item-cont {
				position: absolute;
				left: 0;
				top: 0;
				padding: $padding $padding $padding $padding + 130rpx;
				box-sizing: border-box;
				width: 100%;
				display: flex;
				.item-left {
					flex: 1;
					line-height: 54rpx;
					.item-top {
						display: flex;
						.item-name {
							font-weight: 600;
							margin-right: $margin - 10;
						}
						.item-sex {
							background-color: #e5f8ff;
							border-radius: $radius * 3;
							height: 38rpx;
							line-height: 38rpx;
							padding: 0 20rpx;
							margin-top: 10rpx;
							image {
								width: 24rpx;
								height: 24rpx;
							}
							&.active {
								background-color: #fff1fa;
							}
						}
					}
					.item-identity {
						font-size: $title-size-m;
						color: #8282a7;
					}
				}
				.item-right {
					display: inline-block;
					font-size: $title-size-m;
					background-color: #edf4ff;
					color: #5370eb;
					height: 64rpx;
					line-height: 64rpx;
					padding: 0 $padding;
					border-radius: $radius * 4;
					margin-top: $margin - 5;
				}
			}
		}
	}
</style>