<template>
	<view class="con_middle">
		<view class="con_middle_contain">
			<view class="con_middle_top">
				<view class="con_middle_top_title">{{selectUser.length == 0 ? '所有课件' : '筛选课件'}}</view>
				<view class="con_middle_top_search" v-if="selectUser.length == 0">
					<view class="con_middle_top_search_con" @click="openSelect = !openSelect">
						<view class="con_middle_top_search_con_text">筛选</view>
						<image mode="heightFix" src="@/static/images/down.png"></image>
					</view>
					<!-- 下拉框 -->
					<view class="downCon" v-if="openSelect">
						<view class="down_title">
							<view class="down_title_text">{{ isDoctor ? '筛选已绑定志愿者' : '筛选所属医生' }}</view>
							<uni-icons type="closeempty" color="#86909C" @click="openSelect = false"></uni-icons>
						</view>
						<view class="down_list overScroll">
							<view class="down_item" v-for="(item,index) in selectPersonList" :key="item[isDoctor ? 'volunteerUserId' : 'doctorUserId']" @click="onSelect(item)">
								<image mode="heightFix" v-if="item.url" :src="item.url"></image>
								<view class="down_item_avatar" v-else>{{item[isDoctor ? 'volunteerUserName' : 'doctorUserName'].substring(0,1)}}</view>
								<view class="down_item_name">{{item[isDoctor ? 'volunteerUserName' : 'doctorUserName']}}</view>
							</view>
						</view>
					</view>
					<!-- 下拉框 -->
				</view>
				<view class="con_middle_top_selected" v-if="selectUser.length > 0">
					<view class="con_middle_top_selected_item bg-custom" v-for="(item,index) in selectUser" :key="index">
						<view class="con_middle_top_selected_item_name">{{item[isDoctor ? 'volunteerUserName' : 'doctorUserName']}}</view>
						<uni-icons type="closeempty" color="#fff" @click="delPerson(index)"></uni-icons>
					</view>
				</view>
			</view>
			<!-- 统计区域 -->
			<view class="con_middle_middle">
				<view class="con_middle_middle_item">
					<view class="con_middle_middle_item_title">已上传课件</view>
					<view class="con_middle_middle_item_text">{{info.total}}</view>
				</view>
				<view class="con_middle_middle_item">
					<view class="con_middle_middle_item_title">符合标准课件</view>
					<view class="con_middle_middle_item_text">{{info.passTotal}}</view>
				</view>
				<view class="con_middle_middle_item">
					<view class="con_middle_middle_item_title">不符合标准课件</view>
					<view class="con_middle_middle_item_text">{{info.noPassTotal}}</view>
				</view>
			</view>
			<!-- 统计区域 -->
			<!-- 课件列表区域 -->
			<view class="con_middle_bottom">
				<view class="bottom_item" v-for="(item,index) in list" :key="index" @click="toDetail(index)">
					<view class="bottom_item_top">
						<view class="bottom_item_top_con">
							<view class="bottom_item_top_con_name">{{item.caseName}}</view>
							<view class="bottom_item_top_con_status">
                <image mode="heightFix" v-if="item.caseAnalysisStatus !== null" :src="getCaseAnalysisData(item.caseAnalysisStatus).img"></image>
								<image mode="heightFix" v-else-if="item.beautifyStatus == '1'" src="@/static/images/status/check-circle.png"></image>
								<image mode="heightFix" v-else-if="item.checkStatus == '2'" src="@/static/images/status/exclamation-circle.png"></image>
								<image mode="heightFix" v-else-if="item.checkStatus == '0'" src="@/static/images/status/clock-circle.png"></image>
								<image mode="heightFix" v-else-if="item.checkStatus == '1'" src="@/static/images/status/pass.png"></image>
                <view v-if="item.caseAnalysisStatus !== null" class="bottom_item_top_con_status_text" :class="getCaseAnalysisData(item.caseAnalysisStatus).type">{{getCaseAnalysisData(item.caseAnalysisStatus).text}}</view>
								<view v-else class="bottom_item_top_con_status_text" :class="[item.beautifyStatus == '1' ? 'blue' : item.checkStatus ? getDictValue(statusArr,item.checkStatus).type : '']">
									{{item.beautifyStatus == '1' ? '已美化' : item.checkStatus ? getDictValue(statusArr,item.checkStatus).text : ''}}
								</view>
							</view>
						</view>
						
						<view class="bottom_item_top_con2" v-if="!isDoctor">
							<view class="bottom_item_top_con2_item">所属医生：
								<view class="bottom_item_top_con2_item_text">
									{{item.userName}}
								</view>
							</view>
						</view>
						<view class="bottom_item_top_con2">
							<view class="bottom_item_top_con2_item">所属项目：
								<view class="bottom_item_top_con2_item_text">
									{{item.projectName}}
								</view>
							</view>
						</view>
						
						<view class="bottom_item_top_con2" v-if="isDoctor">
							<view class="bottom_item_top_con2_item" v-if="item.sex">
								性别：
								<view class="bottom_item_top_con2_item_text">
									{{item.sex}}
								</view>
							</view>
							<view class="bottom_item_top_con2_item" v-if="item.age">
								年龄：
								<view class="bottom_item_top_con2_item_text">
									{{item.age}}
								</view>
							</view>
							<view class="bottom_item_top_con2_item" v-if="item.result">
								诊断：
								<view class="bottom_item_top_con2_item_text">
									{{item.result}}
								</view>
							</view>
							<view class="bottom_item_top_con2_tags" v-if="item.tags&&item.tags.length > 0">
								<view class="bottom_item_top_con2_tags_item" v-for="(item2,index2) in item.tags.slice(0,3)" :key="index2">{{item2}}</view>
							</view>
						</view>
					</view>
					<view class="bottom_item_file" v-if="item.caseFileList&&item.caseFileList.length > 0">
						<template v-if="isDoctor">
							<view class="bottom_item_file_item" v-for="(item2,index2) in item.caseFileList.slice(0,1)" :key="index2">
								<view class="bottom_item_file_item_left">
									<image mode="scaleToFill" v-if="item2.type == 'ppt'" src="@/static/images/file/pptIcon.png"></image>
									<image mode="scaleToFill" v-if="item2.type == 'png'" src="@/static/images/file/imgIcon.png"></image>
									<image mode="scaleToFill" v-if="item2.type == 'doc'" src="@/static/images/file/docIcon.png"></image>
									<image mode="scaleToFill" v-if="item2.type == 'mp3'" src="@/static/images/file/mp3Icon.png"></image>
									<image mode="scaleToFill" v-if="item2.type == 'pdf'" src="@/static/images/file/pdfIcon.png"></image>
									<image mode="scaleToFill" v-if="item2.type == 'txt'" src="@/static/images/file/txtIcon.png"></image>
									<image mode="scaleToFill" v-if="item2.type == 'video'" src="@/static/images/file/videoIcon.png"></image>
									<view class="bottom_item_file_item_left_name">{{item2.name}}</view>
								</view>
								<view class="bottom_item_file_item_right">
									<image mode="heightFix" src="@/static/images/right.png"></image>
								</view>
							</view>
						</template>
						<template v-else>
							<view class="bottom_item_file_item" v-for="(item2,index2) in item.caseFileList.slice(0,2)" :key="index2">
								<view class="bottom_item_file_item_left">
									<image mode="scaleToFill" v-if="item2.type == 'ppt'" src="@/static/images/file/pptIcon.png"></image>
									<image mode="scaleToFill" v-if="item2.type == 'png'" src="@/static/images/file/imgIcon.png"></image>
									<image mode="scaleToFill" v-if="item2.type == 'doc'" src="@/static/images/file/docIcon.png"></image>
									<image mode="scaleToFill" v-if="item2.type == 'mp3'" src="@/static/images/file/mp3Icon.png"></image>
									<image mode="scaleToFill" v-if="item2.type == 'pdf'" src="@/static/images/file/pdfIcon.png"></image>
									<image mode="scaleToFill" v-if="item2.type == 'txt'" src="@/static/images/file/txtIcon.png"></image>
									<image mode="scaleToFill" v-if="item2.type == 'video'" src="@/static/images/file/videoIcon.png"></image>
									<view class="bottom_item_file_item_left_name">{{item2.name}}</view>
								</view>
								<view class="bottom_item_file_item_right">
									<image mode="heightFix" src="@/static/images/right.png"></image>
								</view>
							</view>
						</template>
					</view>
				</view>
			</view>
			<!-- 课件列表区域 -->
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			dataSource:{
				type: Object,
				default: {}
			},
			person:{
				type: Array,
				default: []
			},
			selectUser:{
				type: Array,
				default: []
			},
			status:{
				type: Array,
				default: []
			},
			isDoctor:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				selectPersonList: [], // 人员列表
				openSelect: false, // 人员筛选 -- 选择人员,
				searchValue: undefined,
				statusArr: [],
				info: {}, // 课件列表+头部课件数据信息
				list: [], // 课件列表
			}
		},
		watch: {
		    dataSource: {
		      handler(newVal, oldVal) {
		        this.list = this.dataSource.caseList
				this.info = this.dataSource
		      },
		      immediate: true,
		      deep: true
		    },
			person: {
		      handler(newVal, oldVal) {
				  this.selectPersonList = this.person
			  },
			  immediate: true,
			  deep: true,
			},
			status: {
		      handler(newVal, oldVal) {
				  this.statusArr = this.status
			  },
			  immediate: true,
			  deep: true,
			},
		},
		onShow() {

		},
		methods: {
      // 列表解读状态数据
      getCaseAnalysisData(status){
        let stateObj = {
          img:"/static/images/status/clock-circle.png",
          text:"审核中",
          type:"in"
        }
        if(status == 1){
          stateObj = {
            img:"/static/images/status/exclamation-circle.png",
            text:"无法解读",
            type:"fail"
          }
        }else if(status == 2){
          stateObj = {
            img:"/static/images/status/pass.png",
            text:"审核通过",
            type:"pass"
          }
        }else if(status == 3){
          stateObj = {
            img:"/static/images/status/pass.png",
            text:"解读完成",
            type:"pass"
          }
        }
        return stateObj
      },
			// 前往详情
			toDetail(idx){
				this.$emit('openDetail',idx)
			},
			// 筛选--选择人员
			onSelect(item){
				this.selectUser.push(item)
				this.openSelect = false
				this.$emit('refreshList', item[this.isDoctor ? 'volunteerUserId' : 'doctorUserId'])
			},
			// 删除选择的人员
			delPerson(idx){
				this.selectUser.splice(idx,1)
				this.$emit('refreshList', '')
			},
			getDictValue(data,value){
				let str = data.filter(item => item.key == value)[0]
				return str
			},
		}
	}
</script>

<style lang="scss" scoped>
	.con{
		position: relative;
		background-color: #F2F3F5;
		width: 100%;
		&_middle{
			background-color: #F2F3F5;
			width: 100%;
			height: calc(100vh - 35.42rpx);
			overflow: auto;
			// overflow: hidden;
			&_contain{
				width: 74%;
				margin-left: 13%;
				padding-top: 11.46rpx;
				padding-bottom: 21.88rpx;
			}
			&_top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				&_title{
					color: #1D2129;
					font-size: 12.5rpx;
					font-weight: 500;
					line-height: 16.67rpx;
				}
				&_search{
					position: relative;
					&_con{
						background-color: #fff;
						height: 13.02rpx;
						// width: 30.21rpx;
						line-height: 13.02rpx;
						padding: 0 4.17rpx;
						display: flex;
						align-items: center;
						border-radius: 1.04rpx;
						overflow: hidden;
						cursor: pointer;
						&_text{
							color: #1D2129;
							font-size: 6.77rpx;
							font-weight: 400;
							line-height: 11.46rpx;
							margin-right: 1.04rpx;
						}
						uni-image{
							width: 7.29rpx;
							height: 7.29rpx;
						}
					}
					.downCon{
						display: flex;
						width: 125rpx;
						max-height: 184.29rpx;
						padding: 6.25rpx 8.33rpx;
						flex-direction: column;
						align-items: flex-start;
						position: absolute;
						right: 0;
						top: 15.63rpx;
						border-radius: 6.25rpx;
						background: #FFF;
						box-shadow: 0 2.08rpx 5.21rpx 0 rgba(0, 0, 0, 0.10);
						z-index: 8;
					}
				}
				&_selected{
					&_item{
						display: flex;
						align-content: center;
						border-radius: 1.04rpx;
						padding: 0 4.17rpx;
						height: 13.02rpx;
						line-height: 13.02rpx;
						cursor: pointer;
						&_name{
							height: 13.02rpx;
							line-height: 13.02rpx;
							color: #FFF;
							font-size: 6.77rpx;
							font-weight: 400;
							line-height: 13.02rpx;
							margin-right: 1.04rpx;
						}
					}
				}
			}
			&_middle{
				display: flex;
				align-items: center;
				margin-top: 4.17rpx;
				margin-bottom: 8.33rpx;
				&_item{
					display: flex;
					align-items: center;
					margin-right: 20.83rpx;
					&_title{
						color: #86909C;
						font-size: 6.25rpx;
						font-weight: 400;
						line-height: 10.42rpx;
						margin-right: 4.17rpx;
					}
					&_text{
						color: #1D2129;
						font-size: 8.33rpx;
						font-weight: 500;
						line-height: 12.5rpx;
					}
				}
			}
			&_bottom{
				display: flex;
				// align-items: center;
				flex-wrap: wrap;
				overflow: auto;
				height: calc(100% - 39.84rpx);
				width: 100%;
				.bottom_item{
					padding: 6.25rpx;
					margin-right: 6.25rpx;
					width: calc((100% - 50rpx) / 3);
					margin-bottom: 6.25rpx;
					background-color: #fff;
					border-radius: 3.13rpx;
					overflow: hidden;
					// width: 133.98rpx;
					// height: 70.83rpx;
					cursor: pointer;
					&_top{
						&_con{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;

							&_name{
								color: #1D2129;
								font-size: 8.33rpx;
								font-weight: 500;
								line-height: 12.5rpx;
								width: calc(100% - 42rpx);
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}
							&_status{
								display: flex;
								align-items: center;
								justify-content: flex-end;
								uni-image{
									width: 8.33rpx;
									height: 8.33rpx;
								}
								&_text{
									font-size: 6.77rpx;
									font-weight: 400;
									line-height: 11.46rpx;
									color: #86909C;
									margin-left: 1.04rpx;
								}
							}
						}
						&_con2{
							display: flex;
							align-items: center;
							flex-direction: column;
							width: 100%;
							&_item{
								width: 100%;
								color: #86909C;
								font-size: 7.81rpx;
								font-weight: 400;
								line-height: 11.46rpx;
								display: flex;
								align-items: center;
								&_text{
									margin-left: 2.08rpx;
								}
							}
							&_tags{
								width: 100%;
								display: flex;
								align-items: center;
								height: 11.46rpx;
								overflow: hidden;
								flex-wrap: wrap;
								&_item{
									width: auto;
									margin-right: 2.08rpx;
									padding: 0 4.17rpx;
									border-radius: 10.42rpx;
									background: rgba(22, 93, 255, 0.08);

									color: rgba(22, 93, 255, 0.80);
									text-align: center;
									font-size: 6.77rpx;
									font-weight: 400;
									line-height: 11.46rpx; /* 169.231% */
								}
							}
						}
					}
					&_file{
						margin-top: 6.25rpx;
						padding: 5.21rpx;
						border-radius: 2.34rpx;
						overflow: hidden;
						background: #F7F8FA;
						&_item{
							width: 100%;
							cursor: pointer;
							display: flex;
							align-items: center;
							justify-content: space-between;
							&_left{
								display: flex;
								align-items: center;
								width: calc(100% - 8rpx);
								&_name{
									color: #4E5969;
									font-size: 7.29rpx;
									font-weight: 400;
									line-height: 11.46rpx;
									white-space: nowrap;
									width: 100%;
									overflow: hidden;
									text-overflow: ellipsis;
									margin-left: 2.08rpx;
								}
								uni-image{
									width: 12.5rpx;
									height: 12.5rpx;
								}
							}
							&_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;
								}
							}
						}
						&_item:nth-child(2){
							margin-top: 5.21rpx;
						}
					}
				}
				.bottom_item:nth-child(3n){
					margin-right: 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_list{
		width: 100%;
		height: calc(100% - 12rpx);
		overflow: auto;
	}
	.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;
		}
	}
	.blue{
		color: #165DFF!important;
	}
	.in{
		color: #FF7D00!important;
	}
	.fail{
		color: #F53F3F!important;
	}
	.pass{
		color: #00B42A!important;
	}
	.overScroll{
	  scrollbar-width: none; /* Firefox */
	  -ms-overflow-style: none; /* IE and Edge */
	}
	.overScroll::-webkit-scrollbar {
	  display: none; /* Chrome, Safari, and Opera */
	}
	/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;
	}
</style>
