<template>
	<view class="content">
		<block v-if="parentData">
			<view class="pages-back">
				<image :src="parentData.avatar ? parentData.avatar : 'https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/5641d82e94651198a0a2236f368ff9ba.png'" mode="aspectFill"></image>
			</view>
			<view class="pages-cont">
				<image class="pages-head" :src="parentData.avatar ? parentData.avatar : 'https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/5641d82e94651198a0a2236f368ff9ba.png'" mode="aspectFill"></image>
				<view class="pages-title">
					<view class="pages-name">
						{{parentData.nickname}}
					</view>
					<view class="pages-tel">
						{{mphone}}
					</view>
					<view class="pages-btn">
						<view class="pages-call" @click="clickCall">
							联系他
						</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 { Parent } from '@/apis/interfaces/user'
	export default {
		data() {
			return {
				parentData: '',  // 推荐人
				mphone    : ''   // 手机号
			};
		},
	    onShow() {
			// 获取接口信息
			this.parentInfo();
		},
		methods:{
			// 推荐人接口信息
			parentInfo() {
				Parent().then(res => {
					this.parentData = res
					if(res){
						this.mphone = res.username.substring(0, 3) + '****' + res.username.substring(7)
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 拨打电话
			clickCall () {
				uni.makePhoneCall({
					phoneNumber: this.parentData.username,//电话号码
					success: res => {
					},
					fail: err =>{
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 头像背景 */
	.pages-back{
	    position: fixed;
	    width: 100vw;
		height: 100vh;
	    opacity: .2;
	    background-color: #ffffff;
	}
	.pages-back image{
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	}
	.pages-back::after,
	.pages-back::before{
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    content: " ";
	    top: 0;
	    left: 0;
	}
	.pages-back::after{
	    background-image: linear-gradient(to top, #fff, rgba(255,255,255,.0));
	    z-index: 1;
	}
	.pages-back::before{
	    z-index: 2;
	    backdrop-filter: blur(15px);
	}
	
	.pages-cont {
		text-align: center;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-box-pack: center;
		position: absolute;
		width: 100%;
		height: 100%;
		.pages-head {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			margin: 0 auto;
			z-index: 4;
			border: 6rpx solid #eaeeff;
		}
		.pages-title {
			background-color: #ffffff;
			border-radius: $radius-m;
			box-sizing: border-box;
			width: 80%;
			margin: -100rpx auto 0;
			padding-top: 120rpx;
			box-sizing: border-box;
			position: relative;
			&::after,
			&::before {
				position: absolute;
				content: '';
				background-color: rgba(255, 255, 255, .9);
				left: 20rpx;
				border-radius: 0 0 $radius - 4 $radius - 4;
			}
			&::after {
				z-index: 2;
				width: calc(100% - 40rpx);
				left: 20rpx;
				bottom: -25rpx;
				height: 25px;
			}
			&::before {
				z-index: 1;
				width: calc(100% - 80rpx);
				left: 40rpx;
				bottom: -50rpx;
				height: 50rpx;
			}
			.pages-name {
				line-height: 60rpx;
				font-weight: 600;
				font-size: $title-size + 4;
			}
			.pages-tel {
				color: #999999;
			}
			.pages-btn {
				border-top: 2rpx solid #f1f1f1;
				text-align: center;
				margin-top: $margin + 20;
				padding: $padding + 10 0;
				.pages-call {
					display: inline-block;
					border: 2rpx solid $mian-color;
					color: $mian-color;
					border-radius: $radius * 4;
					padding: 0 $padding * 3;
					font-size: $title-size-lg;
					line-height: 74rpx;
				}
			}
		}
	}
</style>