<template>
	<view class="container">
		<view class="myHeader">
			<view class="left" @click="userinfo()">
				<view 
					class="avatar" 
					 :style="{backgroundImage: 'url(' + (customerBasicInfo.headPicture || companyLogo) + ')'}"
				>
					<!-- <image  :src="customerBasicInfo.headPicture?customerBasicInfo.headPicture:companyLogo" alt="" mode="widthFix" ></image> -->
				</view>
				<view class="headerInfo">
					<view class="headerTop">
						<view class="" style="margin-right: 15rpx;">
							<view class="myName" v-if="loginType == 'codelogin'">{{showMyName || '点击头像完善信息'}}</view>
							<view class="myName" v-if="loginType == 'visitor'">游客</view>
						</view>
						<view class="desBox" v-if="loginType == 'codelogin'&&customerBasicInfo.partnerType">
							{{customerBasicInfo.partnerType}}
						</view>
					</view>
					<view class="nickName">
						<text v-if="loginType == 'codelogin' && customerBasicInfo.nickName">昵称：{{customerBasicInfo.nickName}}</text>
						<text v-if="loginType == 'visitor'">昵称：游客</text>
					</view>
				</view>
				
			</view>
			<view class="right" @click="goDetail(settingItem)">
				<view class="iconfont icon-shezhi iconColor" style="font-size: 40rpx;"></view>
			</view>
		</view>
		<view class="myContent">
			<view class="infoBody" @click="jumpToSystemMsg()">
				<view class="">
					<view v-if="messageInfo.length>0">
						<text style="margin-right: 10rpx;">消息：</text> {{messageInfo[0].title}}
					</view>
					<view v-else>
						<text style="margin-right: 10rpx;">消息：</text>暂无数据
					</view>
				</view>
				<view class="msgBox">
					<view class="magNum" v-if="msgTotal>0" >
						{{msgTotal}}
					</view>
					<view class="iconfont icon-youjiantou iconColor"></view>
				</view>
			</view> 
			<view class="kuaiBox" v-for="item in mainMenuLists" :key="item.id">
				<view class="kuaiTit">
					{{item.categoryName}}
				</view>
				<view class="kuaiCon">
					<view class="kuaiItem" v-for="menuItem in item.children.filter(v=>v.isShow)" :key="menuItem.title" @click="goDetail(menuItem)">
						<view class="imgbox">
							<view class="iconfont iconSize" :class="`${menuItem.icon}`"></view>
						</view>
						<view class="">
							{{menuItem.title}}
						</view>
					</view>
					
					
				</view>
			</view>
		</view>
		<!-- 头部信息 -->
		<!-- <view class="basicInfoBox">
			<view class="avatar">
				<image :src="customerBasicInfo.headPicture?customerBasicInfo.headPicture:companyLogo" alt="" srcset="" ></image>
			</view>
			<view class="infoBox">
				<view class="firstLineBox">
					<view>
						<strong>{{loginornot == true ?customerBasicInfo.realName :'游客'}}</strong>
						<text class="csTag" v-if="customerBasicInfo.partnerType">{{customerBasicInfo.partnerType}}</text>
					</view>
					<view class="personalInfoBtn" @click="userinfo()">
						<text>个人资料</text>
						<i class="iconfont icon-bianji"></i>
					</view>
				</view>
				<view>昵称：{{loginornot == true ?customerBasicInfo.nickName :'游客'}}</view>
				<view>{{customerBasicInfo.userDescription}}</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";
	import {companyInfo} from "@/environments/environment";
	export default {
		data() {
			return {
				
				showMyName:'',
				msgTotal:0,
				messageInfo:[],
				companyType : companyInfo.companyType,
				companyLogo : '../../static/myteam/logo.png',
				userId: uni.getStorageSync('cffp_userId'),
				loginType : uni.getStorageSync('loginType'),
				inviteEqrode:'',
				currentPage:'personalCenter',
				customerBasicInfo:{},
				loginornot: true,
				settingItem:{title:'系统设置',icon:'setting',link:'/pages/personalCenter/system/settings',isOpen:true,isShow:true},
				// 原本的菜单数据项
				// 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,islogin: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,identity: true}
				// 		],
				// 	}
				// ],
				mainMenuLists:[
					{id:'00',categoryName:'交易',
						children:[
							{title:'成交订单',icon:'icon-dingdan',link:'/pages/saleCourseLists/saleCourseLists',isOpen:true,isShow:true},
							// 原本是我的积分
							// {title:'我的积分',icon:'money',link:'/pages/myPoints/myPoints',isOpen:true,isShow:true},
							// 原本是积分兑换
							{title:'佣金',icon:'icon-yongjin',link:'/pages/pointsExchange/pointsExchange',isOpen:true,isShow:true},
							{title:'我的售后',icon:'icon-shouhoufuwu',link:'/pages/afterSales/afterSales',isOpen:true,isShow:true},
							{title:'分享数据',icon:'icon-shujufenxi',link:'/pages/myShare/myShare',isOpen:true,isShow:true},
							{title:'产品中心',icon:'icon-pinzhishangpinhuichang',link:'pages/courselist/courselist',isOpen:true,isShow:true,isTab:true},
							
						],
					},
					{id:'01',categoryName:'团队',
						children:[
							{title:'申请加盟',icon:'icon-hezuo',link:'/pages/application-process/basic-info',isOpen:true,isShow:true},
							{title:'邀请加盟',icon:'icon-yaoqing',link:'/pages/inviteJoin/inviteJoin',isOpen:true,isShow:true,identity: true},
							{title:'我的团队',icon:'icon-tuandui',link:'/pages/personalCenter/myTeam',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,islogin:true},
					{title:'系统设置',icon:'setting',link:'/pages/personalCenter/system/settings',isOpen:true,isShow:true}
				]
				
			}
		},
		components:{
			tabBar,
		},
		onShow() {
			this.loginType = uni.getStorageSync('loginType')
			console.log('this.loginType',this.loginType);
			if(this.companyType == '1'){
				this.companyLogo='../../static/myteam/Group1633.png';
			}else if(this.companyType == '2'){
				this.companyLogo='../../static/myteam/logo.png';
			}
			
			if(this.loginType == "visitor" ){
				this.loginornot = false
				this.messageInfo = []
			}else{
				this.loginornot = true;
			}
			if(this.loginType == 'codelogin'){
				this.querySystemMessage()
				this.queryInfo();
			}
			uni.$on("handClick", res => {
				this.customerBasicInfo = res.data
				if(this.customerBasicInfo?.realName && this.customerBasicInfo?.realName.length>5){
					this.showMyName = this.customerBasicInfo?.realName.substring(0, 5) + '...'
				}else {
					this.showMyName = this.customerBasicInfo.realName
				}
				// 移除监听事件
				 uni.$off('handClick');  
			});
		},
		
		methods: {
			querySystemMessage(){
				if(this.userId){
					api.querySystemMessage({systemType:1,userId:uni.getStorageSync('cffp_userId')}).then((res)=>{
						if(res['success']&&res['data']['dataList']&&res['data']['dataList'].length>0){
							this.messageInfo = res['data']['dataList'];
							this.msgTotal =  res['data']['dataList'].filter(item=>{
									return item.isRead == 0
							  }).length
							  if(this.msgTotal>0){
								  uni.setTabBarBadge({
										 index: 3,
										 text: this.msgTotal.toString()
									   }); 
							  }else {
									uni.removeTabBarBadge({ index: 3 });
							 }
						}else {
							this.messageInfo = []
							uni.removeTabBarBadge({ index: 3 });
							this.msgTotal = 0
						}
					})
				}
			},
			jumpToSystemMsg(){
							if(this.userId&& this.messageInfo.length>0){
								uni.navigateTo({
									url:'../systemMsg/system_msg'
								})
							}
						},
			close(){
				this.bootpage = false
			},
			isLogin(){
				uni.showToast({
					title: "请登陆个人账户使用该功能",
					duration: 2000,
					icon: 'none'
				});
				// uni.redirectTo({
				// 	url:'/components/login/login?from=personalCenter'
				// })
				uni.redirectTo({
					url: '/components/login/login?from=personalCenter'
				})
				try {
				    uni.clearStorageSync();
				} catch (e) {
					// console.log(e)
				    // error
				}
				return false
			},
			// 菜单跳转页面
			goDetail(item){
				
				console.log('item',item);
				if(!this.loginornot&& !item.islogin){
					this.isLogin()
					return
				}
				if(item.isShow && item.isOpen){
					if(item.title==='我的邀请码'){
						this.$refs.popup1.open('bottom');
					}else{
						this.ckidentity(item)
					}
				}else{
					common.errorDialog(2,'该模块正在开发中，敬请期待！','提示');
				}
			},
			ckidentity(item){
				if(item.identity == true && this.customerBasicInfo.partnerType ==null){
					uni.showToast({
						title: "您本人尚未加盟，您加盟后可邀请加盟",
						duration: 2000,
						icon: 'none'
					});
					return false
				}else if(item.title == '邀请加盟'){
					uni.navigateTo({
						url: `${item.link}?levelCode=` + this.customerBasicInfo.levelCode
					});
				}else{
					item.link = `${item.link}?from=personalCenter`
					if(item.isTab){
						uni.switchTab({
							url:`../../${item.link}`
						})
					}else{
						uni.navigateTo({
							url: item.link
						});
					}
					
				}
			},
		
			userinfo(){
				if(this.loginornot === true){
					uni.navigateTo({
						url:`/pages/personalCenter/user-information?customerBasicInfo=` + JSON.stringify(this.customerBasicInfo)
					})
				}else {
					this.isLogin()
					// uni.showToast({
					// 	title: "游客不可进行修改",
					// 	duration: 2000,
					// 	icon: 'none'
					// });
					// return false
				}
			},
			// 弹窗
			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:uni.getStorageSync('cffp_userId')}).then(res=>{
					if(res['success']){
						this.customerBasicInfo = res['data'];
						if(this.customerBasicInfo?.realName && this.customerBasicInfo?.realName.length>5){
							this.showMyName = this.customerBasicInfo?.realName.substring(0, 5) + '...'
						}else {
							this.showMyName = this.customerBasicInfo.realName
						}
						
						this.inviteEqrode = this.customerBasicInfo.invitationCode;
						uni.setStorageSync('user_mobile', res.data.mobile)
						uni.setStorageSync('userinfodataForm', res.data)
					
					}else {
							// uni.showToast({
							// 	title: res['message'],
							// 	duration: 2000
							// });
							// 清空全部本地存储
							uni.clearStorageSync();
							uni.setStorageSync('loginType','visitor')
						this.showMyName = ''
						this.loginType = 'visitor'
						
					}
					console.log('this.showMyName',this.showMyName);
				})
			}
		},
		onLoad() {
			
		},
		mounted() {
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		box-sizing:border-box;
		background-color: #f7f7f7;
		min-height: 100vh; /* 使用视口高度 */
		height: auto !important;
		height: 100vh;
		.iconColor{
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
		}
		.myHeader{
			box-sizing: border-box;
			width: 100%;
			height: 250rpx;
			background-image: url('/static/mySelfBg.png');
			background-size: cover;
			background-repeat: no-repeat;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				margin-left: 50rpx;
				flex: 1;
				display: flex;
				align-items: center;
				.avatar{
					flex-grow: 0;
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
					overflow: hidden;
					/* 背景图设置 */
					  background-size: cover;
					  background-position: center;
					  background-repeat: no-repeat;
					/* 添加以下属性强制硬件加速 */
					transform: translateZ(0);
					-webkit-transform: translateZ(0);
					backface-visibility: hidden;
					-webkit-backface-visibility: hidden;
					image{
						width: 100%;
						height: 100%;
						object-fit: cover;
						/* 同样为图片添加硬件加速 */
						transform: translateZ(0);
						-webkit-transform: translateZ(0);
						border-radius: none !important;
					}
				}
				
				.headerInfo{
					margin-left: 20rpx;
					display: flex;
					font-size: 36rpx;
					font-weight: 600;
					color: rgba(51, 51, 51, 1);
					flex-direction: column;
					justify-content: flex-start;
					.headerTop{
						display: flex;
						align-items: center;
						justify-content: flex-start;
					}
					// .myName{
					// 	// width: 200rpx;
					// 	min-width: 0;
					//     white-space: nowrap;
					// 	overflow: hidden;
					// 	text-overflow: ellipsis;
					// 	font-size: 32rpx;
					// }
					.desBox{
						border: 1px solid rgba(102, 102, 102, 1);
						border-radius: 8rpx;
						padding: 0 2rpx;
						color: rgba(102, 102, 102, 1);
						font-size: 23rpx;
						font-weight: normal;
						text-align: center;
					}
					.nickName{
						font-size: 27rpx;
						font-weight: normal;
						color: rgba(102, 102, 102, 1);
						margin-top: 10rpx;
					}
				}
			}
				
			.right{
				width: 100rpx;
				margin-top: -20rpx;
			}
		}
		.myContent{
			box-sizing:border-box;
			padding: 20rpx;
			
			.infoBody{
				box-sizing: border-box;
				background: #fff;
				width: 100%;
				padding: 30rpx 20rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				.msgBox{
					display: flex;
					align-items: center;
					
					.magNum{
						background-color: #f43530;
						width: 40rpx;
						height: 40rpx;
						 min-width: 35rpx;
						  padding: 0 5rpx; /* 为多位数留空间 */
						  box-sizing: border-box;
						border-radius: 50%;
						color: #fff;
						display: flex;
					   justify-content: center;
					   align-items: center;
						
					}
					
				}
			}
			.kuaiBox{
				box-sizing: border-box;
				background: #fff;
				width: 100%;
				padding: 10rpx 20rpx;
				border-radius: 8rpx;
				margin-top: 20rpx;
				.kuaiTit{
					font-size: 30rpx;
				}
				.kuaiCon{
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex-wrap: wrap;
					width: 100%;
					
					.kuaiItem{
						display: flex;
						align-items: center;
						flex-direction: column;
						margin-bottom: 40rpx;
						font-size: 26rpx;
						/* 关键修改：计算宽度时考虑间距 */
						  width: calc((100% - 40rpx * 2) / 3); /* 3个子项，左右各20rpx间距 */
						  margin-right: 40rpx; /* 右侧间距 */
						.imgbox{
							margin-bottom: 10rpx;
							.iconSize{
								font-size: 40rpx;
							}
						}
					}
					/* 每行第3个子项去掉右侧间距 */
					.kuaiItem:nth-child(3n) {
					  margin-right: 0;
					}
					
				}
			}
			.kuaiBox:last-child{
				margin-bottom: 100rpx;
			}
		}
	}
	.avatar {
		width: 90rpx;
		height: 80rpx;
		/* border: 1rpx solid aqua; */
		margin-right: 17rpx;
		border-radius: 50%;
	}

	.avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.loading{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.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%;
		// 	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>
