<template>
	<view class="con_middle">
		<view class="con_middle_volunteer volunteer">
			<view class="volunteer_top">
				<view class="volunteer_top_title" @click="navTo('main')">个人中心</view>
				<image mode="heightFix" src="@/static/images/right.png"></image>
				<view class="volunteer_top_name">{{isDoctor ? '志愿者管理' : '医生管理'}}</view>
			</view>
			<view class="volunteer_list">
				<view class="volunteer_list_item" v-for="(item,index) in listData" :key="item.id">
					<view class="volunteer_list_item_contain">
						<view class="volunteer_list_item_contain_top">
							<view class="volunteer_list_item_contain_top_name">{{isDoctor ? item.volunteerUser.nickName : item.doctorUser.nickName}}</view>
							<view class="volunteer_list_item_contain_top_btn color-custom border-color-custom" @click="unbindPerson(item)">解除绑定</view>
						</view>
						<view class="volunteer_list_item_contain_from">{{isDoctor ? item.volunteerUser.organizationName : item.doctorUser.organizationName}}</view>
						<view class="volunteer_list_item_contain_con">
							<view class="volunteer_list_item_contain_con_top" @click="clickAll(item)">
								<view class="volunteer_list_item_contain_con_top_left">
									<view class="volunteer_list_item_contain_con_top_left_text">
										辅助{{isDoctor ? '' : '他'}}上传课件
									</view>
									<view class="volunteer_list_item_contain_con_top_left_num">{{item.caseNumber}}</view>
								</view>
								<view class="volunteer_list_item_contain_con_top_right">
									<view class="volunteer_list_item_contain_con_top_right_text">全部</view>
									<image mode="heightFix" src="@/static/images/right.png"></image>
								</view>
							</view>
							<view class="volunteer_list_item_contain_con_file" v-if="item.caseBaseInfoVoList">
								<view class="volunteer_list_item_contain_con_file_item" v-for="caseItem in item.caseBaseInfoVoList" :key="caseItem.id" @click="clickItem(caseItem)">
									<view class="volunteer_list_item_contain_con_file_item_left">

										<image mode="scaleToFill" src="@/static/images/case_icon.png"></image>
										<view class="volunteer_list_item_contain_con_file_item_left_name">{{caseItem.caseName}}</view>
									</view>
									<view class="volunteer_list_item_contain_con_file_item_right">
										<image mode="heightFix" src="@/static/images/right.png"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mask" v-if="showMask"></view>
		<view class="modal" v-if="showModal">
			<view class="modal_top">{{modalMsg}}</view>
			<view class="modal_bottom">
				<view class="modal_bottom_cancel" @click="cancel">取消</view>
				<view class="modal_bottom_confirm color-custom" @click="confirm">确定解除</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		unbind
	} from '@/api/my/my.js'
	export default {
		props:{
			dataSource:{
				type: Array,
				default: []
			},
			isDoctor:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				listData:{}, // 我的信息
				showMask: false,
				showModal: false,
				modalMsg: '',
				id:'',
			};
		},
		methods:{
			// 解除绑定
			unbindPerson(item){
				this.id = item.id
				if (this.isDoctor) {
					this.modalMsg = '您要解除与志愿者“' + item.volunteerUser.nickName + '”的绑定吗？'
				} else {
					this.modalMsg = '您要解除与医生“' + item.doctorUser.nickName + '”的绑定吗？'
				}
				this.showMask = true
				this.showModal = true
			},
		    // 取消
			cancel(){
				this.showMask = false
				this.showModal = false
			},
			// 确认解除
			confirm(){
				unbind(this.id).then(res => {
					uni.$u.toast(res.msg)
					if(res.code = 200){
						this.showMask = false
						this.showModal = false
						this.$emit('refresh')
					}
				}).catch(err => {

				})
			},
			// 路由跳转
			navTo(type){
				this.$emit('navTo',type)
			},
			//点击全部跳转课件列表
			clickAll(item){
				let data = {}
				if(this.isDoctor){
					data.volunteerUserId = item.volunteerUserId
					data.volunteerUserName = item.volunteerUser.nickName
				}else{
					data.doctorUserId = item.doctorUserId
					data.doctorUserName = item.doctorUser.nickName
				}
				this.$emit('clickAll',data)
			},
			//点击跳转课件详情
			clickItem(item){
				this.$emit('clickItem',item)
			},
		},
		watch: {
		    dataSource: {
		      handler(newVal, oldVal) {
				this.listData = this.dataSource
			  },
		      immediate: true,
		      deep: true
		    },
		},
	}
</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;
		.volunteer{
			width: 74%;
			margin-left: 13%;
			padding-top: 11.46rpx;
			padding-bottom: 21.88rpx;
			&_top{
				display: flex;
				align-items: center;
				&_title{
					color: #86909C;
					font-size: 12.5rpx;
					font-weight: 500;
					line-height: 16.67rpx; /* 133.333% */
					cursor: pointer;
				}
				uni-image{
					width: 7.29rpx;
					height: 7.29rpx;
				}
				&_name{
					color: #1D2129;
					font-size: 12.5rpx;
					font-weight: 500;
					line-height: 16.67rpx; /* 133.333% */
				}
			}
			&_list{
				display: flex;
				// align-items: center;
				flex-wrap: wrap;
				width: 100%;
				margin-top: 8.33rpx;
				&_item{
					width: calc((100% - 50rpx)/3);
					// background: #FFF;
					// padding: 6.25rpx;
					margin-right: 6.25rpx;
					margin-bottom: 6.25rpx;
					height: 97.92rpx;
					background-color: #F2F3F5;
					&_contain{
						background: #FFF;
						padding: 6.25rpx;
						border-radius: 4.17rpx;
						&_top{
							display: flex;
							align-items: center;
							justify-content: space-between;
							&_name{
								color: #1D2129;
								font-size: 8.33rpx;
								font-weight: 500;
								line-height: 12.5rpx; /* 150% */
							}
							&_btn{
								border: 1px solid;
								padding: 0 5.21rpx;
								height: 12.5rpx;
								line-height: 12.5rpx;
								font-size: 6.25rpx;
								font-weight: 400;
								border-radius: 2.08rpx;
								cursor: pointer;
							}
						}
						&_from{
							margin-top: 2.08rpx;
							color: #86909C;
							font-size: 7.29rpx;
							font-weight: 400;
							line-height: 11.46rpx; /* 157.143% */
						}
						&_con{
							margin-top: 6.25rpx;
							padding: 5.21rpx;
							background-color: #F7F8FA;
							border-radius: 3.13rpx;
							&_top{
								display: flex;
								align-items: center;
								justify-content: space-between;
								&_left{
									display: flex;
									align-items: center;
									&_text{
										color: #4E5969;
										font-size: 7.29rpx;
										font-weight: 500;
										line-height: 11.46rpx; /* 157.143% */
									}
									&_num{
										color: #4E5969;
										font-size: 7.29rpx;
										font-weight: 500;
										line-height: 11.46rpx;
										margin-left: 4.17rpx;
									}
								}
								&_right{
									display: flex;
									align-items: center;
									justify-content: flex-end;
									cursor: pointer;
									&_text{
										color: #86909C;
										font-size: 6.77rpx;
										font-weight: 400;
										line-height: 11.46rpx; /* 169.231% */
									}
									uni-image{
										width: 7.29rpx;
										height: 7.29rpx;
									}
								}
							}
							&_file{
								&_item{
									margin-top: 4.17rpx;
									display: flex;
									align-items: center;
									justify-content: space-between;
									cursor: pointer;
									&_left{
										width: calc(100% - 8rpx);
										display: flex;
										align-items: center;
										&_name{
											color: #4E5969;
											font-size: 6.77rpx;
											font-weight: 400;
											line-height: 11.46rpx; /* 169.231% */
											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(3n){
					margin-right: 0;
				}
			}
		}
	}
}

.mask{
	position: fixed;
	z-index: 999;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0,0,0,.5);
}
.modal{
	width: 156.67rpx;
	border-radius: 6.25rpx;
	background: #FFF;
	position: fixed;
	top: 30%;
	left: calc(50% - 78.33rpx);
	z-index: 1000;
	&_top{
		color: #1D2129;
		text-align: center;
		font-size: 8.33rpx;
		font-weight: 500;
		line-height: 12.5rpx; /* 150% */
		width: 115.1rpx;
		margin: 18.75rpx auto 17.71rpx;
	}
	&_bottom{
		width: 100%;
		border-top: 1px solid #E5E6EB;
		height: 28.13rpx;
		line-height: 28.13rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&_cancel{
			border-right: 1px solid #E5E6EB;
			width: 50%;
			height: 28.13rpx;
			line-height: 28.13rpx;

			color: #86909C;
			text-align: center;
			font-size: 7.81rpx;
			font-weight: 400;
			cursor: pointer;
		}
		&_confirm{
			height: 28.13rpx;
			line-height: 28.13rpx;
			text-align: center;
			width: 50%;
			font-size: 7.81rpx;
			font-weight: 500;
			cursor: pointer;
		}
	}
}
</style>
