<template>
	<view class="popCon">
		<view class="popCon_top">
			<view class="popCon_top_left"></view>
			<view class="popCon_top_title">{{ isEdit ? '修改课件':'新增课件' }}</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_copy bg-custom"></view>
				<view class="popCon_middle_item_con" @click="chooseFile">
					<u-icon name="plus" color="var(--phone-theme-color)"></u-icon>
					<view class="popCon_middle_item_con_text color-custom">上传文件</view>
				</view>
				<view class="popCon_middle_item_file">
					<view class="popCon_middle_item_file_item" v-for="(item,index) in form.caseFileList" :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-else-if="item.type == 'png'" src="@/static/images/file/imgIcon.png"></image>
						<image mode="scaleToFill" v-else-if="item.type == 'doc'" src="@/static/images/file/docIcon.png"></image>
						<image mode="scaleToFill" v-else-if="item.type == 'mp3'" src="@/static/images/file/mp3Icon.png"></image>
						<image mode="scaleToFill" v-else-if="item.type == 'pdf'" src="@/static/images/file/pdfIcon.png"></image>
						<image mode="scaleToFill" v-else-if="item.type == 'txt'" src="@/static/images/file/txtIcon.png"></image>
						<image mode="scaleToFill" v-else-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="!isDoctor">
				<view class="popCon_middle_item_title">添加医生*</view>
				<view class="popCon_middle_item_con3" v-if="form.doctorInfo.doctorUserName" @click="isAddDoctor = !isAddDoctor">
					<view class="popCon_middle_item_con3_left">
						<image mode="heightFix" v-if="form.doctorInfo.url" :src="form.doctorInfo.url"></image>
						<view class="popCon_middle_item_con3_left_avatar" v-else>
							{{form.doctorInfo.doctorUserName.substring(0,1)}}</view>
						<view class="popCon_middle_item_con3_left_text">{{form.doctorInfo.doctorUserName}}</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="isAddDoctor = !isAddDoctor">
					<view class="popCon_middle_item_con2_text color-custom">选择医生</view>
					<image mode="heightFix" src="@/static/images/right.png"></image>
				</view>
			</view>
			<view class="popCon_down" v-if="isAddDoctor">
				<view class="down_title">
					<view class="down_title_text">筛选所属医生</view>
					<uni-icons type="closeempty" color="#86909C" @click="isAddDoctor = false"></uni-icons>
				</view>
				<view class="down_item" v-for="(item,index) in person" :key="index" @click="selectDoc(item)">
					<image mode="heightFix" v-if="item.url" :src="item.url"></image>
					<view class="down_item_avatar" v-else>{{item.doctorUserName.substring(0,1)}}</view>
					<view class="down_item_name">{{item.doctorUserName}}</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.caseName" placeholder="添加课件名称" maxlength="30" @input="formatterInput" />
				</view>
			</view>
			<view class="popCon_middle_item">
				<view class="popCon_middle_item_title">所属项目</view>
				<view class="popCon_middle_item_con4">
					<input v-model="form.projectName" placeholder="添加项目名称" maxlength="30" @input="formatterInput1" />
				</view>
			</view>
		</view>
		<view class="popCon_bottom bg-custom" @click="submit">保存</view>
	</view>
</template>

<script>
	import {uploadFile,saveCase} from '@/api/case/case.js'
	import { getTypeName } from '@/utils/common'
import { data } from '../../../uni_modules/uview-ui/libs/mixin/mixin';
	export default {
		props:{
			person: {
				type: Array,
				default: []
			},
			data: {
				type: Object,
				default:undefined
			},
			isDoctor:{
				type: Boolean,
				default: true
			}
		},
		name:"addCase",
		data() {
			return {
				form:{
					caseName:'',		//课件名称
					projectName:'',		//项目名称
					caseFileList: [],
					doctorInfo:{		//选择的医生(志愿者身份时使用)
						doctorUserName:''
					},
				},
				isAddDoctor: false, // 志愿者是否选择医生
				isEdit:false, //是否编辑
			};
		},
		created(){
			if(this.data && !uni.$u.test.isEmpty(this.data)){
				//编辑
				this.form = this.data
				if(!this.isDoctor){
					this.form.doctorInfo = {
						doctorUserName: this.data.userName,
						doctorUserId: this.data.userId
					}
				}
				this.isEdit = true
			}
		},
		methods:{
			formatterInput(e){
				let temp = e.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5\,\.\-\，\。]/g, '')
				this.$nextTick(()=>{
					this.form.caseName = temp
				})
			},
			formatterInput1(e){
				let temp = e.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5\,\.\-\，\。]/g, '')
				this.$nextTick(()=>{
					this.form.projectName = temp
				})
			},
			submit(){
				if(this.form.caseFileList.length <= 0){
					uni.$u.toast('请先选择文件')
					return
				}

				let params = {}
				if(this.isEdit){
					params.id = this.form.id
					params.caseStatus = this.form.caseStatus
				}else{
					if(this.isDoctor){
						params.userId = this.$store.state.user.userId
						params.uploadUserId = ''
						params.uploadType = '0'
					}else{
						params.userId = this.form.doctorInfo.doctorUserId
						params.uploadUserId = this.$store.state.user.userId
						params.uploadType = '1'
					}
					params.caseStatus = '0'
				}

				params.caseName = this.form.caseName
				params.projectName = this.form.projectName
				params.caseFileList = this.form.caseFileList
				params.checkStatus = '0'

				this.$modal.loading("保存中，请耐心等待...")
				saveCase(params, this.isEdit).then(res => {
					if(res.code == 200){
						this.$modal.closeLoading()
						uni.$u.toast(this.isEdit ? '修改成功' : '新增成功')
					    setTimeout(() => {
							this.$emit('close')
						}, 500);

					}else{
						this.$modal.closeLoading()
					}
				})
			},
			delFile(index){
				this.form.caseFileList.splice(index,1)
			},
			// 关闭弹窗
			closePop(){
				this.$emit('close')
			},
			// 志愿者选择医生
			selectDoc(item){
				this.form.doctorInfo = item
				this.isAddDoctor = false
			},
			canUpload(name){
				let arr = ['PPTX','PPT', 'PDF', 'DOC', 'DOCX', 'TXT', 'XLS', 'XLSX', 'JPG', 'PNG', 'MP4', 'AVI', 'MP3']
				let fileType = name.substring(name.lastIndexOf('.') + 1).toUpperCase();
				return arr.indexOf(fileType) > -1
			},
			// 选择文件
			chooseFile(){
				if(this.form.caseFileList.length >= 5){
					uni.$u.toast('课件文件上传不可超过5个')
					return
				}
				let that = this
				uni.chooseFile({
				  count: 1, //默认100
				  timeout: 20000,
				  extension:['.pptx','.ppt', '.pdf', '.doc', '.docx', '.txt', '.xls', '.xlsx', '.jpg', '.png', '.mp4', '.avi', '.mp3'],
					success: function (res) {
						let canUpload = that.canUpload(res.tempFiles[0].name)
						if(canUpload){
							let params = {
								filePath: res.tempFiles[0].path //res.tempFilePaths tempFiles
							}
							that.$emit('showLoad')
							uploadFile(params).then(res => {
								if(res.code == 200){
									that.$emit('closeLoad')
									let data = res.data
									data.type = getTypeName(data.name)
									that.form.caseFileList.push(data)
									if(!that.form.caseName){
										let n = data.name.split('.')
                    let temp = n[0].replace(/\s/g, '')
                    let caseName = temp.replace(/[^a-zA-Z0-9\u4E00-\u9FA5\,\.\-\，\。]/g, '')
                    if(caseName.length > 50){
                      caseName = caseName.substr(0,50)
                    }
										that.form.caseName = caseName
									}
								}else{
									that.$emit('closeLoad')
								}
							}).catch(() => {
								that.$emit('closeLoad')
							})
						}else{
							uni.$u.toast('请上传规定类型的文件')
						}
					}
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.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;
				position: relative;

				&_title{
					margin-bottom: 2.08rpx;
					color: #86909C;
					font-size: 6.77rpx;
					font-weight: 400;
					line-height: 11.46rpx; /* 169.231% */
				}
				&_con_copy{
					width: 100%;
					height: 22.92rpx;
					padding: 0 4.17rpx;
					border-radius: 2.08rpx;
					position: absolute;
					opacity: 0.08;
					pointer-events: none;
				}

				&_con{
					display: flex;
					height: 22.92rpx;
					padding: 0 4.17rpx;
					justify-content: center;
					align-items: center;
					background: transparent;
					cursor: pointer;
					&_text{
						text-align: center;
						font-size: 7.29rpx;
						font-weight: 400;
						line-height: 11.46rpx; /* 157.143% */
						margin-left: 2.08rpx;
					}
				}
				&_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{
                flex: 1;
								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{
						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;
						}

						&_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;
						}

						&_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;
			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>
