<template>
	<view class="container">
		<!-- 头部信息 -->
		<view class="basicInfoBox">
			<view class="avatar">
				<image :src="customerBasicInfo.headPicture" alt="" srcset="" mode="widthFix"></image>
			</view>
			<view class="infoBox">
				<view class="firstLineBox">
					<view>
						<strong>{{customerBasicInfo.realName}}</strong>
						<text class="csTag">{{customerBasicInfo.partnerType}}</text>
					</view>
					<view class="personalInfoBtn" @click="userinfo()">
						<text>个人资料</text>
						<i class="iconfont icon-bianji"></i>
					</view>
				</view>
				<view>昵称：{{customerBasicInfo.nickName}}</view>
				<view>{{customerBasicInfo.nickName}}</view>
			</view>
		</view>
		<!-- 主要菜单 -->
		<view class="mainMenuBox">
			<view class="item" v-for="mainMenu in mainMenuLists" :key="mainMenu.id">
				<h4>{{mainMenu.categoryName}}</h4>
				<view class="menuItemBox">
					<view class="mainMenuItem" v-for="menuItem in mainMenu.children.filter(v=>v.isShow)" :key="menuItem.title" @click="goDetail(menuItem)">
						<image :src="'/static/moduleIcon/'+menuItem.icon+'.png'" alt="" srcset="" mode="widthFix"></image>
						<text>{{menuItem.title}}</text>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 个人信息 -->
		<view class="personalInfo">
			<view class="ulBox">
				<view v-for="item in minorMenuLists.filter(v=>v.isShow)" :key="item.title" @click="goDetail(item)" class="liBox">
					<view class="infoBox">
						<image :src="'/static/moduleIcon/'+item.icon+'.png'" alt="" srcset="" mode="widthFix"></image>
						<text>{{item.title}}</text>
					</view>
					<view class="iconBox">
						<i class="iconfont icon-youjiantou"></i>
					</view>
				</view>
			</view>
		</view>
		<tabBar :currentPage="currentPage"></tabBar>
		<!-- 我的邀请码 -->
		<view class="inviteQrcodeContainer">
			<uni-popup ref="popup1" background-color="#fff">
				<view class="popup1-content">
					<view class="title">
						<text></text>
						<text>我的邀请码</text>
						<i class="iconfont icon-guanbi" @click="closePopup()"></i>
					</view>
					<view class="content">
						<view class="contentBox">
							<h3>{{inviteEqrode}}</h3>
						</view>
						<view class="confirmBtn" @click="copy()">
							一键复制
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import common from "../../common/common";
	import tabBar from '../../components/tabBar/tabBar.vue';
	import api from "@/api/api";
	export default {
		data() {
			return {
				userId:'1',
				inviteEqrode:'',
				currentPage:'personalCenter',
				customerBasicInfo:{},
				mainMenuLists:[
					{id:'00',categoryName:'销售管理',
						children:[
							{title:'销售课程',icon:'salesCourse',link:'/pages/saleCourseLists/saleCourseLists',isOpen:true,isShow:true},
							{title:'销售保单',icon:'salesOrder',link:'',isOpen:true,isShow:false},
							{title:'我的售后',icon:'afterSales',link:'/pages/afterSales/afterSales',isOpen:true,isShow:true}
						],
					},
					{id:'01',categoryName:'积分管理',
						children:[
							{title:'我的积分',icon:'integral',link:'/pages/myPoints/myPoints',isOpen:true,isShow:true},
							{title:'积分兑换',icon:'integralShopping',link:'/pages/pointsExchange/pointsExchange',isOpen:true,isShow:true}
						],
					},
					{id:'02',categoryName:'活动管理',
						children:[
							{title:'我的学习',icon:'myLearning',link:'/pages/myLearning/myLearning',isOpen:true,isShow:true},
							{title:'学习认证',icon:'learningCertify',link:'/pages/learnCertify/learnCertify',isOpen:true,isShow:true},
							{title:'我的分享',icon:'share',link:'/pages/myShare/myShare',isOpen:true,isShow:true}
						],
					},
					{id:'03',categoryName:'人员管理',
						children:[
							{title:'成交客户',icon:'dealCustomer',link:'',isOpen:true,isShow:false},
							{title:'申请加盟',icon:'applyJoin',link:'/pages/application-process/basic-info',isOpen:true,isShow:true}
						],
					},
					{id:'04',categoryName:'团队管理',
						children:[
							{title:'我的团队',icon:'team',link:'/pages/personalCenter/myTeam',isOpen:true,isShow:true},
							{title:'邀请加盟',icon:'shareJoin',link:'/pages/inviteJoin/inviteJoin',isOpen:true,isShow:true}
						],
					}
				],
				minorMenuLists:[
					{title:'我的邀请码',icon:'shareEcode',link:'',isOpen:true,isShow:true},
					{title:'我的卡包',icon:'card',link:'',isOpen:true,isShow:false},
					{title:'我的认证',icon:'myCertify',link:'/pages/myCertify/myCertify',isOpen:true,isShow:true},
					{title:'申请修改公司周边',icon:'setting',link:'',isOpen:true,isShow:false},
					{title:'我的消息',icon:'message',link:'/pages/systemMsg/system_msg',isOpen:true,isShow:true},
					{title:'系统设置',icon:'setting',link:'/pages/personalCenter/system/settings',isOpen:true,isShow:true}
				]
				
			}
		},
		components:{
			tabBar
		},
		onShow() {
			uni.$on("handClick", res => {
				this.customerBasicInfo = res.data
				// 清除监听
				uni.$off('handClick');
			})
		},
		methods: {
			updateData(val){
				console.log('我来修改一些数据')
			},
			// 菜单跳转页面
			goDetail(item){
				if(item.isShow && item.isOpen){
					if(item.title==='我的邀请码'){
						this.$refs.popup1.open('bottom');
					}else{
						uni.navigateTo({
							url: item.link
						});
					}
				}else{
					common.errorDialog(2,'该模块正在开发中，敬请期待！','提示');
				}
			},
			userinfo(){
				uni.navigateTo({
					url:`/pages/personalCenter/user-information?customerBasicInfo=` + JSON.stringify(this.customerBasicInfo)
				})
			},
			// 弹窗
			errorDialog(type,content){
				common.errorDialog(type,content);
				return false;
			},
			closePopup(){
				this.$refs.popup1.close()
			},
			copy(){
				uni.setClipboardData({
					data: this.inviteEqrode,
					success: function () {
						console.log('success');
					}
				});
			},
			// 查询个人资料
			queryInfo(){
				api.queryInfo({userId:this.userId}).then(res=>{
					if(res['success']){
						this.customerBasicInfo = res['data'];
						this.inviteEqrode = this.customerBasicInfo.invitationCode;
					}else{
						uni.showToast({
							title: res['message'],
							duration: 2000
						});
					}
				})
			}
		},
		onLoad() {
			this.queryInfo();
		}
	}
</script>

<style lang="scss">
	.container{
		padding-bottom: 160rpx;
	}
	.basicInfoBox{
		display: flex;
		padding: 67rpx 20rpx 60rpx 28rpx;
		background:linear-gradient(26deg, #D8E2E5 0%, #F0E6DD 31%, #E7DBDF 100%);
		.avatar{
			width: 0;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 17rpx;
			background-color: #fff;
			flex: 0 0 80rpx;
		}
		.infoBox{
			width:100%;
			color: #666666;
			strong{
				color: #333;
			}
			view{
				margin-bottom: 8rpx;
				.csTag{
					border-radius: 10rpx;
					border:1rpx solid #666;
					padding: 4rpx 10rpx;
					margin-left: 10rpx;
					font-size: 24rpx;
				}
				.personalInfoBtn{
					border-radius: 10rpx;
					background-color:#5359CD;
					color: #fff;
					text-align: center;
					padding: 6rpx 7rpx;
					font-size: 24rpx;
					.iconfont{
						font-size: 24rpx;
						margin-left: 4rpx;
					}
				}
			}
			.firstLineBox{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
	.mainMenuBox{
		background-color: #fff;
		width: 95%;
		margin: -60rpx auto 30rpx;
		border-radius: 10rpx;
		padding: 12rpx 30rpx;
		box-sizing: border-box;
		h4{
			font-size: 30rpx;
			color: #333;
			margin-bottom: 10rpx;
		}
		.item{
			margin-bottom: 30rpx;
		}
		.menuItemBox{
			display: flex;
			flex-wrap: wrap;
			.mainMenuItem{
				display: flex;
				flex-direction: column;
				align-items: center;
				max-width: 20%;
				flex: 1;
				uni-image{
					width: 100rpx!important;
				}
				text{
					font-size: 28rpx;
					color: #333;
				}
			}
		}
		
	}
	.personalInfo{
		background: #fff;
		width: 95%;
		margin: 6rpx auto 0;
		.ulBox{
			padding: 0 30rpx;
			.liBox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #E6E6E6;
				height: 92rpx;
				.infoBox{
					display: flex;
					align-items: center;
					image{
						width: 52rpx !important;
						height: 52rpx;
					}
				}
				&:last-child{
					border:none;
				}
			}
		}
	}
	.inviteQrcodeContainer{
		.popup1-content{
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.content{
				.contentBox{
					text-align: center;
					h3{
						padding: 30rpx;
					}
				}
			}
			.confirmBtn{
				border-radius: 80rpx;
				height: 80rpx;
				width: 60%;
				background-color: #20269B;
				color: #fff;
				margin: 64rpx auto 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
