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

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

			<!-- 课件详情 -->
			<self-detail v-if="isDetail" :steps="steps" :dataSource="detailInfo" @goHome="isDetail = false"></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="userInfo" @navTo="navTo"></self-my-volunteer>
		</view>
		<!-- 我的 -->

		<!-- 新增课件 -->
		<uni-popup ref="popup" :mask-click="false" type="center" background-color="#fff">
			<view class="popCon">
				<view class="popCon_top">
					<view class="popCon_top_left"></view>
					<view class="popCon_top_title">新增课件</view>
					<view class="popCon_top_cancel" @click="closePop">取消</view>
				</view>
				<view class="popCon_middle overScroll">
					<view class="popCon_middle_item">
						<view class="popCon_middle_item_title">课件上传*</view>
						<view class="popCon_middle_item_con" @click="chooseFile">
							<image mode="heightFix" src="@/static/images/upload.png"></image>
							<view class="popCon_middle_item_con_text">上传文件</view>
						</view>
						<view class="popCon_middle_item_file">
							<view class="popCon_middle_item_file_item" v-for="(item,index) in form.fileList" :key="index">
								<view class="popCon_middle_item_file_item_left">
								<image mode="scaleToFill" v-if="item.type == 'ppt'" src="@/static/images/file/pptIcon.png"></image>
								<image mode="scaleToFill" v-if="item.type == 'png'" src="@/static/images/file/imgIcon.png"></image>
								<image mode="scaleToFill" v-if="item.type == 'doc'" src="@/static/images/file/docIcon.png"></image>
								<image mode="scaleToFill" v-if="item.type == 'mp3'" src="@/static/images/file/mp3Icon.png"></image>
								<image mode="scaleToFill" v-if="item.type == 'pdf'" src="@/static/images/file/pdfIcon.png"></image>
								<image mode="scaleToFill" v-if="item.type == 'txt'" src="@/static/images/file/txtIcon.png"></image>
								<image mode="scaleToFill" v-if="item.type == 'video'" src="@/static/images/file/videoIcon.png"></image>
									<view class="popCon_middle_item_file_item_left_name">{{item.name}}</view>
								</view>
								<view class="popCon_middle_item_file_item_right" @click="delFile(index)">
									<image mode="heightFix" src="@/static/images/close.png"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="popCon_middle_item" v-if="role == 2">
						<view class="popCon_middle_item_title">添加医生*</view>
						<view class="popCon_middle_item_con3" v-if="form.doctorInfo" @click="openSelect2 = !openSelect2">
							<view class="popCon_middle_item_con3_left">
								<image mode="heightFix" src="@/static/images/avatar.png"></image>
								<view class="popCon_middle_item_con3_left_text">{{form.doctorInfo.name}}</view>
							</view>
							<view class="popCon_middle_item_con3_right">
								<image mode="heightFix" src="@/static/images/right.png"></image>
							</view>
						</view>
						<view class="popCon_middle_item_con2" v-else @click="openSelect2 = !openSelect2">
							<view class="popCon_middle_item_con2_text">选择医生</view>
							<image mode="heightFix" src="@/static/images/right.png"></image>
						</view>
						<view class="popCon_down" v-if="openSelect2">
							<view class="down_title">
								<view class="down_title_text">筛选所属医生</view>
								<uni-icons type="closeempty" color="#86909C" @click="openSelect2 = false"></uni-icons>
							</view>
							<view class="down_item" v-for="(item,index) in personList" :key="index" @click="select2(index)">
								<image mode="heightFix" v-if="item.url" :src="item.url"></image>
								<view class="down_item_avatar" v-else>{{item.name?item.name.substring(0,1):''}}</view>
								<view class="down_item_name">{{item.name}}</view>
							</view>
						</view>
					</view>
					<view class="popCon_middle_item">
						<view class="popCon_middle_item_title">课件名</view>
						<view class="popCon_middle_item_con4">
							<input v-model="form.name" placeholder="添加课件名称" maxlength="30" @input="formatterInput" />
						</view>
					</view>
				</view>
				<view class="popCon_bottom" @click="submit">保存</view>
			</view>
		</uni-popup>
		<!-- 新增课件 -->

		<!-- 新增志愿者 -->
		<uni-popup ref="volunteerPop" :mask-click="false" type="center" background-color="#fff">
			<view class="popCon">
				<view class="popCon_top">
					<view class="popCon_top_left" @click="changeType">
						<image v-if="bindType == 'scan'" mode="scaleToFill" src="@/static/images/scan.png"></image>
						<image v-if="bindType == 'hand'" mode="scaleToFill" src="@/static/images/hand.png"></image>
						<view class="popCon_top_left_text">{{bindType == 'scan' ? '扫码绑定' : '手动绑定'}}</view>
					</view>
					<view class="popCon_top_title">添加志愿者</view>
					<view class="popCon_top_cancel" @click="cancelVol">取消</view>
				</view>
				<view class="" v-if="bindType == 'scan'">
					<view class="popCon_middle">
						<view class="popCon_middle_item">
							<view class="popCon_middle_item_title">志愿者姓名*</view>
							<view class="popCon_middle_item_con4">
								<uni-easyinput class="uni-mt-5" trim="all" v-model="volForm.name" placeholder="填入姓名"></uni-easyinput>
							</view>
						</view>
						<view class="popCon_middle_item">
							<view class="popCon_middle_item_title">志愿者手机号*</view>
							<view class="popCon_middle_item_con4">
								<uni-easyinput class="uni-mt-5" trim="all" v-model="volForm.phone" placeholder="填入手机号"></uni-easyinput>
							</view>
						</view>
					</view>
					<view class="popCon_bottom volBtn">绑定</view>
				</view>
				<view class="popCon_hand" v-if="bindType == 'hand'">
					<image mode="heightFix" src="@/static/images/ewm.png"></image>
					<view class="popCon_hand_text">您可邀请志愿者扫码登记信息，辅助您进行课件上传</view>
				</view>
			</view>
		</uni-popup>
		<!-- 新增志愿者 -->
		<u-loading-page :loading="show" 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 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 storage from '@/utils/storage'
	import { getUserCaseList } from "@/api/case/case"
	import {uploadFile,addCase} from '@/api/case/case.js'
	import { getTypeName } from '@/utils/common'
	import {
		getMessageList,
	} from '@/api/my/my.js'
	export default {
		components: {selfCase,selfHeader,selfDetail,selfMy,selfMyNotice,selfMyAdvice,selfMyVolunteer},
		data() {
			return {
				show: false,
				personList: [], // 人员列表
				openSelect2: false, // 新增课件 -- 选择医生
				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: '解除绑定'}],
				tabIndex: uni.getStorageSync('tab')||1,
				role: 2, // 1医生 2志愿者
				// 我的信息
				userInfo:{
					avatar: '',
					name: '',
					dept: '',
					noticeList: [
						// {text: '自定义课件名称 1',type: 1,status: '0'},
					],
					volunteer: [
						// {
						// 	name:'赵增元',
						// 	from: '百济',
						// 	workList:[
						// 		{filename: '百泽有道转危为安.ppt',type: 'ppt'},
						// 		{filename: '百泽有道转危为安.png',type: 'png'},
						// 	]
						// },
					]
				},
				bindType: 'scan', // 绑定类型
				form: {
					doctorInfo: null,
					fileList: [
						// {filename: '百泽有道转危为安.ppt',url: '',type: 'ppt'},
					],
					name: ''
				}, // 新增课件 form
				volForm:{
					name: '',
					phone: ''
				}, // 新增志愿者 form
				info:{}, // 课件列表+头部课件数据信息
				detailInfo: {}, // 详情数据
				steps: [], // 审核状态值
				myNavType: uni.getStorageSync('myNavType')||'main', // 我的路由 - 所在页面
				messageList: [],
				detailIndex:uni.getStorageSync('detailIndex')||{}
				// 文件上传
			}
		},
		onShow() {
			this.getList()
			this.getMessageList()
		},
		methods: {
			formatterInput(e){
				let temp = e.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5\,\.\-]/g, '')
				this.$nextTick(()=>{
					this.form.name = temp
				})
			},
			getMessageList() {
				getMessageList().then(res => {
					if (res.code == 200) {
						this.messageList = res.data
					}
				})
			},
			// 获取用户课件信息
			getList(){
				let that = this
				let userId = that.$store.state.user.userId
				that.getData(userId)
			},
			getData(userId){
				getUserCaseList(userId).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]
						this.detailInfo = {
							id: info.id,
							name: info.caseName
						}

					}
				})
			},
			// 修改绑定类型
			changeType(){
				this.bindType = this.bindType == 'scan' ? 'hand' : 'scan'
			},
			// 我的-路由跳转
			navTo(e){
				this.myNavType = e
				uni.setStorageSync('myNavType',e)
				this.getMessageList()
			},
			// 新增志愿者-弹窗打开
			addVolunteer(){
				this.$refs.volunteerPop.open()
			},
			// 新增志愿者-弹窗关闭
			cancelVol(){
				this.$refs.volunteerPop.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){
				this.detailIndex = 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){
				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
			},
			// 打开新增课件弹窗
			openPop() {
				this.openSelect2 = false
				this.form = {
					doctorInfo: null,
					fileList: [],
					name: ''
				}
				this.$refs.popup.open()
			},
			// 关闭课件新增弹窗
			closePop() {
				this.$refs.popup.close()
			},
			// 新增课件-选择医生
			select2(idx){
				this.form.doctorInfo = this.personList[idx]
			},
			// 新增课件-删除文件
			delFile(idx){
				this.form.fileList.splice(idx,1)
			},
			getDictValue(data,value){
				let str = data.filter(item => item.key == value)[0].text
				return str
			},
			judgeFileType(name){
				let arr = ['PPT','PPTX']
				let fileType = name.substring(name.lastIndexOf('.') + 1).toUpperCase();
				return arr.indexOf(fileType) > -1
			},
			// 选择文件
			chooseFile(){
				let that = this
				if(that.form.fileList.length>=5){
					uni.$u.toast('课件文件上传不可超过5个')
					return
				}
				uni.chooseFile({
				  count: 1, //默认100
				  timeout: 20000,
				  extension:['.ppt','.pptx'],
					success: function (res) {
						let judge = that.judgeFileType(res.tempFiles[0].name)
						if(judge){
							let params = {
								filePath: res.tempFiles[0].path //res.tempFilePaths tempFiles
							}
							that.show = true
							uploadFile(params).then(res => {
								if(res.code == 200){
									that.show = false
									let data = res.data
									data.type = getTypeName(data.name)
									that.form.fileList.push(data)
									if(!that.form.name){
										let n = data.name.split('.')
										that.form.name = n[0].replace(/\s/g, '')
									}
								}else{
									that.show = false
								}
							}).catch(() => {
								that.show = false
							})
						}else{
							uni.$u.toast('请上传ppt或pptx格式的文件')
						}
					}
				});
			},
			submit(){
				let that = this
				if(that.form.fileList.length <= 0){
					uni.$u.toast('请先选择文件')
					return
				}
				let name = that.form.name
				if(!that.form.name){
					let n = that.form.fileList[0].name.split('.')
					name = n[0]
					that.form.name = n[0].replace(/\s/g, '')
				}
				let userId = that.$store.state.user.userId
				that.addData(userId,name)
			},
			checkName(val){
				let judge = true
				let str = '^[\a-zA-Z\u4E00-\u9FA5]+$'
			    var reg = new RegExp(str);
				judge = reg.test(val)
				if(val.length > 30){
					judge = false
				}
			    return judge
			},
			addData(userId,name){
				let that = this
				let params = {
					"userId": userId, //课件所属用户id
					// "uploadUserId": 1727211668527599600, //课件上传用户id
					"caseName": name, //课件名称
					"checkStatus": "0", //审核状态（0未审核 1通过 2拒绝）
					"caseStatus": "0", //课件状态（0正常 1禁用 ）
					"uploadType": "0", //上传方式 0直接上传 1志愿者上传
					"caseFileList": that.form.fileList
				}
				that.$modal.loading("保存中，请耐心等待...")
				addCase(params).then(res => {
					if(res.code == 200){
						that.$modal.closeLoading()
						uni.$u.toast('新增成功')
					    setTimeout(function() {
							that.closePop()
							that.getList()
						}, 500);
					}
				})
			},
		}
	}
</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%;
				uni-image{
					width: 8.33rpx;
					height: 8.33rpx;
				}
				&_text{
					margin-left: 1.04rpx;
					font-size: 6.77rpx;
					font-weight: 400;
					line-height: 11.46rpx; /* 169.231% */
					color: #165DFF;
				}
			}
			&_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;
			uni-image{
				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;
			background: #165DFF;
			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>
