<template>
	<view class="workbench-box">
		<u-navbar title=" " :is-back="false">
			<view class="navbar-title-box" @click="toggleTeam">
				<text class="navbar-title u-line-1">{{activeTeam.name?activeTeam.name:'未查询到组织'}}</text>
				<!-- <u-icon name="list" color="#222" size="48rpx"></u-icon> -->
			</view>
		</u-navbar>
		
		<!-- 组织切换 -->
		<u-popup v-model="teamShow" :border-radius="10" :negative-top="-300" mode="top"   @close="teamClose">
			<scroll-view scroll-y="true" show-scrollbar="true" scroll-top="0" class="popup-scroll">
				<view class="team-list">
					<text class="team-num">组织工作台 ({{teamList.length?teamList.length:0}})</text>
					<view class="team-item" v-for="(item,index) in teamList" :key="item.id" @click="clickTeam(index)">
						<view class="team-left">
							<view class="team-item-icon" v-if="item.imgPath">
								<image :src="item.imgPath" alt="">
							</view>
							<view class="team-item-icon icon-bg" v-else>
								{{item.name[0]}}
							</view>
							<text class="team-name u-line-1" :class="teamIndex==index?'active':''">{{item.name}}</text>
						</view>
						<u-icon v-if="teamIndex==index" name="checkbox-mark" color="#1890ff" size="48rpx"></u-icon>
					</view>
					<u-empty v-if="!teamList.length" mode="list" text="未查询到组织,请联系管理员添加"></u-empty>
				</view>
			</scroll-view>
		</u-popup>
		<view class="main-box">
			<u-swiper
				class="item-box"
				:list="bannerlist"
				height="260rpx"
				circular
			></u-swiper>
			<view class="common-list item-box">
				<view class="common-item" v-for="(item,index) in commonList" :key="item.id" @click="goCommonApplication(item.isWebview,index)">
					<view class="icon-bg" :style="{ backgroundColor: item.bgColor}">
						<view v-if="item.icon" class="iconfont item-icon" :class="'icon-' + item.icon" :style="{fontWeight:item.iconBold == 'true'?'bold':'normal'}"></view>
						<view v-else-if="item.iconImg" class="item-img" :class="item.iconImg">
							<image :src="item.iconImg" mode=""></image>
						</view>
						<view v-else class="item-txt">{{item.title[0]}}</view>
					</view>
					<text class="item-name">{{item.title}}</text>
				</view>
				<view class="marauto" v-if="!commonList.length">
					<u-empty
						text="没有常用应用"
					>
					</u-empty>
				</view>
			</view>
			<view class="app-list-box item-box" v-if="false">
				<u-tabs class="tabs-box" :list="tabsList" :is-scroll="true" :current="tabIndex" @change="tabChange"></u-tabs>
				<view class="app-list">
					<view class="app-item" v-for="(item,index) in appList[tabIndex]" :key="item.id" @click="goApplication(item.isWebview,index)">
						<view class="icon-bg" :style="{ backgroundColor: item.bgColor}">
							<view v-if="item.iconfont" class="iconfont item-icon" :class="item.iconfont" :style="{fontWeight:item.iconBold == 'true'?'bold':'normal'}"></view>
							<view v-else-if="item.iconImg" class="item-img" :class="item.iconImg">
								<image :src="item.iconImg" mode=""></image>
							</view>
							<view v-else class="item-txt">{{item.name[0]}}</view>
						</view>
						<text class="item-name">{{item.name}}</text>
					</view>
					<view class="marauto" v-if="!appList[tabIndex].length">
						<u-empty
							mode="permission"
							text="没有应用权限,请联系管理员添加"
						>
						</u-empty>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import data from '@/common/js/workbench.js'
	export default{
		data(){
			return{
				teamList:data.teamList,
				activeTeam:{
					id:1,
					name:'物联网可视化',
					imgPath:''
				},
				teamIndex:0,
				teamShow:false,
				bannerlist: data.bannerlist,
				commonList:[],
				tabsList:data.tabsList,
				tabIndex:0,
				appList:data.appList,
			}
		},
		onLoad() {
			uni.getStorage({
				key:'appName',
			}).then(res => {
				if(res.length==2){
					this.activeTeam.name = res[1].data;
				}
			})
			this.getUserInfo();
			this.getUserMenu();
			this.tabIndex = 1;
			this.tabIndex = 0;
		},
		onShow() {
			this.getUnreadNewNum();
		},
		mounted() {
		},
		methods:{
			// 获取未读消息数量
			getUnreadNewNum(){
				this.$api.newApi.getNewsCount({}).then((res)=>{
					if(res.code == 0){
						if(res.data.letterCount){
							uni.showTabBarRedDot({
							        index: 3
							})
						}else{
							uni.hideTabBarRedDot({
							        index: 3
							})
						}
					}
				})
			},
			getUserInfo(){
				this.$api.getUserInfo({}).then(res => {
					console.log("获取用户信息",res)
					if(res.code == 0){
						uni.setStorageSync('userInfo',res.data)
					}
				}, error => {
				})
			},
			getUserMenu(){
				this.$api.getUserMenu({clientType:2}).then(res => {
					console.log("获取用户菜单",res)
					if(res.code == 0){
						this.commonList = res.data.list?res.data.list:[];
					}
				}, error => {
				})
			},
			toggleTeam(){
				// this.teamShow = !this.teamShow;
			},
			teamClose(){
				this.teamShow = false;
			},
			clickTeam(index){
				this.teamIndex = index;
				this.activeTeam = this.teamList[index];
				// 切换组织、这里重新查询工作台数据
			},
			// 跳转常用应用
			goCommonApplication(isWebview,index){
				let data = this.commonList[index]
				console.log("当前应用",isWebview,data)
				if(isWebview){
					// 跳转webview页面，带url参数
					uni.navigateTo({
						url:'/pages/work/webview?url='+encodeURIComponent(data.webviewUrl)+'&name='+data.name
					})
				}else{
					uni.navigateTo({
						url:data.path
					})
				}
			},
			// 跳转应用
			goApplication(isWebview,index){
				let data = this.appList[this.tabIndex][index]
				if(isWebview){
					// 跳转webview页面，带url参数
					uni.navigateTo({
						url:'/pages/work/webview?url='+encodeURIComponent(data.webviewUrl)+'&name='+data.name
					})
				}else if(data.path == '../tabbar/home'){
					uni.switchTab({
						url:'/pages/tabbar/home'
					})
				}else if(data.path == 'untapped'){
					uni.$u.toast('功能开发中');
				}else{
					uni.navigateTo({
						url:data.path
					})
				}
			},
			tabChange(e){
				console.log("点击tab",e)
				this.tabIndex = e;
			}
		}
	}
</script>
<style>
	page{
		background: #f2f1f6;
	}
</style>
<style lang="scss" scoped>
	.workbench-box{
		.navbar-title-box{
			display: flex;
			align-items: center;
			flex:1;
			padding: 0 30rpx;
			.navbar-title{
				/* #ifdef MP-WEIXIN */
				max-width: 480rpx;
				/* #endif */
				/* #ifndef MP-WEIXIN */
				max-width: 630rpx;
				/* #endif */
				font-size: 36rpx;
				font-weight: bold;
				margin-right: 6rpx;
			}
		}
		.popup-scroll{
			max-height: 750rpx;
			
			.team-list{
				padding: 13px;
				.team-num{
					font-size: 24rpx;
					color: $hintColor;
					margin-bottom: 10rpx;
				}
				.team-item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 0;
					.team-left{
						display: flex;
						align-items: center;
						.team-item-icon{
							width: 60rpx;
							height: 60rpx;
							border-radius: 10rpx;
							overflow: hidden;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 10rpx;
							&.icon-bg{
								background-color: $bgColor-blue;
								color: $uni-text-color-inverse;
								font-size: 36rpx;
								font-weight: 400;
							}
							image{
								width: 100%;
								height: 100%;
							}
						}
						.team-name{
							max-width: 580rpx;
							&.active{
								color: $bgColor-blue;
							}
						}
					}
				}
			}
		}
		
	}
	::v-deep .u-drawer-top{
		/* #ifdef MP-WEIXIN */
		top:calc(var(--status-bar-height) + 42px) !important;
		/* #endif */
		/* #ifdef APP-PLUS */
		top:calc(var(--status-bar-height) + 44px) !important;
		/* #endif */
	}
	// 提交导航栏层级、覆盖弹框
	::v-deep .u-navbar{
		z-index: 10076 !important;
	}
	
	.main-box{
		// navbar title为空时没有占位
		// margin-top: calc(var(--status-bar-height) + 44px);
		padding: 20rpx;
		
		.item-box{
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
		}
		.common-list{
			display: flex;
			flex-wrap: wrap;
			padding-top: 30rpx;
			.common-item{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 25%;
				margin-bottom: 30rpx;
				.icon-bg{
					width: 90rpx;
					height: 90rpx;
					// border-radius: 20rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					
					// font-size: 60rpx;
					// line-height: 60rpx;
					// background-color: #016af9;
					// background-color: #84c3f3;
					// background-image: linear-gradient(180deg, #84c3f3 0%, #0a87e8 50%, #1890ff 100%);
					// color: #0055ff;
					background: linear-gradient(0deg, #C0E8FF 0%, #FFFFFF 64%);


					.item-icon{
						font-size: 60rpx;
						background-image: -webkit-linear-gradient(90deg, #3BBCFF, #006CFF);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					.item-img{
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						image{
							width: 80%;
							height: 80%;
						}
					}
					.item-txt{
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 50rpx;
						font-weight: 800;
						background-image: -webkit-linear-gradient(90deg, #3BBCFF, #006CFF);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						font-family: Georgia, 'Times New Roman', Times, serif;
					}
				}
				.item-name{
					margin-top: 5rpx;
					font-size: 26rpx;
				}
			}
		}
	}
	
	.app-list-box{
		.tabs-box{
			border-bottom: 1px solid #fbfbfb;
		}
		.app-list{
			display: flex;
			flex-wrap: wrap;
			padding-top: 30rpx;
			.app-item{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 20%;
				margin-bottom: 30rpx;
				.icon-bg{
					width: 80rpx;
					height: 80rpx;
					// border-radius: 20rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 50rpx;
					line-height: 50rpx;
					// background-color: #016af9;
					background: linear-gradient(0deg, #C0E8FF 0%, #FFFFFF 64%);
					.item-icon{
						font-size: 50rpx;
						background-image: -webkit-linear-gradient(90deg, #3BBCFF, #006CFF);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					.item-img{
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						image{
							width: 80%;
							height: 80%;
						}
					}
					.item-txt{
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 40rpx;
						font-weight: 800;
						background-image: -webkit-linear-gradient(90deg, #3BBCFF, #006CFF);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						font-family: Georgia, 'Times New Roman', Times, serif;
					}
				}
				.item-name{
					margin-top: 5rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	
	.marauto{
		margin: 0 auto;
		margin-bottom: 30rpx;
	}
</style>