<template>
	<view class="container">
		<view class="doctor-info">	
			<image :src="bg" class="bg"></image>
			<view class="user">
				<view class="info">
					<view class="name">{{user.userName}}</view>
					<view class="group">{{user.groupName}}</view>	
					<view class="ocName">{{user.ocName||user.positionName}}</view>
				</view>
				<template v-if="user.type<4">
					<image  class="avatar radius" src="/static/index/piont.png"></image>
				</template>
				<template  v-else>
					<image :src="user.userAvatar" class="avatar" @error="avatarError" v-if="user.userAvatar"></image>
					<image :src="defAvatar" class="avatar" v-else></image>
				</template>
			</view>
			<view class="introduce" v-if="user.userIntro">{{user.userIntro}}</view>
		</view>
		<view class="notice" v-if="alertnotice">
			<view class="notice-name">
				<image class="icon" src="/static/index/alert.png" mode="widthFix"></image>
<!-- 				<text class="text">预警</text> -->
			</view>
			<view class="notice-cont">
				<uni-notice-bar
					v-if="alertnotice"	
					@getmore="getmorealert"								
					scrollable :text="alertnotice" 
					background-color="#fff0"
					:speed="30"
					ref="uni-notice-bar"
					show-get-more 										
					color="#333" />
			</view>
		</view>
		<view class="tab-container" v-if="showTab">
			<view class="header">待办事项</view>
			<view class="tab">
				<div class="tab-item" @click="linkTo('task','待办任务')" v-if="todos.checkTaskCount>0">
					<view class="tab-name">任务处理</view>
					<view class="number task">{{todos.checkTaskCount>99?'99+':taskTotal}}</view>
				</div>
				<div class="tab-item" @click="linkTo('danger','待处理隐患')" v-if="todos.dangerCount>0">
					<view class="tab-name danger">隐患处理</view>
					<view class="number">{{todos.dangerCount>99?'99+':todos.dangerCount}}</view>
				</div>	
				<div class="tab-item" @click="linkTo('warn','告警事件')" v-if="todos.warningCount>0">
					<view class="tab-name">告警处理  </view>
					<view class="number warn">{{todos.warningCount>99?'99+':todos.warningCount}}</view>
				</div>							
				<div class="tab-item" @click="linkTo('alert','预警事件')" v-if="todos.snapshotCount>0">
					<view class="tab-name">预警处理</view>
					<view class="number alert">{{todos.snapshotCount>99?'99+':todos.snapshotCount}}</view>
				</div>
			</view>			
		</view>
		<view class="app-container">
			<view class="app-title">常规操作</view>
			<view class="app-list">
				<view class="app-item" v-for="(item,index) in actionList" :key="index" @click="handle(item)">
					<image class="logo" :src="item.miniLogo" ></image>
					<view class="app-cont">
					<view class="name">{{item.miniTitle}}</view>						
						<view class="desc" v-if="item.miniDesc">{{item.miniDesc}}</view>
					</view>
				</view>				
			</view>
		</view>
		<uni-popup ref="alertpopup" is-mask-click>
			<view class="alert-container">
				<uni-list>
					<uni-list-item  v-for="(item,aIdx) in alertList" :key="aIdx"
					:title="item.alertTitle" 
					:rightText="item.alertTime"
					:note="item.alertContent">
					 </uni-list-item>
				</uni-list>								
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import defAvatar from '@/static/avatar.png'
	import {wxLogin} from '@/api/openApi.js'
	import {getByQr,getApps} from '@/api/system/scan.js'
	import {getQueryParams} from '@/utils/index.js'
	
	export default {
		data() {
			return {
				actionList:[],
				defAvatar:defAvatar,
				bg:'',
				user:{
					userAvatar:""
				},
				alertnotice:undefined,
				alertList:[],
				todos:{
					checkTaskCount: 0,
					dangerCount: 0,
					snapshotCount: 0,
					warningCount: 0				
				},
				miniList:[]
			}
		},
		onLoad(options){
			this.init(options)
		},
		computed:{				
			showTab(){
				return this.todos.checkTaskCount>0||this.todos.dangerCount>0||this.todos.snapshotCount>0||this.todos.warningCount>0
			}
		},
		methods: {
			async init(options){
				if(options && options.hasOwnProperty('q') ){				
				  let URL = decodeURIComponent(options.q);						
				  options=getQueryParams(URL)			
				}
				this.getData(options)
			},
			setUnionid(){
				return new Promise((resolve,reject)=>{
					uni.login({
						provider: 'weixin',
						success: function (loginRes) {
							let code=loginRes.code;
							wxLogin(code).then((resp)=>{
								const { code, data, msg } = resp
								resolve(resp)
							}).catch((resp)=>{
								reject(resp)
							})
						},
						fail(resp) {
							reject(resp)
						}
					})		
				})
			},
			getData({ocId, code}){
				if(!ocId){
					let qrcode=uni.getStorageSync('qrcode')
					if(!qrcode){return}
					ocId=qrcode.ocId
					code=qrcode.code
				}
				uni.setStorageSync('qrcode',{ocId,code})
				let isLogin=uni.getStorageSync('isLogin')
				if(!isLogin){
					uni.showToast({
						title:"请授权登录登录失效！",
						mask: true,
						icon: "none",
						complete() {
							uni.redirectTo({
								url: '/pages/authorizedLogin/index'
							})
						}
					})	
					return
				}
				getByQr(ocId, code).then((res)=>{
					let type=res.data.targetType					
					uni.setStorageSync('qrcode',{
						...res.data.target,
						targetId:res.data.targetId,
						targetType:res.data.targetType,
						targetTitle:res.data.targetTitle,
						ocId,
						code
					})				
					let desc="";
					if(type===1){desc=res.data.target.riskPointDesc}
					if(type===2){desc=res.data.target.gridDesc}
					if(type===3){desc=res.data.target.equipDesc;}
					if(type===4){desc=res.data.target.doctorDesc}
					if(type===5){desc=res.data.target.doctorResume}
					let riskPointTypeTitle=res.data.target.riskPointTypeTitle?res.data.target.riskPointTypeTitle:"";
					let riskPointCatTitle=res.data.target.riskPointCatTitle?`【${res.data.target.riskPointCatTitle}】`:""
					res.data.target.positionName=`${riskPointTypeTitle}${riskPointCatTitle}`
					this.user={
						type:res.data.targetType,
						userName:res.data.targetTitle,
						groupName:res.data.targetGroupName,
						userAvatar:res.data.target.doctorAvatar,
						positionName:res.data.target.positionName,
						userIntro:desc,
					}
					if(type>3){
						this.bg='/static/index/bg.png'
					}else{
						this.bg=type===1?'/static/index/riskBg.png':(type===2?'/static/index/areaBg.png':'/static/index/eqBg.png')
					}														
					getApps(res.data.targetId).then((res)=>{
						this.actionList=res.data.miniList
						if(res.data.alertList){
							this.alertList=res.data.alertList
							this.alertnotice=res.data.alertList.reduce((pre,item,index)=>`${pre}  ${index+1}、${item.alertContent},${item.alertTime};`,'')
							this.$nextTick(()=>{
								this.$refs['uni-notice-bar'].initSize()
							})							
						}
						if(res.data.todos){
							this.todos=res.data.todos
						}						
						if(res.data.wxId)uni.setStorageSync('wxId',res.data.wxId)
						uni.setStorageSync('isAccount',res.data.isAccount)					
					})
				})	
			},
			avatarError(){
				this.user.userAvatar=defAvatar
			},
			handle(item){
				if(item.miniCode==='danger-submit'){	//隐患登记				
					uni.navigateTo({url:'/pages/app_views/danger/submit/submit'})
				}				
				if(item.miniCode==='checklist_point'){// 清单
					uni.navigateTo({url:'/pages/app_views/checkList/index/index?type=app&id='+item.checklistId})
				}
				if(item.miniCode==='checklist_score'){// 满意度
					uni.navigateTo({url:'/pages/app_views/satisfaction_evaluation/satisfaction_evaluation?type=app&id='+item.checklistId})
				}	
				if(item.miniCode==='checklist_hazard'){// 危险源
					uni.navigateTo({url:'/pages/app_views/hazard/index/index?type=app&id='+item.checklistId})
				}
				if(item.miniCode==='app-snapshot'){	//问题反馈				
					uni.navigateTo({url:'/pages/app_views/problem_feedback/problem_feedback'})
				}	
				if(item.miniCode==='mini_check_in'){//打卡
					uni.navigateTo({url:'/pages/app_views/clockIn/index'})
				}
			},
			isNull(val){
				if(val===undefined||val==="undefined"||val===""||val===null){
					return true
				}
				return false
			},
			linkTo(type,name){
				let riskPointId=uni.getStorageSync('qrcode').riskPointId
				uni.navigateTo({
					url:`/pages/index/detail/detail?type=${type}&name=${name}&rid=${riskPointId}`
				})							
			},
			getmorealert(){
				this.$refs.alertpopup.open("center")
			}
		},
		onShareAppMessage() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		padding: 48rpx 36rpx;
		font-size: 14px;
		line-height: 24px;
		background-color:rgba(245,246,248,1);
		box-sizing: border-box;
		.doctor-info{
			background-image: url('/static/index/bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 30rpx 48rpx 48rpx 48rpx;
			box-sizing: border-box;
			color: #fff;
			position: relative;
			.bg{
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}
			.user{
				 display: flex;
				 justify-content: space-between;
				 align-items: center;
				.info{
					position: relative;
					padding-left: 20rpx;
					.name{
						font-size: 32rpx;
						font-weight: 700;
						line-height: 1;					
					}
					.group{
						font-size: 24rpx;
						font-weight: 400;
						line-height: 1;		
						margin-top: 16rpx;
					}
					.ocName{
						font-size: 24rpx;
						font-weight: 400;
						line-height: 1;
						margin-top: 16rpx;						
					}
					&::after{
						width: 1px;
						height: 100%;
						display: block;
						content: "";
						position: absolute;
						border-radius: 10px;
						top: 0;
						left: 0;
						background-color: #83D047;
					}
				}
				.avatar{
					display: block;
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					&.radius{
						border-radius:34rpx;
					}
				}
			}
			.introduce{
				padding-top: 30rpx;				
				max-height: 318rpx;
				font-family: SF Pro Text;
				font-size: 30rpx;
				font-weight: 400;
				line-height: 44rpx;
				color: #fff;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 7;
				-webkit-box-orient: vertical;
				text-align: justify;
				word-break: break-all;
			}
		}
		.notice{
			height: 84rpx;
			background-color:rgba(245, 246, 248, 1);
			margin-top: 28rpx;
			border-radius: 6rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;					
			box-shadow: 0px 10px 10px -4px rgba(45, 54, 67, 0.2);
			padding-left:28rpx;
			.notice-name{
				height: 84rpx;	
				display: flex;
				align-items: center;							
				font-weight: 600;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.9);
				.icon{
					width: 40rpx;
					height: 40rpx;
					// padding-right: 8rpx;
					// margin-top:8rpx ;
				}
				.text{
					font-size: 28rpx;
					line-height: 1;
					// margin-top:8rpx ;					
				}
			}
			.notice-cont{
				width: 600rpx;
				height: 80rpx;
				flex: 1;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.9);
				// background-color: #fff;
			}
		}
			
		.tab-container{
			background-color: #fff;
			margin-top: 32rpx;
			border-radius: 16rpx;
			.header{
				width: 216rpx;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				background-image: url(data:image/png;base64, );				
				background-repeat: no-repeat;
				background-size: 100% 100%;	
				font-size: 32rpx;
				color: #fff;
			}
			.tab{
				display: flex;
				align-items: center;
				padding: 28rpx 0;
				.tab-item{
					width: 25%;
					// height: 150rpx;
					display: flex;
					justify-content: center;
					align-items: center;	
					flex-direction: column;
					.icon{
						width: 96rpx;
					}
					.tab-name{
						font-size: 28rpx;
						line-height: 1;
						color: #222;
						padding-top: 12rpx;
					}
					.number{
						color: #000;
						font-size: 36rpx;
						line-height: 40rpx;	
						font-weight: 700;
						padding-top: 8rpx;
						&.task{
							color: #4D73FF;
						}
						&.danger{
							color: #FE4644;
						}
						&.warn{
							color: #F4752D;
						}
					}
				}
			}			
		}
		.alert-container{
			width: 96%;
			height: 60vh;
			overflow-y: auto;
			margin: 0 auto;
		}
		.app-container{
			.app-title{
				font-size: 34rpx;
				color: #000;
				line-height: 1;
				padding: 40rpx 0;
				font-weight: 600;
			}
			.app-list{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.app-item{
					display: flex;
					align-items: center;
					width: 330rpx;
					height: 160rpx;
					padding: 20rpx;
					box-sizing: border-box;
					border-left: 0;
					background-color: #fff;
					margin-bottom: 18rpx;
					border-radius: 20rpx;
					.logo{
						display: block;
						width: 66rpx;
						height: 66rpx;
						border: 1px solid #efe3e3;
						border-radius: 50%;
						overflow: hidden;
					}
					.app-cont{
						flex: 1;
						margin-left: 14rpx;
						.name{
							width: 100%;
							color: #222222;
							font-size: 32rpx;
							line-height: 1;
							margin-bottom: 20rpx;
							text-overflow: ellipsis;
							word-break: break-all;
							overflow: hidden;
							white-space: nowrap;
						}
						.desc{
							width: 203rpx;
							height: 48rpx;
							background: linear-gradient(128.57deg, rgba(253, 198, 48, 0.1), rgba(244, 125, 52, 0.1));
							color: #FFAB08;
							font-size: 24rpx;
							line-height: 48rpx;
							padding-left: 16rpx;
							box-sizing: border-box;
						}						
					}
				}				
			}
		}
	}
</style>
