<template>
	<view class="content con">
		<!-- 头部 -->
		<self-header @changeTab="changeTab" :conType="myNavType" :tabIndex="tabIndex" @addPerson="addPerson" @openPop="openPop" :isDoctor="isDoctor"></self-header>
		<!-- 头部 -->

		<!-- 课件 -->
		<view class="" v-if="tabIndex == 1">
			<!-- 课件列表 -->
			<self-case v-if="!isDetail" :dataSource="info" :status="statusArr" :person="selectPersonList" @openDetail="openDetail" :isDoctor="isDoctor" @refreshList="refreshList" :selectUser='selectUser'></self-case>
			<!-- 课件列表 -->

			<!-- 课件详情 -->
			<self-detail v-if="isDetail" :steps="steps" :dataSource="detailInfo" @goHome="isDetail = false" @edit="editCase" :isDoctor="isDoctor"></self-detail>
			<!-- 课件详情 -->
		</view>
		<!-- 课件 -->

		<!-- 我的 -->
		<view class="" v-if="tabIndex == 2">
			<self-my v-if="myNavType == 'main'" :status="msgStatus" :dataSource="messageList" @navTo="navTo"></self-my>
			<self-my-notice v-if="myNavType == 'notice'" @openDetail="openCaseDetail" :dataSource="messageList" :status="msgStatus" @navTo="navTo"></self-my-notice>
			<self-my-advice v-if="myNavType == 'advice'" :dataSource="userInfo" @navTo="navTo"></self-my-advice>
			<self-my-volunteer v-if="myNavType == 'volunteer'" :dataSource="bindPersonList" @navTo="navTo" :isDoctor="isDoctor" @refresh='refresh' @clickAll='clickAll' @clickItem='clickItem'></self-my-volunteer>
		</view>
		<!-- 我的 -->

		<!-- 新增课件 -->
		<uni-popup ref="popupCase" :mask-click="false" type="center" background-color="#fff">
			<add-case :person="selectPersonList" :data="caseDetail" @close="closePopupCase" @showLoad="showPopupCase = true" @closeLoad="showPopupCase = false" :isDoctor="isDoctor"></add-case>
		</uni-popup>
		<!-- 新增课件 -->

		<!-- 新增志愿者、医生 -->
		<uni-popup ref="popupPerson" :mask-click="false" type="center" background-color="#fff">
			<view class="popCon">
				<view class="popCon_top">
					<view class="popCon_top_left"  v-if="isDoctor" @click="() => isShowQrcode = !isShowQrcode">
						<img v-if="isShowQrcode" src="@/static/images/hand.svg" class="icons-custom" />
						<img v-else  src="@/static/images/qrcode.svg" class="icons-custom" />
						<view class="popCon_top_left_text color-custom">{{isShowQrcode ? '手动绑定' : '扫码绑定'}}</view>
					</view>
					<view v-else class="popCon_top_left"></view>
					<view class="popCon_top_title">{{ isDoctor ? '添加志愿者':'添加医生' }}</view>
					<view class="popCon_top_cancel" @click="cancelVol">取消</view>
				</view>
				<view class="" v-if="!isShowQrcode">
					<view class="popCon_middle">
						<view class="popCon_middle_item">
							<view class="popCon_middle_item_title">{{ isDoctor ? '志愿者名称':'医生姓名'}}*</view>
							<view class="popCon_middle_item_con4">
								<uni-easyinput class="uni-mt-5" trim="all" v-model="addPersonForm.name" placeholder="填入姓名" @input="formatterInput"></uni-easyinput>
							</view>
						</view>
						<view class="popCon_middle_item">
							<view class="popCon_middle_item_title">{{ isDoctor ? '志愿者手机号':'医生手机号'}}*</view>
							<view class="popCon_middle_item_con4">
								<uni-easyinput class="uni-mt-5" trim="all" v-model="addPersonForm.phone" placeholder="填入手机号"></uni-easyinput>
							</view>
						</view>
					</view>
					<view class="popCon_bottom volBtn bg-custom" @click="bindPerson">绑定</view>
				</view>
				<view class="popCon_hand" v-else>
					<!-- <image mode="heightFix" src="@/static/images/ewm.png"></image> -->
					<vue-qr ref="qrCode" :text="qrCodeData" class="popCon_hand_qrcode"></vue-qr>
					<view class="popCon_hand_text">您可邀请志愿者扫码登记信息，辅助您进行课件上传</view>
				</view>
			</view>
		</uni-popup>
		<!-- 新增志愿者、医生 -->

		<u-loading-page :loading="showPopupCase" loading-mode="spinner" style="z-index: 999999;" :bg-color="'rgba(0, 0, 0, 0.3)'" :loading-color="'#fff'" :color="'#fff'"></u-loading-page>
	</view>
</template>

<script>
	import selfCase from '@/components/pc/case/case.vue'
	import selfHeader from '@/components/pc/header.vue'
	import addCase from '@/components/pc/case/addCase.vue'
	import selfDetail from '@/components/pc/case/detail.vue'
	import selfMy from '@/components/pc/my/my.vue'
	import selfMyNotice from '@/components/pc/my/notice.vue'
	import selfMyAdvice from '@/components/pc/my/advice.vue'
	import selfMyVolunteer from '@/components/pc/my/volunteer.vue'
	import VueQr from 'vue-qr'

	import storage from '@/utils/storage'
	import { getUserCaseList, volunteerSelectList, doctorSelectList, uploadFile, saveCase } from "@/api/case/case"
	import { getTypeName } from '@/utils/common'
	import {
		getMessageList,
		getVolunteerList,
		getDoctorList,
		bindVolunteer,
		bindDoctor,
		unbind
	} from '@/api/my/my.js'
	export default {
		components: {selfCase,selfHeader,selfDetail,selfMy,selfMyNotice,selfMyAdvice,selfMyVolunteer,addCase,VueQr},
		data() {
			return {
				showPopupCase: false,
				caseDetail:{},
				selectPersonList: [], // 人员列表
				selectUser:[],
				isDetail: uni.getStorageSync('isDetail'), // 是否为课件详情页
				statusArr: [{key: '2',text: '未通过',type: 'fail'},{key: '0',text: '审核中',type: 'in'},{key: '1',text: '审核通过',type: 'pass'}], // 状态类型
				msgStatus: [{key: '2',text: '已美化'},{key: '1',text: '未通过'},{key: '0',text: '审核通过'},{key: '3',text: '完成绑定'},{key: '4',text: '解除绑定'},{key: '5',text: '已点评'},{key: '6',text: '解析申请通过'},{key: '7',text: '解析申请未通过'},{key: '8',text: '解析完成'}],
				tabIndex: uni.getStorageSync('tab')||1,
				// 我的信息
				userInfo:{
					avatar: '',
					name: '',
					dept: '',
					noticeList: [],
				},
				isShowQrcode: false, //是否展示二维码
				addPersonForm:{
					name: '',
					phone: ''
				}, // 新增志愿者 form
				info:{}, // 课件列表+头部课件数据信息
				detailInfo: {}, // 详情数据
				steps: [], // 审核状态值
				myNavType: uni.getStorageSync('myNavType')||'main', // 我的路由 - 所在页面
				messageList: [],
				detailIndex:uni.getStorageSync('detailIndex')||{},
				isDoctor:true,	//是否医生
				bindPersonList:[],	//已绑定志愿者、医生列表
			}
		},
		onLoad(options) {
      if(options.tenantId){
        this.isDetail = true
        uni.setStorageSync('isDetail', false)
      }
			this.isDoctor = this.$store.state.user.loginIdentity == 0
			this.qrCodeData =this.$store.state.user.nickName + ',' + this.$store.state.user.userInfo.phonenumber
		},
		onShow() {
			this.getSelectPerson()
			this.getList()
			this.getMessageList()
			this.getBindPersonData()
		},
		methods: {
			formatterInput(e){
				let temp = e.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5\,\.\-\，\。]/g, '')
				this.$nextTick(()=>{
					this.addPersonForm.name = temp
				})
			},
			getMessageList() {
				getMessageList().then(res => {
					if (res.code == 200) {
						this.messageList = res.data
					}
				})
			},
			// 获取用户课件信息
			getList(otherId){
				let that = this
				let userId = that.$store.state.user.userId
				let param = {
					doctorUserId:'',
					volunteerUserId:''
				}
				if(that.isDoctor){
					param.doctorUserId = userId
					param.volunteerUserId = otherId || ''
				}else{
					param.volunteerUserId = userId
					param.doctorUserId = otherId || ''
				}

				getUserCaseList(param).then(res => {
					let data = res.data
					data.caseList.forEach(item => {
						item.caseFileList.forEach(item2 => {
							item2.type = getTypeName(item2.name)
						})
					})
					this.info = data
					if(this.isDetail){
            let info = this.info.caseList.filter(item => item.id == this.detailIndex.id)[0]
            let pages = getCurrentPages()
            let options = pages[pages.length - 1].options
            if(options?.tenantId){
              info = {
                id: options.id,
                caseName:""
              }
            }
						this.detailInfo = {
							id: info.id,
							name: info.caseName
						}

					}
				})
			},
			//获取已绑定的志愿者、医生列表数据
			getSelectPerson(){
				if(this.isDoctor){
					volunteerSelectList().then(res => {
						if(res.code == 200){
							this.selectPersonList = res.data
						}
					})
				}else{
					doctorSelectList().then(res => {
						if(res.code == 200){
							this.selectPersonList = res.data
						}
					})
				}
			},
			getBindPersonData() {
				if (this.isDoctor) {
					getVolunteerList().then(res => {
						if (res.code == 200) {
							this.bindPersonList = res.data
						}
					})
				} else {
					getDoctorList().then(res => {
						if (res.code == 200) {
							this.bindPersonList = res.data
						}
					})
				}
			},
			// 我的-路由跳转
			navTo(e){
				this.myNavType = e
				uni.setStorageSync('myNavType',e)
				this.getMessageList()
			},
			// 新增志愿者、医生-弹窗打开
			addPerson(){
				this.isShowQrcode = false
				this.$refs.popupPerson.open()
			},
			// 新增志愿者、医生-弹窗关闭
			cancelVol(){
				this.$refs.popupPerson.close()
			},
			// 切换tab
			changeTab(e){
				uni.setStorageSync('tab',e)
				uni.setStorageSync('isDetail',false)
				uni.setStorageSync('myNavType','main')
				this.myNavType = 'main'
				this.tabIndex = e
				this.isDetail = false
				this.getList()
				this.getMessageList()
			},
			// 前往课件详情
			openDetail(e){
				let info = this.info.caseList[e]
				let params = {
					name: info.caseName,
					id: info.id
				}
				this.detailInfo = params
				uni.setStorageSync('isDetail',true)
				uni.setStorageSync('detailIndex',params)
				this.isDetail = true
			},
			// 通知-跳转课件详情
			openCaseDetail(info){
				if(info.businessStatus == '3' || info.businessStatus == '4'){
					this.myNavType = 'volunteer'
					uni.setStorageSync('myNavType','volunteer')
					this.getMessageList()
				}else{
					let params = {
						name: info.messageContent,
						id: info.businessId
					}
					this.tabIndex = 1
					this.detailInfo = params
					uni.setStorageSync('isDetail',true)
					uni.setStorageSync('detailIndex',params)
					uni.setStorageSync('tab',1)
					this.isDetail = true
				}
			},
			//编辑课件弹窗
			editCase(value){
				this.caseDetail = value
				this.$refs.popupCase.open()
			},
			// 打开新增课件弹窗
			openPop() {
				this.caseDetail = {}
				this.$refs.popupCase.open()
			},
			// 关闭新增弹窗
			closePopupCase(){
				this.$refs.popupCase.close()
				if(this.isDetail){
					this.isDetail = false
				}
				this.getList()
			},
			//绑定志愿者或者医生
			bindPerson() {
				if (this.isDoctor) {
					bindVolunteer(this.addPersonForm).then(res => {
						uni.$u.toast(res.msg)
						if (res.code == 200) {
							this.$refs.popupPerson.close()
							this.getBindPersonData()
						}
					}).catch(err => {
						console.log('err==', err);
					})
				} else {
					bindDoctor(this.addPersonForm).then(res => {
						uni.$u.toast(res.msg)
						if (res.code == 200) {
							this.$refs.popupPerson.close()
							this.getBindPersonData()
						}
					}).catch(err => {
						console.log('err==', err);
					})
				}
			},
			refresh(){
				this.getBindPersonData()
			},
			//刷新课件列表
			refreshList(value){
				this.getList(value)
			},
			//从已绑定志愿者、医生列表跳转到课件列表
			clickAll(data){
				this.selectUser = []
				this.selectUser.push(data)
				this.getList(data.doctorUserId || data.volunteerUserId)
				this.tabIndex = 1
			},
			//从已绑定志愿者、医生列表跳转到课件详情
			clickItem(data){
				console.log('11111');
				let params = {
					name: data.caseName,
					id: data.id
				}
				this.detailInfo = params
				uni.setStorageSync('isDetail',true)
				uni.setStorageSync('detailIndex',params)
				this.isDetail = true
				this.tabIndex = 1
			},

		}
	}
</script>

<style lang="scss" scoped>
	.con{
		position: relative;
		background-color: #F2F3F5;
		width: 100%;
	}
	.popCon{
		width: 183.31rpx;
		height: 223.96rpx;
		// max-height: 228.33rpx;
		border-radius: 6.25rpx;
		background: #FFF;
		padding: 0 8.33rpx 0;
		position: relative;
		&_top{
			height: 22.92rpx;
			line-height: 22.92rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&_left{
				display: flex;
				align-items: center;
				cursor: pointer;
				width: 33%;
				overflow: hidden;


				&_text{
					margin-left: 1.04rpx;
					font-size: 6.77rpx;
					font-weight: 400;
					line-height: 11.46rpx; /* 169.231% */
				}
			}
			&_title{
				color: #1D2129;
				text-align: center;
				font-size: 8.33rpx;
				font-weight: 500;
				line-height: 22.92rpx;
				width: 33%;
			}
			&_cancel{
				color: #86909C;
				text-align: right;
				font-size: 6.77rpx;
				font-weight: 400;
				line-height: 22.92rpx;
				cursor: pointer;
				width: 33%;
			}
		}
		&_middle{
			height: calc(100% - 78.13rpx);
			overflow: auto;
			&_item{
				padding: 4.17rpx 0 2.6rpx;
				&_title{
					margin-bottom: 2.08rpx;
					color: #86909C;
					font-size: 6.77rpx;
					font-weight: 400;
					line-height: 11.46rpx; /* 169.231% */
				}
				// &_con{
				// 	display: flex;
				// 	height: 22.92rpx;
				// 	padding: 0 4.17rpx;
				// 	justify-content: center;
				// 	align-items: center;
				// 	border-radius: 2.08rpx;
				// 	background: #E8F3FF;
				// 	cursor: pointer;
				// 	&_text{
				// 		color: #165DFF;
				// 		text-align: center;
				// 		font-size: 7.29rpx;
				// 		font-weight: 400;
				// 		line-height: 11.46rpx; /* 157.143% */
				// 		margin-left: 2.08rpx;
				// 	}
				// 	uni-image{
				// 		width: 7.29rpx;
				// 		height: 7.29rpx;
				// 	}
				// }
				&_file{
					display: flex;
					flex-direction: column;
					&_item{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 2.08rpx 0;
						&_left{
							width: calc(100% - 8rpx);
							display: flex;
							align-items: center;
							uni-image{
								width: 12.5rpx;
								height: 12.5rpx;
							}
							&_name{
								color: #4E5969;
								font-size: 6.77rpx;
								font-weight: 400;
								line-height: 11.46rpx; /* 169.231% */
								margin-left: 2.08rpx;
							}
						}
						&_right{
							width: 7.29rpx;
							height: 7.29rpx;

							display: flex;
							align-items: center;
							justify-content: center;
							cursor: pointer;
							uni-image{
								width: 7.29rpx;
								height: 7.29rpx;
							}
						}
					}
				}
				// &_con2{
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: space-between;
				// 	height: 22.92rpx;
				// 	padding: 0 6.25rpx;
				// 	border-radius: 2.08rpx;
				// 	background: #F7F8FA;
				// 	cursor: pointer;
				// 	&_text{
				// 		color:  #165DFF;
				// 		font-size: 14px;
				// 		font-weight: 400;
				// 		line-height: 22px; /* 157.143% */
				// 	}
				// 	uni-image{
				// 		width: 7.29rpx;
				// 		height: 7.29rpx;
				// 	}
				// }
				&_con3{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 6.25rpx;
					height: 22.92rpx;
					border-radius: 2.08rpx;
					background: #F7F8FA;
					cursor: pointer;
					&_left{
						width: calc(100% - 8rpx);
						display: flex;
						align-items: center;
						uni-image{
							width: 16.67rpx;
							height: 16.67rpx;
							border-radius: 50%;
							overflow: hidden;
						}
						&_text{
							margin-left: 4.17rpx;
							color: #000;
							font-size: 7.29rpx;
							font-weight: 400;
						}
					}
					&_right{
						width: 7.29rpx;
						height: 7.29rpx;

						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						uni-image{
							width: 7.29rpx;
							height: 7.29rpx;
						}
					}
				}
				&_con4{
					height: 22.92rpx;
					padding: 0 6.25rpx;
					border-radius: 2.08rpx;
					background: #F7F8FA;

					input{
						height: 22.92rpx;
						height: 22.92rpx;
					}
				}
			}
		}
		&_hand{
			display: flex;
			flex-direction: column;
			align-items: center;
			&_qrcode{
				width: 104.17rpx;
				height: 104.17rpx;
				margin: 27.6rpx auto 10.42rpx;
			}
			&_text{
				color: #C9CDD4;
				text-align: center;
				font-size: 6.77rpx;
				font-weight: 400;
				line-height: 11.46rpx; /* 169.231% */
				margin: 0 auto;
			}
		}
		&_bottom{
			width: 100%;
			height: 22.92rpx;
			line-height: 22.92rpx;
			text-align: center;
			border-radius: 2.08rpx;
			color: #fff;
			font-size: 7.29rpx;
			font-weight: 400;
			margin-top: 10.42rpx;
			cursor: pointer;

			// position: absolute;
			margin: 9.75rpx auto 18.75rpx;
			width: calc(100% - 17.71rpx);
		}
		// .volBtn{
		// 	position: absolute;
		// 	bottom: 18.75rpx;
		// 	width: calc(100% - 17.71rpx);
		// }
		&_down{
			display: flex;
			width: 125rpx;
			flex-direction: column;
			align-items: center;
			padding: 6.25rpx 8.33rpx;
			border-radius: 6.25rpx;
			background: #FFF;
			box-shadow: 0 2.08rpx 5.21rpx 0 rgba(0, 0, 0, 0.10);
			position: absolute;
			right: -146.9rpx;
			top: 0;
		}
	}
	.down_title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 16.67rpx;
		width: 100%;
		uni-image,/deep/ .uni-icons{
			width: 11.46rpx;
			height: 11.46rpx;
			cursor: pointer;
			display: flex;
			align-items: center;
			font-size: 11.46rpx!important;
		}
		&_text{
			color: #86909C;
			font-size: 7.29rpx;
			font-weight: 400;
			line-height: 11.46rpx; /* 157.143% */
		}
	}
	.down_item{
		cursor: pointer;
		margin: 4.17rpx 0;
		display: flex;align-items: center;
		width: 100%;
		uni-image{
			width: 16.67rpx;
			height: 16.67rpx;
			border-radius: 50%;
			overflow: hidden;
		}
		&_avatar{
			width: 16.67rpx;
			height: 16.67rpx;
			line-height: 16.67rpx;
			border-radius: 50%;
			overflow: hidden;
			background-color: #c9cdd4;
			color: #fff;

			text-align: center;
			font-size: 7.29rpx;
			font-weight: 700;
		}
		&_name{
			color: #000;
			font-size: 7.29rpx;
			font-weight: 400;
			line-height: 7.29rpx; /* 100% */
			margin-left: 4.17rpx;
		}
	}
	/deep/ .uni-select__selector-empty{
		white-space: nowrap;
	}
	/deep/ .is-input-border{
		border: none;
		height: 22.92rpx;
		line-height: 22.92rpx;
		background-color: #F7F8FA!important;
	}
	/deep/ .uni-easyinput__content-input{
		padding: 0!important;
		height: 22.92rpx;
		line-height: 22.92rpx;

		color: #C9CDD4;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 7.29rpx;
		font-weight: 400;
		line-height: 22.92rpx; /* 157.143% */
	}
	/deep/ .uni-popup__wrapper{
		border-radius: 6.25rpx;
		// overflow: hidden;
	}
	.overScroll{
	  scrollbar-width: none; /* Firefox */
	  -ms-overflow-style: none; /* IE and Edge */
	}
	.overScroll::-webkit-scrollbar {
	  display: none; /* Chrome, Safari, and Opera */
	}
	.colorF{
		background-color: #fff;
		box-shadow: 0 -0.52rpx 0 0 #E5E6EB;
	}
	/deep/ .uni-input-input{
		color: #000;
	}
</style>
