<template>
	<view class="container">
		<!-- 使用默认图标的悬浮按钮 -->
		<!-- <FloatingButton ></FloatingButton> -->
		<view class="myHeader">
			<view class="left" @click="userinfo()">
				<view 
					class="avatar" 
					 :style="{backgroundImage: 'url(' + (customerBasicInfo.headPicture || companyLogo) + ')'}"
				>
				</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>
				
			</view>
			<view class="right" @click="goDetail(settingItem)">
				<view class="iconfont icon-shezhi " style="font-size: 40rpx;color: #fff;"></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>
		<!-- 使用封装后的弹窗组件 -->
		    <join-popup 
		      ref="joinPopup"
		      @confirm="gotoApply"
		    ></join-popup>
		<uni-popup ref="applyPopup" type="center" background-color="#fff">
			<view class="applyBox">
				<view style="text-align: right;" @click="$refs.applyPopup.close()">
					<view class="iconfont icon-chahao" ></view>
				</view>
				<view class="applyCon">
					<view style="text-align: center;" >
						<view class="iconfont icon-dianzan" ></view>
					</view>
					
					<view class="title">
						您已加盟为银盾家办合伙人
					</view>
					<view class="applycontent">
						<view class="subtit">
							晋升下一级目标
						</view>
						<view class="" v-if="partnerStatistic.reachPeopleNum>0">
							<view class="">
								<text class="iconfont icon-a-tuandui3 leftIcon" ></text>
								<text>团队有效人数</text>
								
								<text 
									v-if="partnerStatistic.totalPeopleNum<partnerStatistic.reachPeopleNum" 
									class="iconfont icon-weiwancheng rightIcon" 
								></text>
								<text
									v-else
									class="iconfont icon-duihao2 rightIcon" 
								></text>
							</view>
							<view class="num">
								<text  >{{partnerStatistic.totalPeopleNum}} / {{partnerStatistic.reachPeopleNum}}</text>
								<text v-if="partnerStatistic.peopleNum>0">（相差{{partnerStatistic.peopleNum}}人）</text>
							</view>
						</view>
						<view class="" v-if="partnerStatistic.reachSingeSaleNum>0">
							<view class="" >
								<text class="iconfont icon-xiaoshoue leftIcon" ></text>
								<text>个人标准销售累计金额</text>
								<!-- <text class="iconfont icon-duihao2 rightIcon" ></text> -->
								<text
									v-if="partnerStatistic.totalSingeSaleNum<partnerStatistic.reachSingeSaleNum" 
									class="iconfont icon-weiwancheng rightIcon" 
								></text>
								<text
									v-else
									class="iconfont icon-duihao2 rightIcon" 
								></text>
							</view>
							<view class="num">
								<text  >{{partnerStatistic.totalSingeSaleNum.toFixed(2)}}元 / {{partnerStatistic.reachSingeSaleNum.toFixed(2)}}元</text>
							</view>
						</view>
						<view class="" v-if="partnerStatistic.reachSaleNum>0">
							<view class="">
								<text class="iconfont icon-ddailirenshu leftIcon" ></text>
								<text>团队标准销售累计金额</text>
								<!-- <text class="iconfont icon-weiwancheng rightIcon" ></text> -->
								
								<text 
									v-if="partnerStatistic.totalSaleNum<partnerStatistic.reachSaleNum" 
									class="iconfont icon-weiwancheng rightIcon" 
								></text>
								<text
									v-else
									class="iconfont icon-duihao2 rightIcon" 
								></text>
							</view>
							<view class="num">
								<text >{{partnerStatistic.totalSaleNum.toFixed(2)}}元 / {{partnerStatistic.reachSaleNum.toFixed(2)}}元</text>
								<text v-if="partnerStatistic.saleNum>0">（相差{{partnerStatistic.saleNum.toFixed(2)}}元）</text>
							</view>
						</view>
						
					</view>
					
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import dataHandling from "@/util/dataHandling";
	import common from "../../common/common";
	import tabBar from '../../components/tabBar/tabBar.vue';
	import api from "@/api/api";
	import {companyInfo} from "@/environments/environment";
	import FloatingButton from '@/components/FloatingButton/FloatingButton.vue';
	import JoinPopup from '@/components/commonPopup/JoinPopup.vue';

	export default {
		data() {
			return {
				showMyName:'',
				msgTotal:0,
				messageInfo:[],
				companyType : companyInfo.companyType,
				companyLogo : '../../static/logo2.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:'icon-dingdan',link:'/pages/saleCourseLists/saleCourseLists',isOpen:true,isShow:true},
							{title:'佣金',icon:'icon-yongjin',link:'/pages/pointsExchange/pointsExchange',isOpen:true,isShow:true,identity: 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},
						],
					},
					{id:'01',categoryName:'团队',
						children:[
							{title:'申请加盟',icon:'icon-hezuo',link:'/myPackageA/applyFranchise/applyFranchise?',isOpen:true,isShow:true,isApply: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,identity: true},
							{title:'育成团队',icon:'icon-yuchengguanxi',link:'/pages/personalCenter/myTeamIncubate',isOpen:true,isShow:true,identity: true},
						],
					},
					{id:'02',categoryName:'帮助',
						children:[
							{title:'帮助中心',icon:'icon-wenhao1',link:'/pages/personalCenter/helpCenter',isOpen:true,isShow:true,islogin:true},
							{title:'咨询客服',icon:'icon-kefu1',link:'',isOpen:true,isShow:true,islogin:true,kefu: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}
				],
				partnerStatistic:{} //申请加盟统计
			}
		},
		components:{
			tabBar,
			JoinPopup
		},
		onShow() {
			this.loginType = uni.getStorageSync('loginType')
			if(this.companyType == '1'){
				this.companyLogo='../../static/myteam/Group1633.png';
			}else if(this.companyType == '2'){
				this.companyLogo='../../static/logo2.png';
			}
			
			if(!this.loginType|| this.loginType == "visitor"){
				this.loginornot = false
				
			}else{
				this.loginornot = true;
			}
			if(this.loginType == 'codelogin'){
				this.querySystemMessage()
				this.queryInfo();
			}else {
				this.messageInfo = []
				uni.removeTabBarBadge({ index: 3 });
				this.msgTotal = 0
				this.customerBasicInfo = {}
			}
			uni.$on("handClick", res => {
				this.customerBasicInfo = res.data
				let name = this.customerBasicInfo.realName ||  this.customerBasicInfo.nickName
				if(name && name.length>5){
					this.showMyName =name.substring(0, 5) + '...'
				}else {
					this.showMyName = name
				}
				// 移除监听事件
				 uni.$off('handClick');  
			});
		},
		
		methods: {
			getPartnerStatistic(){
				if(this.userId){
					api.partnerStatisticsGrade({userId:uni.getStorageSync('cffp_userId')}).then((res)=>{
						if(res['success']){
							this.partnerStatistic = res['data']
							for (let key in this.partnerStatistic) {
								if(key!='peopleNum' && key!='reachPeopleNum'&& key!='totalPeopleNum'){
									if(key){
										this.partnerStatistic[key] = Number(this.partnerStatistic[key].toFixed(2))
									}
								}
							}
							this.$refs.applyPopup.open()
							
						}else {
							uni.showToast({
								title: res['message'],
								duration: 2000,
								icon: 'none'					
							})
						}
					})
				}
			},
			gotoApply(){
				uni.navigateTo({
						url: '/myPackageA/applyFranchise/applyFranchise'
					})
				this.$refs.joinPopup.close()
				
			},
			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(){
				dataHandling.pocessTracking(
				  '查看',
				  `用户查看个人消息`,
				  '点击',
				  2,
				  '我的',
				  'pages/personalCenter/personalCenter'
				)
				uni.navigateTo({
					url:'../systemMsg/system_msg'
				})
							// if(this.userId&& this.messageInfo.length>0){
							// 	uni.navigateTo({
							// 		url:'../systemMsg/system_msg'
							// 	})
							// }
						},
			close(){
				this.bootpage = false
			},
			isLogin(){
				uni.navigateTo({
					url: '/myPackageA/login/login?from=personalCenter'
				})
				try {
				    uni.clearStorageSync();
					uni.setStorageSync('loginType','visitor');
				} catch (e) {
					
				}
				return false
			},
			// 菜单跳转页面
			goDetail(item){
				if(item.isApply&&(!uni.getStorageSync('loginType')||uni.getStorageSync('loginType')=='visitor')){
					dataHandling.pocessTracking(
					  '申请加盟',
					  `用户在未登录时点击了申请加盟`,
					  '点击',
					  2,
					  '我的',
					  'pages/personalCenter/personalCenter'
					)
					
					uni.navigateTo({
						url: `${item.link}`
					});
					return
				}
				if(item.kefu){
					// 现在还没转化成小程序，暂时放在这
					// #ifdef MP-WEIXIN
					dataHandling.pocessTracking(
					  '咨询客服',
					  `用户咨询客服`,
					  '点击',
					  2,
					  '我的',
					  'pages/personalCenter/personalCenter'
					)
					uni.openCustomerServiceChat({
					  extInfo: {
					    url: 'https://work.weixin.qq.com/kfid/kfc08c55f4170e7fc9e'
					  },
					  corpId: 'ww43cac1cf9dd6a3d0', // 客服会话按钮打开后，在微信客服会话按钮处理的事件类型
					  showMessageCard: true,
					  sendMessageTitle: (uni.getStorageSync('hoservice_mobileNo')?(uni.getStorageSync('hoservice_mobileNo')+"，") :"" ) + "进入个人中心-->咨询客服",
					  sendMessagePath: `/pages/index/mySelf.html`,
					  //sendMessageImg: cardItem.value['list'][0]['itemImg']
					});
					// #endif
					// #ifndef MP-WEIXIN
					dataHandling.pocessTracking(
					  '咨询客服',
					  `用户咨询客服`,
					  '点击',
					  2,
					  '我的',
					  'pages/personalCenter/personalCenter'
					)
					window.open('https://work.weixin.qq.com/kfid/kfc08c55f4170e7fc9e')
					// #endif
					return
				}
				
				
				if(item.isApply&&this.customerBasicInfo.partnerType){
					dataHandling.pocessTracking(
					  '申请加盟',
					  `用户已成为合伙人查看了团队统计差`,
					  '点击',
					  2,
					  '我的',
					  'pages/personalCenter/personalCenter'
					)
					this.getPartnerStatistic()
					
					return
				}
				// 说明不需要登录就可以进
				if(item.isLogin){
					dataHandling.pocessTracking(
					  '查看',
					  `用户点击了${item.title}模块`,
					  '点击',
					  2,
					  '我的',
					  'pages/personalCenter/personalCenter'
					)
					uni.navigateTo({
						url: `${item.link}`
					});
					return
				}
				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){
					dataHandling.pocessTracking(
					  '查看',
					  `用户在未加盟时点击了${item.title}模块`,
					  '点击',
					  2,
					  '我的',
					  'pages/personalCenter/personalCenter'
					)
					this.$refs.joinPopup.open()
					return false
				}else if(item.title == '邀请加盟'){
					uni.navigateTo({
						url: `${item.link}?levelCode=` + this.customerBasicInfo.levelCode
					});
				}else{
					const urlObj = JSON.parse(JSON.stringify(item))
					urlObj.link = `${urlObj.link}?from=personalCenter&partnerType=${this.customerBasicInfo.partnerType}`
					if(item.isTab){
						uni.switchTab({
							url:`../../${urlObj.link}`
						})
					}else{
						uni.navigateTo({
							url: urlObj.link
						});
					}
					
				}
			},
		
			userinfo(){
				if(this.loginornot === true){
					dataHandling.pocessTracking(
					  '个人信息',
					  `用户在我的点击个人资料`,
					  '点击',
					  2,
					  '我的',
					  'pages/personalCenter/personalCenter'
					)
					uni.navigateTo({
						url:`/pages/personalCenter/user-information?customerBasicInfo=` + JSON.stringify(this.customerBasicInfo)
					})
				}else {
					this.isLogin()
					
				}
			},
			// 弹窗
			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'];
						let name = this.customerBasicInfo.realName ||  this.customerBasicInfo.nickName
						console.log('name',name);
						if(name && name.length>5){
							this.showMyName = name.substring(0, 5) + '...'
						}else {
							this.showMyName = name
						}
						
						this.inviteEqrode = this.customerBasicInfo.invitationCode;
						uni.setStorageSync('user_mobile', res.data.mobile)
						uni.setStorageSync('userinfodataForm', res.data)
					
					}else {
							// 清空全部本地存储
							uni.clearStorageSync();
							uni.setStorageSync('loginType','visitor')
						this.showMyName = ''
						this.loginType = 'visitor'
						
					}
					console.log('this.showMyName',this.showMyName);
				})
			}
		},
		
		
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-popup .uni-popup__wrapper{
		 margin: 0 !important;
		 border-radius: 30rpx;
	 }
	.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: linear-gradient(225deg, rgba(65, 69, 188, 1) 0%, rgba(29, 30, 125, 1) 100%);
			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: 130rpx;
					height: 130rpx;
					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{
						color:#fff;
					}
					
					.desBox{
						border-radius: 8rpx;
						padding: 0 2rpx;
						font-size: 24rpx;
						font-weight: normal;
					}
					.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-start */
				  flex-wrap: wrap;
				  width: 100%;
				  gap: 20rpx; /* 替代 margin-right */
				}
				
				.kuaiItem {
				  display: flex;
				  align-items: center;
				  flex-direction: column;
				  margin-bottom: 40rpx;
				  font-size: 26rpx;
				  // width: calc(25% - 20rpx); /* 4个子项，每个占25%宽度减去边距 */
				  width: calc(25% - 15rpx); /* 调整计算方式 */
				  // margin-right: 20rpx; /* 设置右边距 */
				}
				
				/* 每行第4个子项去掉右侧间距 */
				.kuaiItem:nth-child(4n) {
				  margin-right: 0;
				}
				
				.imgbox {
				  margin-bottom: 10rpx;
				}
				
				.iconSize {
				  font-size: 40rpx;
				}
			}
			.kuaiBox:last-child{
				margin-bottom: 100rpx;
			}
		}
		.joinContent{
			width: 500rpx;
			border-radius: 30rpx;
			background-color: #ffff;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: column;
			.joinHeader{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: rgba(54, 57, 169, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
			}
			.joinCon{
				// padding: 20rpx 0;
				.one{
					font-size: 30rpx;
					color: rgba(38, 41, 44, 1);
					font-weight: 600;
					text-align: center;
				}
				.two{
					color: rgba(145, 144, 148, 1);
					font-size: 26rpx;
					text-align: center;
					margin-top: 10rpx;
					margin-bottom: 20rpx;
				}
			}
			.desBox{
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
				view{
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}
			}
			.joinFotter{
				width: 100%;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding: 10rpx 0;
				background: rgba(54, 57, 169, 1);
				border-radius: 60rpx;
				font-size: 28rpx;
			}
		}
		.applyBox{
			width: 500rpx;
			border-radius: 30rpx;
			background-color: #ffff;
			padding: 30rpx;
			box-sizing: border-box;
			
			.icon-chahao{
				color: #272536;
				font-size: 28rpx;
			}
			.applyCon{
				display: flex;
				// align-items: center;
				flex-direction: column;
				.icon-dianzan{
					color: #FF8D1A;
					font-size: 60rpx;
				}
				.title{
					font-size: 35rpx;
					font-weight: 600;
					margin: 20rpx 0;
				}
				.applycontent{
					color: #20269B;
					font-size: 28rpx;
					.subtit{
						font-size: 30rpx;
						margin-bottom: 10rpx;
					}
					.num{
						font-size: 26rpx;
						color: #333333;
						margin: 10rpx 0;
					}
					.leftIcon{
						color: #20269B;
						font-size: 26rpx;
						margin-right: 5rpx;
					}
					.rightIcon{
						margin-left: 5rpx;
						font-size: 26rpx;
						color: #F43530;
					}
					.icon-duihao2{
						color: #41C740;
					}
				}
				
			}
		}
	}
	
</style>
