<template>
	<view>
		<view class="user-info">
			<block v-if="isAuth">
				<view class="user-info-left">
					<u-avatar
						shape="square"
						class="active"
						size="120rpx"
						:default-url="require('@/static/imgs/default-active.png')"
						:src="avatar"
						mode="aspectFill"
						@click="onNav('UserInfo')"
					></u-avatar>
					<view class="nickname nowrap" @click="onNav('UserInfo')">{{nickname}}</view>
					<view class="tags">
						<view class="tags-item" v-if="certification"><image class="tags-icon" src="@/static/icons/Identity_icon.png" mode="widthFix"></image>实名认证</view>
						<view class="tags-item">{{identity.name}}</view>
					</view>
					<view class="state">
						<view class="state-tag"><u-icon class="state-icon" size="28rpx" color="#555" name="plus"></u-icon>状态</view>
					</view>
				</view>
				<view class="user-info-right" @click="onUserCode">
					<image class="user-qrcode" src="@/static/icons/qrcode.png" mode="widthFix"></image>
				</view>
			</block>
			<block v-else>
				<view class="user-info-left">
					<u-avatar
						shape="square"
						class="active"
						size="120rpx"
						:default-url="require('@/static/imgs/default-active.png')"
						mode="aspectFill"
						@click="onNav('UserInfo')"
					></u-avatar>
					<view class="nickname nowrap" @click="onNav('UserInfo')">登录</view>
					<view class="tags">暂未登录</view>
				</view>
				<view class="user-info-right">
					<image class="user-qrcode" src="@/static/icons/qrcode.png" mode="widthFix"></image>
				</view>
			</block>
		</view>
		<view class="border-solid-empty"></view>
		<view class="nav-flex" @click="onNav('AccountIntegral')">
			<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_00.png"></image>火力值</view>
			<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
		</view>
		<view class="nav-flex" @click="onNav('AccountCash')">
			<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_01.png"></image>业绩账户</view>
			<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
		</view>
		<view class="border-solid-empty"></view>
		<view class="nav-flex" @click="onNav('UserTeam')">
			<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_02.png"></image>我的客户</view>
			<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
		</view>
		<view class="nav-flex" @click="onNav('AccountBonus')">
			<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_04.png"></image>奖金账户</view>
			<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
		</view>
		<view class="nav-flex" @click="onNav('UserCertification')">
			<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_03.png"></image>实名认证</view>
			<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
		</view>
		<view class="nav-flex" @click="onParent">
			<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_07.png"></image>推荐人</view>
			<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
		</view>
		<view class="nav-flex" @click="onNav('WeChat')">
			<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_06.png"></image>关注公众号</view>
			<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
		</view>
		<view class="border-solid-empty"></view>
		<view class="nav-flex" @click="onNav('UserSet')">
			<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_05.png"></image>设置</view>
			<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
		</view>
		<!-- 绑定分享关系 -->
		<u-modal
			:show="showBind"
			confirmColor="#446EFE"
			:showCancelButton="true"
			:confirmText="isInvitation ? '校验邀请码': '绑定关系'"
			@cancel="()=> {
				this.showBind 		= false
				this.isInvitation 	= true
				this.invitation 	= ''
			}"
			@confirm="onBind"
		>
			<slot>
				<view class="bind-view" v-if="isInvitation">
					<view class="bind-title">绑定推荐人</view>
					<view class="bind-subtitle">选择通过那种方式绑定推荐人</view>
					<view class="bind-type">
						<u-radio-group
							class="bind-type-radios"
						    v-model="bindTypeVal"
						    placement="row"
						>
						    <u-radio
								:customStyle="{marginLeft: '4px', marginRight: '4px'}"
								v-for="(item, index) in bindTypeArr"
								:key="index"
								:label="item.name"
								:name="item.value"
						    />
						</u-radio-group>
					</view>
					<view class="bind-input">
						<input type="text" v-model="invitation" :placeholder="bindTypeVal == 'mobile'? '输入推荐人手机号' : '输入推荐人邀请码'">
					</view>
				</view>
				<view class="bind-user" v-else>
					<view class="bind-title">推荐人</view>
					<view class="bind-subtitle">请确认绑定推荐人关系用户信息</view>
					<view class="bind-acitve">
						<image :src="invitationUser.avatar || require('@/static/imgs/default-active.png')" mode="aspectFill"></image>
					</view>
					<view class="bind-nickname">{{invitationUser.nickname}}</view>
					<view class="bind-username">{{invitationUser.username}}</view>
				</view>
			</slot>
		</u-modal>
	</view>
</template>

<script>
	import { info,relationsVerify, relationsBind } from '@/apis/interfaces/user.js'
	export default {
		data() {
			return {
				isAuth			: false,
				nickname		: '',
				identity		: '',
				avatar			: '',
				certification	: '',
				// 绑定关系
				bindTypeArr		: [
					{ name: '手机号', value: 'mobile'},
					{ name: '邀请码', value: 'verify'},
				],
				bindTypeVal		: 'mobile',
				showBind		: false,
				isInvitation	: true,
				parent			: '',
				invitationUser	: {
					avatar	: '',
					nickname: '',
					username: ''
				},
				invitation		: '',
			};
		},
		onShow() {
			this.isAuth = this.$store.getters.getToken != ''
			if(this.$store.getters.getToken != '') this.getUserInfo()
		},
		methods: {
			// 获取用户信息
			getUserInfo(){
				uni.showLoading({
					title: '加载中...'
				})
				info().then(res => {
					let { nickname, identity, avatar,  certification, parent } = res
					this.nickname = nickname
					this.identity = identity
					this.avatar = avatar
					this.certification = certification
					this.parent = parent
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 导航
			onNav(name){
				this.$Router.push({name})
			},
			// 推荐关系
			onParent(){
				if(this.parent == ''){
					this.showBind = true
					return
				}
				uni.showModal({
					title  		: '我的推荐人',
					content		: this.parent.nickname,
					confirmText	: '关闭',
					cancelText	: '联系TA',
					success		: modalRes => {
						if(modalRes.cancel){
							uni.makePhoneCall({
								phoneNumber: this.parent.username
							})
						}
					}
				})
			},
			// 绑定邀请码
			onBind(){
				// 检验邀请码
				if(this.isInvitation){
					if(this.invitation === ''){
						uni.showToast({
							title: '请输入邀请码',
							icon : 'none'
						})
						return
					}
					relationsVerify(this.invitation, this.bindTypeVal).then(res => {
						this.invitationUser = res
						this.isInvitation = false
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon : 'none'
						})
					})
					return
				}
				// 绑定关系
				relationsBind(this.invitation, this.bindTypeVal).then(res => {
					this.showBind = false
					uni.showModal({
						title		: '提示',
						content		: '关系绑定成功',
						showCancel	: false,
						success		: res => {
							this.getUserInfo()
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 分享码
			onUserCode(){
				if(this.identity.order > 1){
					uni.showActionSheet({
						itemList: ['客户邀请码', '业务员邀请码'],
						success: res => {
							switch (res.tapIndex){
								case 0:
									this.$Router.push({ name: 'UserCode' })
									break;
								case 1:
									this.$Router.push({ name: 'SalesmanCode' })
									break;
							}
						}
					})
					// 
					return
				}
				uni.showModal({
					title		: '提示',
					content		: '您当前非业务员身份无法分享',
					cancelColor	: '确定',
					cancelColor : '#555',
					confirmText : '立即开通',
					confirmColor: '#446EFE',
					success		: res => {
						if(res.confirm){
							this.$Router.pushTab({name: 'Work'})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.nav-flex{
		height: 120rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 34rpx;
		.nav-icon{
			display: flex;
			align-items: center;
			.nav-icon-src{
				width: 48rpx;
				height: 48rpx;
				vertical-align: middle;
				margin-right: $margin;
				margin-top: 5rpx;
			}
		}
	}
	// 用户信息
	.user-info{
		padding: 50rpx $padding;
		display: flex;
		&-left{
			padding-left: 140rpx;
			position: relative;
			width: calc(100% - 150rpx);
			.active{
				position: absolute;
				left: 0;
				top:0;
				border-radius: $radius;
				overflow: hidden;
			}
			.nickname{
				font-size: 42rpx;
				line-height: 50rpx;
				font-weight: bold;
			}
			.tags{
				padding-top: 20rpx;
				.tags-item{
					@extend .border;
					display: inline-block;
					border-radius: 20rpx;
					padding: 0 15rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					height: 40rpx;
					color: #555;
					font-weight: 400;
					margin-left: $margin - 10;
					&::after{
						border-radius: 20rpx;
					}
					&:first-child{
						margin-left: 0;
					}
					.tags-icon{
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
						margin-right: 5rpx;
						margin-bottom: 6rpx;
					}
				}
			}
			.state{
				padding-top: 20rpx;
				.state-tag{
					@extend .border;
					display: inline-block;
					border-radius: 30rpx;
					padding: 0 20rpx;
					font-size: 30rpx;
					line-height: 50rpx;
					height: 50rpx;
					color: #555;
					font-weight: 400;
					&::after{
						border-radius: 50rpx;
					}
					.state-icon{
						display: inline-block;
						margin-right: 5rpx;
					}
				}
			}
		}
		&-right{
			width: 150rpx;
			height: 100rpx;
			line-height: 100rpx;
			position: relative;
			text-align: center;
			&::after {
			    content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 1rpx;
				height: 100%;
				background-image: linear-gradient(90deg, $border-color 50%, transparent 50%);
			}
			.user-qrcode{
				width: 48rpx;
				height: 48rpx;
				vertical-align: middle;
			}
		}
	}
	// 邀请码
	.bind-view{
		padding: 15rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		.bind-title{
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
		}
		.bind-type{
			margin-top: 30rpx;
			.bind-type-radios{
				justify-content: center;
			}
		}
		.bind-subtitle{
			line-height: 40rpx;
			font-size: 28rpx;
			color: gray;
			padding-top: 15rpx;
			text-align: center;
		}
		.bind-input{
			padding-top: 30rpx;
			input{
				background: #f8f8f8;
				width: 100%;
				height: 80rpx;
				padding: 0 30rpx;
				border-radius: 40rpx;
				text-align: center;
				box-sizing: border-box;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	// 确认绑定用户关系
	.bind-user{
		padding: 15rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		.bind-title{
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
		}
		.bind-subtitle{
			line-height: 40rpx;
			font-size: 28rpx;
			color: gray;
			padding-top: 15rpx;
			text-align: center;
		}
		.bind-acitve{
			text-align: center;
			padding-top: 30rpx;
			image{
				width: 108rpx;
				height: 108rpx;
				background: #f8f8f8;
				border-radius: 50%;
			}
		}
		.bind-nickname{
			text-align: center;
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			line-height: 40rpx;
			padding-top: 20rpx;
		}
		.bind-username{
			text-align: center;
			font-weight: bold;
			font-size: 28rpx;
			color: gray;
		}
	}
</style>
