<template>
	<view class="container">
		<!-- 禁用弹窗 -->
			 <restrictedTip ref="restrictedTip"/>
		<view class="myHeader">
			<!-- #ifdef APP -->
			<view class="backArrow">
				<text class="iconfont icon-youjiantou zuojiantou" style="left: 5rpx;" @click="goBack()"></text>
				<text style="font-size: 30rpx;">我的团队</text>
			</view>
			<!-- #endif -->
			
			<view class="timeBox" v-if="currentBtn == '2'" @click="showTime1 = true">
				<CommonTimePicker
					:timeData="startDate"
					:visible="showTime1" 
					iconColor="#fff"
					@confirmDate="changeStartTime" 
					@closeTime="showTime1=false"
				/>
			</view>
			<view class="renshu" :style="{marginTop}">
				<view class="top">
					<view class="left">
						<text v-if="currentBtn == '1'">团队有效人数</text>
						<text v-if="currentBtn == '2'">团队标准销售额</text>
					</view>
					<view class="right" @click="changeCurrentBtn">
						<text v-if="currentBtn == '1'">查看业绩</text>
						<text v-if="currentBtn == '2'">查看团队</text>
					</view>
				</view>
				<view class="bottom">
					<text v-if="currentBtn == '1'">{{teamCount}}人</text>
					<text v-if="currentBtn == '2'">￥{{monthStandardSales}}</text>
				</view>
			</view>
			<view class="moneyBox">
				<view class="one">
					<view v-if="currentBtn == '1'" class="">
						￥{{monthStandardSales}}
					</view>
					<view v-if="currentBtn == '2'" class="">
						￥{{totalCoursePrice}}
					</view>
					<view style="margin-top: 5rpx;">
						<text v-if="currentBtn == '1'">本月团队标准销售额</text>
						<text v-if="currentBtn == '2'">总销售额</text>
					</view>
				</view>
				<view class="two">
					<view class="">
						{{totalOrder}}
					</view>
					<view style="margin-top: 5rpx;">
						<text>团队出单数</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 团队相关的 -->
		<view class="teamBox" v-if="currentBtn == '1' && loginType == 'codelogin'">
			<view class="teamHeader">
				<view class="oneHeader" v-if="!showTeamTab">
					<text class="self">我的团队</text>
					<text class="duiyuan">共{{myTeamData.teamInfoVO.count}}位队员(包括您)</text>
				</view>
				<view class="twoHeader" v-if="showTeamTab">
					<view class="teamTabBox" >
						<scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="120">
							<view
								class="scroll-view-item_H" 
								v-for="item in myTeamTabList" 
								:key="item.orgInfoId"
								@click="changeTeamTab(item)"
							>
								<text class="iconfont icon-jiantou2" v-if="item.icon"></text>
								<text>{{item.name}}</text>
								
							</view>
						</scroll-view>
					</view>
				</view>
				
			</view>
			<view class="teamPeople">
				<view class="oneLevel">
					<view class="avatar">
						<image  :src="myTeamData.teamInfoVO.avatar ? myTeamData.teamInfoVO.avatar  :companyLogo" mode="widthFix"></image>
					</view>
					<view class="topR">
						<view class="top">
							<text class="mySelfName">{{myTeamData.teamInfoVO.remarkName}}</text>
							<view class="position">
								团队长
							</view>
							<view class="leavelName" style="margin-right: 15rpx;">
								{{myTeamData.teamInfoVO.levelName}}
							</view>
							<view class="leavelName"  v-if="myTeamData.teamInfoVO.level == 1">
								我
							</view>
						</view>
						<view class="bottom" v-if="myTeamData.teamInfoVO.realName">
							<text>实名：</text>
							<text >{{myTeamData.teamInfoVO.realName}}</text>
						</view>
					</view>
					
				</view>
				<view v-if="myTeamData.teamInfoVO.subList">
					<view class="twoLevel" v-for="child in  myTeamData.teamInfoVO.subList" :key="child.orgInfoId">
						<view class="left">
							<view class="line" >
								<view class="box"></view>
							</view>
							<view class="peopleInfo">
								<view class="twoAvatar">
									<image  :src="child.avatar ? child.avatar  :companyLogo" mode="widthFix"></image>
								</view>
								<view class="leftR">
									<view class="top" @click="updateRmarkName(child)">
										<text class="nickName">{{child.remarkName}}</text>
										<text class="iconfont icon-xiugai" ></text>
										<view class="nameLevel">{{child.levelName}}</view>
									</view>
									<view class="bottom" v-if="child.realName">
										<text>实名：</text>
										<text >{{child.realName}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="right" v-if="child.subList" @click="lookData(child)">
							<text class="rNum">{{child.count}}人</text>
							<text class="iconfont icon-jiantou2" ></text>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="emptyTxt" v-if="currentBtn == '1' && (!loginType||loginType == 'visitor')">
			暂无数据
		</view>
		<!-- 业绩相关的 -->
		<view 
			v-if="currentBtn == '2'"
			class="filterBox" 
			style="background: none;margin: 10rpx 0;">
			<scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="120">
				<view
					class="scrollBtn" 
					v-for="item in btnList" 
					:key="item.id"
					:class="{active:item.id == currentFilterBtn }"
					@click="sortswitch(item)" 
				>
					{{item.title}}
				</view>
			</scroll-view>
		</view>
		<view 
			class="filterBox" 
			v-if="currentBtn == '2'" 
			:style="{marginTop:currentBtn=='1'?'20rpx':''}"
		>
			<scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="120">
				<view
					class="scroll-view-item_H" 
					v-for="item in tabList" 
					:key="item.id"
					:class="{active:item.id == currentTab }"
					@click="changeTab(item)"
				>
					{{item.title}}
				</view>
			</scroll-view>
		</view>
		<view class="tableBox" v-if="currentBtn == '2'" >
			<view class="table">
				<view class="content-box">
					<view class="content-box-title" v-for="(item,index) in tableHeaderList" :key="index">
						<text class="title">{{item.title}}</text>
					</view>
				</view>
				<view v-if="currentBtn == '2'&&currentFilterBtn!=='3'&& myTeamAchievementList.length>0">
					<view class="content-sam-box" v-for="(pointItem,index) in myTeamAchievementList" :key="index">
						<span class="content-box-title cell">{{pointItem.name}}</span>
						<span class="content-box-title cell">{{pointItem.orderNum}}</span>
						<span class="content-box-title cell">￥{{pointItem.coursePrice}}</span>
						<span class="content-box-title cell" >￥{{pointItem.standardSales  || '0.00'}}</span>
					</view>
				</view>
				<view v-else-if="currentBtn == '2'&& currentFilterBtn=='3'&& myTeamAchievementList.length>0">
					<view class="content-sam-box" v-for="(pointItem,index) in myTeamAchievementList" :key="index">
						<span class="content-box-title cell">{{pointItem.saleDate}}</span>
						<span class="content-box-title cell">{{pointItem.orderNum}}</span>
						<span class="content-box-title cell">￥{{pointItem.coursePrice}}</span>
						<span class="content-box-title cell" >￥{{pointItem.standardSales  || '0.00'}}</span>
					</view>
				</view>
				<view class="empty" v-else>
					暂无数据
				</view>
			</view>
		</view>
		<boot-page
			loginSource="我的团队"
			v-if="sharelogin" 
			ref="sharelogin" 
			@close="sharelogin = false"
			@afterLogin="afterLogin"
			pageSource="myTeam"
		></boot-page>
		<uni-popup ref="updatePop" type="center" background-color="#fff">
			<view class="updateCon">
				<view class="top">
					<view class="title">
						修改【{{updateItem.name}}】备注
					</view>
					<view class="inputBox">
						<input
							class="userInput"
							v-model="remarkName" 
							maxlength="10" 
							type="text"
							placeholder="请输入2~10个字符" 
						/>
						<!-- v-if="updateItem.realName" -->
						<view 
							v-if="updateItem.realName"
							class="useReal" 
							@click="remarkName=updateItem.realName"
						>
							使用实名
						</view>
					</view>
				</view>
				<view class="bottomBtn">
					<view class="left" @click="cancel">
						取消
					</view>
					<view class="right" @click="confirmRemarkName">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import CommonTimePicker from '@/components/commonTimePicker/commonTimePicker.vue';
	import dataHandling from "@/util/dataHandling";
	import api from "@/api/api";
	import { initJssdkShare, setWechatShare } from '@/util/fiveshare';
	import BootPage from "@/components/bootpage/bootpage.vue";
	import {companyInfo} from "@/environments/environment";
	import restrictedTip from '@/components/commonPopup/restrictedTip.vue';
	export default {
		components: {
			CommonTimePicker,
			BootPage,
			restrictedTip,
		},
		data() {
			return {
				showTime1:false,
				startDate:{year:dataHandling.getDateParts().year,month:dataHandling.getDateParts().month},
				tabList:[
					{title:'全部',id: '1',type:4},
					{title:'直辖团队',id: '2',type:1},
					{title:'所辖团队',id: '3',type:2},
				],
				btnList:[
					{title:'按标准销售额',id: '1',sortType:5},
					{title:'按销售额',id: '2',sortType:2},
					{title:'按销售日期',id: '3',sortType:4},
				],
				
				tableHeaderList:[
					{title:'上级',id:'1'},
					{title:'成员',id:'2'},
					{title:'职级',id:'3'},
					{title:'关系',id:'4'},
				],
				currentTab:'1', 
				currentBtn:'1', // 1代表团队 2代表业绩
				currentFilterBtn:'1',
				teamCount:0,//团队总人数，育成团队人数不算
				userId: uni.getStorageSync('cffp_userId'),
				otherList: null, // 直辖团队
				directList: null, //所辖团队数组
				myTeamList:[],//我的团队表格数据，
				myTeamData:{
					teamInfoVO:{
						count:0,
						subList:[],
						avatar:''
					}
				},//我的团队总数据，
				CffpOrgInfoReqVO: {
					startDate: `${new Date().getFullYear()}-${new Date().getMonth() + 1 > 9 ? new Date().getMonth() + 1 : '0'+ (new Date().getMonth() + 1)}`,
					endDate: `${new Date().getFullYear()}-${new Date().getMonth() + 1 > 9 ? new Date().getMonth() + 1 : '0'+ (new Date().getMonth() + 1)}`,
					courseOrPolicy: '1',
					type: '2',
					sortType:5
				},
				totalOrder: '0', //总单数
				totalCoursePrice: '0.00', // 总销售额
				monthStandardSales:'0.00',//本月团队标准销售额
				myTeamAchievementList:[],//我的业绩数据列表,
				marginTop:'30rpx',
				sharelogin: false,
				companyType : companyInfo.companyType,
			    companyLogo : '../../static/suplogo.png',
				showTeam:false,
				updateItem:{},
				remarkName:'',//修改备注名称
				oldMyTeamData:{},//我的团队旧值
				myTeamTabList:[],
				showTeamTab:false,//我的团队tab开关
				currentTeam : {},
				loginType:''
			}
		},
		watch: {
		    currentBtn: {
		        deep: true,
		        handler(newVal) {
		            if(newVal == '1') {
		                this.showTeamTab = false
						// #ifdef H5
						this.marginTop = '30rpx'
						// #endif
						this.getmyseatem('1')
						return
		            }
					if(newVal == '2') {
					    this.tableHeaderList = [
							{title:'成员',id:'1'},
							{title:'单数',id:'2'},
							{title:'销售额',id:'3'},
							{title:'标准销售额',id:'4'},
						]
						this.getqueryTeamAchievement()
						// #ifdef H5
						this.marginTop = '0rpx'
						// #endif
						return
					}
		        }
		    },
			currentTab: {
			    deep: true,
			    handler(newVal) {
					this.myTeamList = []
			        if(newVal == '1') {
			            if(this.myTeamData.other && this.myTeamData.other.length != 0 && this.myTeamData.other != null){
							this.myTeamList.push(...this.myTeamData['other'])
						}
						if(this.myTeamData.directList && this.myTeamData.directList.length != 0 && this.myTeamData.directList != null){
							this.myTeamList.push( ...this.myTeamData['directList'])
						}
						return
			        }
					if(newVal == '2') {
					   if(this.myTeamData.other && this.myTeamData.other.length != 0 && this.myTeamData.other != null){
					   	this.myTeamList.push(...this.myTeamData['other'])
					   } 
					}
					if(newVal == '3'){
						if(this.myTeamData.directList && this.myTeamData.directList.length != 0 && this.myTeamData.directList != null){
							this.myTeamList.push( ...this.myTeamData['directList'])
						}
					}
			    }
			},
			currentFilterBtn: {
			    deep: true,
			    handler(newVal) {
					if(newVal == '3'&&this.currentBtn=='2') {
					    this.tableHeaderList = [
							{title:'销售日期',id:'1'},
							{title:'单数',id:'2'},
							{title:'销售额',id:'3'},
							{title:'标准销售额',id:'4'},
						]
						this.getqueryTeamAchievement()
						return
					}else {
						this.tableHeaderList = [
							{title:'成员',id:'1'},
							{title:'单数',id:'2'},
							{title:'销售额',id:'3'},
							{title:'标准销售额',id:'4'},
						]
						this.getqueryTeamAchievement()
						return
					}
			    }
			},
		},
		onLoad(options){
			if(this.companyType == '1'){
				this.companyLogo='../../static/myteam/Group1633.png';
			}else if(this.companyType == '2'){
				this.companyLogo='../../static/suplogo.png';
			}
			// 未登录，弹出登录框
			if(options.myTeam&&(!uni.getStorageSync('loginType')||uni.getStorageSync('loginType')=='visitor' )){
				this.sharelogin = true
			}else {
				this.getmyseatem('1')
				this.getqueryTeamAchievement()
			}
			
		},
		onShow() {
			if(uni.getStorageSync('loginType')=='codelogin'){
							this.queryInfo()
						}
			// #ifdef H5
			initJssdkShare(() => {
			  setWechatShare();
			}, window.location.href);
			// #endif
			this.currentBtn = '1'
			this.loginType = uni.getStorageSync('loginType')
		},
		methods: {
			queryInfo() {
							api.queryInfo({userId:uni.getStorageSync('cffp_userId')}).then(res=>{
								// 保存用户得个人信息
								if (res['success']) {
									delete res.data.commonResult
									
									const cffp_userInfo = {
										...res.data
									}
									// 账号禁用用户
									if(res.data.userIsActive&&res.data.userIsActive==2){
										this.$refs.restrictedTip.open()
										uni.setStorageSync('userIsActive',String(res.data.userIsActive))
										return
									}
									if(res.data.userIsActive&&res.data.userIsActive!=2){
										this.$refs.restrictedTip.close()
										uni.removeStorageSync('userIsActive')
									}
									
									uni.setStorageSync('cffp_userInfo', JSON.stringify(cffp_userInfo));
									uni.setStorageSync('user_mobile', res.data.mobile)
									
								}
								
							})
						},
			sortswitch(obj) {
				this.currentFilterBtn = obj.id
				this.CffpOrgInfoReqVO.sortType = obj.sortType
				this.getqueryTeamAchievement()
				
			},
			changeTab(item){
				this.currentTab = item.id
				if(this.currentBtn == '2'){
					this.getqueryTeamAchievement()
				}
				
			},
			getqueryTeamAchievement() {
				    this.CffpOrgInfoReqVO.userId=uni.getStorageSync('cffp_userId'),
					this.CffpOrgInfoReqVO.queryType = this.tabList.filter(item=>item.id == this.currentTab)[0].type
					this.CffpOrgInfoReqVO.sortType = this.btnList.filter(item=>item.id == this.currentFilterBtn)[0].sortType
				api.queryTeamAchievement(this.CffpOrgInfoReqVO).then(res => {
					if (res['success']) {
						this.myTeamAchievementList = []
						// this.listType = true
						this.myTeamAchievementList = res.data.list || [];
						if(this.myTeamAchievementList.length>0){
							this.myTeamAchievementList.forEach(item=>{
								item.saleDate = dataHandling.dateFormat2(item.saleDate,'yyyy-MM-dd')
								item.coursePrice = Number(item.coursePrice).toFixed(2) || '0.00'
							})
						}
						this.totalOrder = res.data.totalOrder ? res.data.totalOrder : '0';
						this.totalCoursePrice = res.data.totalCoursePrice ? Number(res.data.totalCoursePrice).toFixed(2) : '0.00';
						this.monthStandardSales = res.data.monthStandardSales ? Number(res.data.monthStandardSales).toFixed(2) : '0.00';
					}else {
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'					
						})
					}
				})
			},
			// 获取团队数据
			getmyseatem(add = '1') {
				// 1,代表刚进页面，2，代表修改了备注
				this.myTeamList = []
				api.queryMyTeamInfo({
					userId: this.userId,
					type: '3'
				}).then(res =>{
					if(res['success']){
						delete res.data.commonResult
						let data = res.data
						
						if(data.teamCount) {
							this.teamCount = data.teamCount
						}
						
						  if(data.teamInfoVO.name){
							  const remarkName = data.teamInfoVO.name ?
							    (data.teamInfoVO.name.length > 3 ?data.teamInfoVO.name.substring(0, 3) + '...' : data.teamInfoVO.name) : 
							    '';
								data.teamInfoVO.remarkName = remarkName
						  	}
						if(data.teamInfoVO.subList){
							data.teamInfoVO.subList = this.processData2(res.data.teamInfoVO.subList);
						}
						// data.teamInfoVO.subList[0].realName = '王玉珍'
						this.oldMyTeamData = data.teamInfoVO
						if(add=='1'){
							this.myTeamData = data
							this.currentTeam = data.teamInfoVO
							this.myTeamTabList.push({
								level:this.myTeamData.teamInfoVO.level,
								orgInfoId:this.myTeamData.teamInfoVO.orgInfoId,
								name:'我的团队'
							})
						}else if(add == '2'){
							this.myTeamData.teamInfoVO =  this.findItemInTree(data.teamInfoVO,this.currentTeam)
						}
						
						this.showTeam = true
					}else {
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'					
						})
					}
				})
			},
			changeStartTime(obj){
				this.startDate = obj
				this.CffpOrgInfoReqVO.startDate=`${obj.year}-${obj.month<10?`0${obj.month}`:obj.month}`
				this.CffpOrgInfoReqVO.endDate=`${obj.year}-${obj.month<10?`0${obj.month}`:obj.month}`
				this.getqueryTeamAchievement()
				this.showTime1 = false
			},
			changeCurrentBtn(){
				this.currentTab = '1'
				this.currentFilterBtn = '1'
				if(this.currentBtn == '1'){
					this.currentBtn = '2'
					return
				}
				if(this.currentBtn == '2'){
					this.currentBtn = '1'
				}
			},
			goBack(){
				uni.navigateBack({
					delta: 1  
				});
			},
			goteam(item) {
				if(item.type===1){
					uni.navigateTo({
						url:`/pages/personalCenter/teamMembers/teamMembers`,
					})
				}else{
					uni.navigateTo({
						url:`/pages/personalCenter/teamPerformance/teamPerformance`,
					})
				}
			},
			afterLogin(){
				this.loginType = uni.getStorageSync('loginType')
				this.sharelogin = false
				this.userId = uni.getStorageSync('cffp_userId'),
				this.getmyseatem('1')
				this.getqueryTeamAchievement()
			},
			updateRmarkName(item){
				this.updateItem = JSON.parse(JSON.stringify(item))
				console.log('this.updateItem',this.updateItem);
				this.$refs.updatePop.open()
			},
			cancel(){
				this.remarkName = ''
				this.$refs.updatePop.close()
			},
			confirmRemarkName(){
				if(!this.remarkName){
					uni.showToast({
						title: '请输入备注',
						duration: 2000,
						icon: 'none'
					})
					return
				}
				api.editRemarkName({
					orgInfoId: this.updateItem.orgInfoId,
					remarkName: this.remarkName
				}).then(res =>{
					if(res['success']){
						uni.showToast({
							title: '备注修改成功',
							duration: 2000,
							icon: 'none'
						})
						this.$refs.updatePop.close()
						this.remarkName = ''
						this.getmyseatem('2')
						
					}else {
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'					
						})
					}
				})
			},
			lookData(item){
				this.myTeamData.teamInfoVO = this.currentTeam  = JSON.parse(JSON.stringify(item))
				console.log('this.currentTeam ',this.currentTeam );
				this.myTeamTabList.push({
					icon:true,
					level:this.myTeamData.teamInfoVO.level,
					orgInfoId:this.myTeamData.teamInfoVO.orgInfoId,
					name:this.myTeamData.teamInfoVO.realName?this.myTeamData.teamInfoVO.realName:this.myTeamData.teamInfoVO.name
				})
				this.showTeamTab = true
			},
			  processData2(data) {
			     return data.map(item => {
			       // 创建 remarkName
			       const remarkName = item.name ? 
			         (item.name.length > 5 ? item.name.substring(0, 5) + '...' : item.name) : 
			         '';
			       
			       // 创建新对象，保持原数据不变
			       const processedItem = {
			         ...item,
			         remarkName
			       };
			       
			       // 递归处理子项
			       if (item.subList && item.subList.length > 0) {
			         processedItem.subList = this.processData2(item.subList);
			       }
			       
			       return processedItem;
			     });
			   },
			 changeTeamTab(item){
				 console.log('切换',item);
				 console.log('旧数据',this.oldMyTeamData);
				 if(item.level == 1){
					 this.showTeamTab = false
					 this.myTeamData.teamInfoVO = JSON.parse(JSON.stringify(this.oldMyTeamData))
				 }else{
					this.myTeamData.teamInfoVO =  this.findItemInTree(this.oldMyTeamData,item)
					
				 }
				 this.myTeamTabList.forEach((e,index)=>{
					 if(e.orgInfoId == item.orgInfoId){
						 this.myTeamTabList.splice(index + 1);
					 }
				 })
			 },
			 findItemInTree(treeData, target) {
			   // 检查当前节点是否匹配
			   if (treeData.orgInfoId === target.orgInfoId ) {
			     return treeData;
			   }
			   
			   // 如果有子节点，递归查找
			   if (treeData.subList && treeData.subList.length > 0) {
			     for (let i = 0; i < treeData.subList.length; i++) {
			       const found = this.findItemInTree(treeData.subList[i], target);
			       if (found) return found;
			     }
			   }
			   
			   // 没找到返回null
			   return null;
			 }
		},
		
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-popup .uni-popup__wrapper{
		 margin: 0 !important;
		 border-radius: 10rpx;
	 }
	.container{
		background-color: rgba(235, 239, 247, 1);
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		.myHeader{
			color: #fff;
			box-sizing: border-box;
			background: linear-gradient(225deg, rgba(65, 69, 188, 1) 0%, rgba(29, 30, 125, 1) 100%);
			.backArrow{
				box-sizing: border-box;
				display: flex;
				height: 60rpx;
				justify-content: space-between;
				align-items: center;
				position: relative;
				width: 100%;
				margin-bottom: 10rpx;
				color: #fff;
				margin-top: 20rpx;
				text:nth-child(2){
					width: 100%;
					text-align: center;
					position: absolute;
				}
			}
			.timeBox{
				margin-top: 30rpx;
				padding-left: 25rpx;
				width: 50%;
			}
			.renshu{
				padding: 10rpx 25rpx;
				color: #fff;
				.top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 26rpx;
					.right{
						padding: 10rpx 15rpx;
						background-color: #fff;
						border-radius: 30rpx;
						color: rgba(32, 39, 155, 1);
						font-size: 25rpx;
					}
				}
				.bottom{
					font-size: 34rpx;
					font-weight: 500;
				}
			}
			.moneyBox{
				box-sizing: border-box;
				width: 100%;
				background-color: rgba(255,255,255,.15);
				padding:15rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.one{
					font-size: 26rpx;
					text-align: center;
					width: 50%;
					position: relative;
				}
				.one::after{
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 0;
					content: '';
					height: 40rpx;
					border: 1rpx dashed #fff;
					
				}
				.two{
					font-size: 26rpx;
					text-align: center;
					width: 50%;
				}
			}
		}
		.teamBox{
			margin-top: 10rpx;
			.teamHeader{
				background-color: #fff;
				box-sizing: border-box;
				.oneHeader{
					padding: 30rpx 20rpx;
					box-sizing: border-box;
					.self{
						font-size: 30rpx;
						color: #333333;
					}
					.duiyuan{
						font-size: 26rpx;
						color: #ccc;
						margin-left: 10rpx;
					}
				}
				.twoHeader{
					box-sizing: border-box;
					width: 100%;
					padding: 40rpx 20rpx 20rpx 20rpx;
					.teamTabBox{
							    box-sizing: border-box;
								width: 100%;
								background-color: #fff;
								// padding: 20rpx 60rpx 0 60rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								.scroll-view_H {
										white-space: nowrap;
										width: 100%;
										box-sizing: border-box;
									}
									.scroll-view-item {
										text-align: center;
										font-size: 36rpx;
									}
									.scroll-view-item_H {
										margin-bottom: 20rpx;
										display: inline-block;
										margin-right: 5rpx;
										text-align: center;
										font-size: 28rpx;
										color: rgba(46, 38, 29, 1);
										&.active{
											color: rgba(32, 39, 155, 1);
											position: relative;
											
										}
										&.active::before{
											display: block;
											content: "";
											position: absolute;
											left: 50%;
											transform: translate(-50%);
											bottom: -3%;
											width: 50%;
											// height: 1rpx;
											border: 1rpx solid rgba(32, 39, 155, 1);
											border-radius: 5rpx;
										}
										.icon-jiantou2{
											font-size: 26rpx;
											color: #ccc;
											margin-right: 5rpx;
										}
									}
									.scroll-view-item_H:last-child{
										margin-right: 50rpx;
									}
									.scrollBtn {
										display: inline-block;
										margin-right: 20rpx;
										text-align: center;
										font-size: 27rpx;
										padding: 10rpx 20rpx;
										color: rgba(46, 38, 29, 1);
										&.active{
											color: rgba(32, 39, 155, 1);
											
										}
									}
									.scrollBtn:last-child{
										margin-right: 0rpx;
									}
									.filterItem{
										background: #f7f7f7;
										font-size: 27rpx;
										padding: 10rpx;
										color: rgba(46, 38, 29, 1);
										border-radius: 8rpx;
										&.active{
											background: rgba(32, 39, 155, 1);
											color: #fff;
										}
									}
							}
				}
			}
			.teamPeople{
				background-color: #fff;
				padding: 30rpx 20rpx;
				margin-top: 20rpx;
				box-sizing: border-box;
				.oneLevel{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					width: 100%;
					box-sizing: border-box;
					// .avatar{
					// 	min-width: 150rpx;
					// 	border-radius: 50%;
					// 	overflow: hidden;
					
					// }
					.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;
						}
					}
					.topR{
						flex: 1;
						margin-left: 20rpx;
					}
					.mySelfName{
						font-size: 30rpx;
						color: #333333;
					}
					.position, .leavelName{
						padding: 10rpx 15rpx;
						border-radius: 5rpx;
						border: 1rpx solid #FFBB00;
						font-size: 26rpx;
						color: #FFBB00;
					}
					.position{
						margin: 0rpx 15rpx;
					}
					.top{
						display: flex;
						align-items: center;
						justify-content: flex-start;
					}
					.bottom{
						font-size: 24rpx;
						color: #808080;
						margin-top: 5rpx;
					}
				}
				.twoLevel{
					box-sizing: border-box;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
					.left{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						.line{
							width: 18%;
							display: flex;
							justify-content: flex-end;
							margin-top: -40rpx;
							.box{
								width: 30rpx;
								height: 30rpx;
								border-left: 2rpx solid #ccc;
								border-bottom: 2rpx solid #ccc;
							}
							.icon-lujing{
								color: #ccc;
								font-size: 24rpx;
								transform: scaleX(-1); /* 水平翻转 */
								display: inline-block; /* 确保 transform 生效 */
							}
						}
						.peopleInfo{
							margin-left: 40rpx;
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							.twoAvatar{
								// width: 80rpx;
								// border-radius: 50%;
								flex-grow: 0;
								width: 80rpx;
								height: 80rpx;
								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;
								}
							}
							.leftR{
								flex: 1;
								margin-left: 20rpx;
								.top{
									display: flex;
									align-items: center;
									justify-content: flex-start;
									.nickName{
										font-size: 26rpx;
										color: #333333;
									}
									.icon-xiugai{
										font-size: 26rpx;
										color: #333333;
										margin: 0 15rpx;
										
									}
									.nameLevel{
										padding: 5rpx 15rpx;
										border-radius: 5rpx;
										border: 1rpx solid #FFBB00;
										font-size: 25rpx;
										color: #FFBB00;
									}
								}
								.bottom{
									font-size: 24rpx;
									color: #808080;
									margin-top: 5rpx;
								}
							}
						}
					}
					.right{
						display: flex;
						align-items: center;
						.rNum{
							color: #333333;
							font-size: 28rpx;
							margin-right: 5rpx;
						}
						.icon-jiantou2{
							color: #ccc;
							font-size: 26rpx;
						}
					}
				}
				.twoLevel:last-child{
					margin-bottom: 0rpx;
				}
			}
		}
		.emptyTxt{
			width: 100%;
			margin-top: 50rpx;
			color: #666666;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.filterBox{
		    box-sizing: border-box;
			width: 100%;
			background-color: #fff;
			padding: 20rpx 60rpx 0 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.scroll-view_H {
					white-space: nowrap;
					width: 100%;
					box-sizing: border-box;
				}
				.scroll-view-item {
					text-align: center;
					font-size: 36rpx;
				}
				.scroll-view-item_H {
					margin-bottom: 20rpx;
					display: inline-block;
					margin-right: 20rpx;
					text-align: center;
					font-size: 27rpx;
					padding: 10rpx 20rpx;
					color: rgba(46, 38, 29, 1);
					&.active{
						color: rgba(32, 39, 155, 1);
						position: relative;
						
					}
					&.active::before{
						display: block;
						content: "";
						position: absolute;
						left: 50%;
						transform: translate(-50%);
						bottom: -3%;
						width: 50%;
						// height: 1rpx;
						border: 1rpx solid rgba(32, 39, 155, 1);
						border-radius: 5rpx;
					}
				}
				.scroll-view-item_H:last-child{
					margin-right: 0rpx;
				}
				.scrollBtn {
					display: inline-block;
					margin-right: 20rpx;
					text-align: center;
					font-size: 27rpx;
					padding: 10rpx 20rpx;
					color: rgba(46, 38, 29, 1);
					&.active{
						color: rgba(32, 39, 155, 1);
						
					}
				}
				.scrollBtn:last-child{
					margin-right: 0rpx;
				}
				.filterItem{
					background: #f7f7f7;
					font-size: 27rpx;
					padding: 10rpx;
					color: rgba(46, 38, 29, 1);
					border-radius: 8rpx;
					&.active{
						background: rgba(32, 39, 155, 1);
						color: #fff;
					}
				}
		}
		.tableBox{
			// background-color: #fff;
			padding: 20rpx;
			width: 100%;
			box-sizing: border-box;
			border-radius: 20rpx;
			.table{
				background-color: #fff;
				border-radius: 20rpx;
				padding: 10rpx 0;
				margin-bottom: 50rpx;
				box-sizing: border-box;
				.content-box {
					display: flex;
					font-weight: 600;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F2F2F2;
					padding: 20rpx 0;
				}
				
				.content-box-title {
					flex: 1;
					font-size: 28rpx;
					text-align: center;
					
				}
				.content-sam-box{
					background-color: #fff;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					justify-content: space-between;
					padding: 20rpx 0;
					color: #333333;
					border-bottom: 1px solid #F2F2F2;
					
					.cell{
						font-size: 24rpx;
					}
				}
				.content-sam-box:last-child{
					border: none;
				}
				.empty{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 200rpx;
					font-size: 26rpx;
					color: #333333;
				}
			}
			
		}
		.updateCon{
			width: 500rpx;
			.top{
				padding: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				box-sizing: border-box;
				.title{
					color: #333333;
					font-size: 30rpx;
					
				}
				.inputBox{
					box-sizing: border-box;
					width: 100%;
					background-color: #F2F2F2;
					padding: 20rpx 20rpx;
					border-radius: 5rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
					.userInput{
						font-size: 26rpx;
						flex: 1;
					}
					.useReal{
						width: 100rpx;
						color: #20269B;
						font-size: 24rpx;
					}
				}
			}
			.bottomBtn{
				width: 100%;
				border-top: 1rpx solid rgba(0, 0, 0, .2);
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left,.right{
					width: 50%;
					text-align: center;
					padding: 30rpx 0rpx;
					font-size: 28rpx;
				}
				.left{
					border-right: 1rpx solid rgba(0, 0, 0, .2);
					color: #666666;
				}
				.right{
					color: #20269B;
				}
			}
		}
		@media (min-width: 768px) {
		  .teamBox {
		    .teamPeople{
				.twoLevel{
					.left{
						.line{
							width: 5%;
						}
					}
				}
			}
		  }
		}
		/* iPad mini 竖屏 */
		@media only screen 
		  and (min-device-width: 768px) 
		  and (max-device-width: 1024px) 
		  and (orientation: portrait) 
		  and (-webkit-min-device-pixel-ratio: 1) {
			.teamBox {
			  .teamPeople{
							.twoLevel{
								.left{
									.line{
										width: 20%;
									}
								}
							}
						}
			}
			
		}
		
		/* iPad Air 竖屏 */
		@media only screen 
		  and (min-device-width: 820px) 
		  and (max-device-width: 1180px) 
		  and (orientation: portrait) 
		  and (-webkit-min-device-pixel-ratio: 1) {
			.teamBox {
			  .teamPeople{
							.twoLevel{
								.left{
									.line{
										width: 20%;
									}
								}
							}
						}
			}
		}
		/* iPad Pro 11-inch 竖屏 */
		@media only screen 
		  and (min-device-width: 834px) 
		  and (max-device-width: 1194px) 
		  and (orientation: portrait) 
		  and (-webkit-min-device-pixel-ratio: 2) {
		  .teamBox {
		    .teamPeople{
		      .twoLevel{
		        .left{
		          .line{
		            width: 7%;
		          }
		        }
		      }
		    }
		  }
		}
		
		/* iPad Pro 12.9-inch 竖屏 */
		@media only screen 
		  and (min-device-width: 1024px) 
		  and (max-device-width: 1366px) 
		  and (orientation: portrait) 
		  and (-webkit-min-device-pixel-ratio: 2) {
		  .teamBox {
		    .teamPeople{
		      .twoLevel{
		        .left{
		          .line{
		            width: 7%;
		          }
		        }
		      }
		    }
		  }
		}
	}
</style>