<template>
	<view class="container">
		<!-- 面包屑 -->
		<custom-breadcrumb separator=">">
			<custom-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to" :switch="route.switch">
				{{route.name}}
			</custom-breadcrumb-item>
		</custom-breadcrumb>
		<!-- 面包屑 -->

		<view class="content">
			<view class="title">{{routes[1].name}}</view>
			<!-- 志愿者列表 -->
			<view class="list">
				<view class="list-item" v-for="item in listData" :key="item.id">
					<view class="flex justify-between align-center">
						<view class="list-item-title">
							{{isDoctor ? item.volunteerUser.nickName : item.doctorUser.nickName}}</view>
						<view class="list-item-btn color-custom border-color-custom" @click="unbindPerson(item)">解除绑定
						</view>
					</view>
					<view class="list-item-hospital">
						{{isDoctor ? item.volunteerUser.organizationName : item.doctorUser.organizationName}}</view>
					<view class="list-item-case flex flex-direction justify-between">
						<!-- 课件总计 -->
						<view class="list-item-case-item flex justify-between align-center" @click="clickAll(item)">
							<view class="list-item-case-item-left" style="font-size: 28rpx;font-weight: 600;">
								辅助{{isDoctor ? '' : '他'}}上传课件 {{item.caseNumber}}
							</view>
							<view class="list-item-case-item-right flex align-center">
								<view>全部</view>
								<image style="width: 28rpx;height: 28rpx;" src="@/static/images/phone/arrow_right.png">
								</image>
							</view>
						</view>
						<!-- 课件总计 -->
						<!-- 课件列表 -->
						<view v-if="item.caseBaseInfoVoList"
							class="list-item-case-item flex justify-between align-center"
							v-for="caseItem in item.caseBaseInfoVoList" :key="caseItem.id" @click="clickItem(caseItem)">
							<view class="list-item-case-item-left flex align-center">
								<image style="width: 32rpx;height: 32rpx;" src="@/static/images/case_icon.png">
								</image>
								<view style="margin-left: 8rpx;">{{caseItem.caseName}}</view>
							</view>
							<view class="list-item-case-item-right ">
								<image style="width: 28rpx;height: 28rpx;" src="@/static/images/phone/arrow_right.png">
								</image>
							</view>
						</view>
						<!-- 课件列表 -->
					</view>
				</view>
			</view>
			<!-- 志愿者列表 -->
		</view>
		<!-- 底部按钮 -->
		<view class="footer">
			<u-button type="primary" class="sub-btn" color="var(--phone-theme-color)"
				@click="addPerson">{{ isDoctor ? '添加志愿者' : '添加医生' }}</u-button>
		</view>
		<!-- 底部按钮 -->
		<!-- 新增课件 -->
		<uni-popup ref="popupPerson" :mask-click="false" type="bottom" 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">
						<u-icon name="scan" color="var(--phone-theme-color)"></u-icon>
						<view class="popCon-top-left-text color-custom" @click="toScan">扫描二维码</view>
					</view>
					<view class="popCon-top-title">{{ isDoctor ? '添加志愿者':'添加医生' }}</view>
					<view class="popCon-top-cancel" @click="closePopup">取消</view>
				</view>
				<!-- 头部区域 -->
				<!-- 内容区域 -->
				<view v-if="!isShowQrcode" class="middleCon">
					<view class="popCon-middle">
						<view class="popCon-middle-item">
							<view class="popCon-middle-item-title">{{ isDoctor ? '志愿者名称':'医生姓名'}}*</view>
							<view class="popCon-middle-item-con4">
								<input v-model="addPersonForm.name" placeholder="填入姓名" @input="formatterInput"/>
							</view>
						</view>
						<view class="popCon-middle-item">
							<view class="popCon-middle-item-title">{{ isDoctor ? '志愿者手机号':'医生手机号'}}*</view>
							<view class="popCon-middle-item-con4">
								<input v-model="addPersonForm.phone" placeholder="填入手机号" />
							</view>
						</view>
					</view>
					<view class="popCon-bottom bg-custom" @click="bindPerson">绑定</view>
				</view>
				<view v-else class="middleCon_qrcode flex flex-direction align-center">
					<vue-qr ref="qrCode" :text="qrCodeData" style="width: 400rpx;height: 400rpx;"></vue-qr>
					<view>您可邀请志愿者扫码登记信息，辅助您进行课件上传</view>
				</view>
				<!-- 内容区域 -->
			</view>
		</uni-popup>
		<!-- 新增课件 -->

		<u-modal :show="show" :content="content" @confirm="submitUnbindData" showCancelButton confirmText='确定解除'
			@cancel="() => show = false"></u-modal>
	</view>
</template>

<script>
	import {
		getVolunteerList,
		getDoctorList,
		bindVolunteer,
		bindDoctor,
		unbind
	} from '@/api/my/my.js'

	import VueQr from 'vue-qr'
	export default {
		components: {
			VueQr
		},
		data() {
			return {
				routes: [{
						to: "/pages/phone/mine/index",
						name: "个人中心",
						switch: true
					},
					{
						to: "/pages/phone/mine/volunteer/index",
						name: "",
						switch: true
					}
				],
				isDoctor: true, //是否医生
				isShowQrcode: false, //是否展示二维码
				info: {}, // 我的信息
				listData: [],
				addPersonForm: {
					name: '',
					phone: '',
				},
				show: false,
				id: '', //志愿者、医生id
				content: '',
				qrCodeData: ''
			};
		},
		onLoad() {
			this.isDoctor = this.$store.state.user.loginIdentity == 0
			this.routes[1].name = this.isDoctor ? '志愿者管理' : '医生管理'
			this.qrCodeData = this.$store.state.user.nickName + ',' + this.$store.state.user.userInfo.phonenumber
			this.initData()	
		},
		methods: {
			formatterInput(e){
				let temp = e.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5\,\.\-\，\。]/g, '')
				this.$nextTick(()=>{
					this.addPersonForm.name = temp
				})
			},
			initData() {
				if (this.isDoctor) {
					getVolunteerList().then(res => {
						if (res.code == 200) {
							this.listData = res.data
						}
					})
				} else {
					getDoctorList().then(res => {
						if (res.code == 200) {
							this.listData = res.data
						}
					})
				}
			},
			addPerson() {
				this.isShowQrcode = false
				this.$refs.popupPerson.open()
			},
			closePopup() {
				this.$refs.popupPerson.close()
			},
			//绑定志愿者或者医生
			bindPerson() {
				if (this.isDoctor) {
					bindVolunteer(this.addPersonForm).then(res => {
						uni.$u.toast(res.msg)
						if (res.code == 200) {
							this.$refs.popupPerson.close()
							this.initData()
						}
					}).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.initData()
						}
					}).catch(err => {
						console.log('err==', err);
					})
				}
			},
			//解绑志愿者或者医生
			unbindPerson(item) {
				this.id = item.id
				if (this.isDoctor) {
					this.content = '您要解除与志愿者“' + item.volunteerUser.nickName + '”的绑定吗？'
				} else {
					this.content = '您要解除与医生“' + item.doctorUser.nickName + '”的绑定吗？'
				}
				this.show = true

			},
			submitUnbindData() {
				unbind(this.id).then(res => {
					uni.$u.toast(res.msg)
					if (res.code = 200) {
						this.show = false
						this.initData()
					}
				}).catch(err => {

				})
			},
			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
				}
				uni.$emit('clickAll', data)
			},
			clickItem(item) {
				uni.$emit('clickItem', item)
			},
			toScan(){
				uni.navigateTo({
					url:'/pages/scan'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F7F8FA;
	}

	.container {

		.content {
			padding: 0px 32rpx;
			padding-bottom: 172rpx;

			.title {
				font-size: 40rpx;
				font-weight: 600;
				margin-top: 40rpx;
			}

			.list {
				width: 100%;
				height: 100%;
				margin-top: 32rpx;

				&-item {
					width: 100%;
					background: white;
					border-radius: 16rpx;
					padding: 24rpx;
					margin-bottom: 24rpx;

					&-title {
						color: #1D2129;
						font-size: 32rpx;
						font-weight: 600;
					}

					&-btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 128rpx;
						height: 48rpx;
						font-size: 24rpx;
						padding: 14rpx;
						border-radius: 8rpx;
						border: 1px solid;
					}

					&-hospital {
						font-size: 28rpx;
						font-weight: 400;
						color: #86909C;
						margin-top: 4rpx;
					}

					&-case {
						margin-top: 24rpx;
						padding: 20rpx;
						background: #F7F8FA;
						border-radius: 16rpx;

						&-item {
							height: 44rpx;

							&-left {
								color: #4E5969;
								font-size: 26rpx;
							}

							&-right {
								color: #86909C;
								font-size: 26rpx;
							}
						}
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 172rpx;
			background: white;
			padding: 12rpx 32rpx 72rpx;

			.sub-btn {
				border-radius: 8rpx;

			}
		}
	}

	.popCon {
		width: 100%;
		height: 860rpx;
		border-radius: 24rpx 24rpx 0 0;
		background: #FFF;
		padding: 0 32rpx 26rpx;
		position: relative;
		overflow: auto;

		&-top {
			height: 88rpx;
			line-height: 88rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-left {
				display: flex;
				align-items: center;
				cursor: pointer;
				width: 33%;

				uni-image {
					width: 32rpx;
					height: 32rpx;
				}

				&-text {
					margin-left: 8rpx;
					font-size: 26rpx;
					font-weight: 400;
					line-height: 44rpx;
				}
			}

			&-title {
				color: #1D2129;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
				line-height: 48rpx;
				width: 33%;
			}

			&-cancel {
				color: #86909C;
				text-align: right;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 44rpx;
				cursor: pointer;
				width: 33%;
			}
		}

		.middleCon {
			height: calc(100% - 88rpx);
			overflow: auto;
			width: 100%;
		}

		.middleCon_qrcode {
			height: calc(100% - 88rpx);
			overflow: auto;
			width: 100%;

			image {
				width: 400rpx;
				height: 400rpx;
				margin-top: 100rpx;
			}

			view {
				color: #C9CDD4;
				font-size: 26rpx;
				margin-top: 40rpx;
			}
		}

		.popCon-middle {
			min-height: calc(100% - 200rpx);

			&-item {
				margin: 8rpx 0;

				&-title {
					margin-bottom: 8rpx;
					color: #86909C;
					font-size: 26rpx;
					font-weight: 400;
					line-height: 44rpx;
					/* 169.231% */
				}

				&-con4 {
					height: 88rpx;
					padding: 0 24rpx;
					border-radius: 8rpx;
					background: #F7F8FA;
					font-size: 28rpx;


					input {
						height: 88rpx;
						font-size: 28rpx;
					}
				}
			}
		}

		&-bottom {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 8rpx;
			color: #fff;
			font-size: 28rpx;
			font-weight: 400;
			cursor: pointer;
			width: 100%;
			margin: 32rpx auto 72rpx;
		}

	}

	/deep/ .uni-input-input {
		color: #000;
		font-size: 28rpx;
	}

	/deep/ .is-input-border {
		border: none;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #F7F8FA !important;
	}

	/deep/ .uni-popup__wrapper {
		border-radius: 24rpx 24px 0 0;
		// overflow: hidden;
	}
</style>
