<style scoped>
	.popupbox {
		width: 60vw;
		background-color: #FFF;
		height: 60vh;
		box-sizing: border-box;
		position: relative;
	}

	.popupbox .title {
		height: 100rpx;
		color: #111;
		font-size: 30rpx;
		font-weight: 500;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.subtitle {
		color: #666;
		font-size: 26rpx;
		font-weight: 500;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.infoBox {
		height: calc(100% - 250rpx);
		box-sizing: border-box;
		padding: 0 20rpx;
		overflow-y: auto;
	}

	.infoItem {
		border-bottom: 1px solid #999;
		margin-bottom: 10rpx;
	}

	.infoRow {
		display: flex;
		flex-wrap: nowrap;
	}

	.label {
		width: 80rpx;
		color: #666;
		font-size: 26rpx;
		white-space: nowrap;
	}

	.value {
		font-size: 28rpx;
		color: #111;
		flex-grow: 1;
	}

	.subBtn {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #4C50E7;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		margin: 10rpx auto;
	}
</style>
<template>
	<view>
		<van-popup :show="showpop" round closeable @close="taggleShow(false)">
			<view class="popupbox">
				<view class="title">
					提示
				</view>
				<view class="subtitle">
					当日有相同课程,是否切换？
				</view>
				<view class="infoBox">
					<view v-for="(info,index) in infoList" :key="index" class="infoItem">
						<view class="infoRow">
							<view class="label">
								老师：
							</view>
							<view class="value">
								{{info.TeacherName}}
							</view>
						</view>
						<view class="infoRow">
							<view class="label">
								教室：
							</view>
							<view class="value">
								{{info.RoomName}}
							</view>
						</view>
						<view class="infoRow">
							<view class="label">
								时间：
							</view>
							<view class="value">
								{{info.CourseSTime}}/{{info.CourseETime}}
							</view>
						</view>
						<view class="infoRow">
							<view class="label">
								学员：
							</view>
							<view class="value" style="white-space: wrap;">
								<view v-for="(item,index) in info.StuList" :key="index" style="display: inline-block;">
									{{item.StuName}},
								</view>
							</view>
						</view>
						<view class="infoRow">
							<view class="subBtn" @click="chooseTime(info)">
								预约该时段
							</view>
						</view>
					</view>

				</view>
				<view style="display: flex;justify-content:center">
					<view class="subBtn" @click="goOn" style="display: inline-block;">
						继续预约
					</view>
				</view>
			</view>
		</van-popup>

	</view>
</template>

<script>
	import {
		reactive,
		toRefs,
		watch
	} from "vue";
	export default {
		components: {

		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			infoList: {
				type: Array,
				default: () => []
			}
		},
		setup(props, ctx) {
			let data = reactive({
				showpop: false,
				msg: {
					pageIndex: 1,
					pageSize: 10,
					StartTime: '',
					EntTime: '',
					State: 0,
					TeacherId: 0,
					Q_SelectNormal: 1,
				},

			})
			let methods = {
				taggleShow(val) {
					ctx.emit("close", val)
				},
				chooseTime(item) {
					ctx.emit("change", item)
				},
				goOn() {
					data.showpop = false
					ctx.emit("goOn")
				}
			}
			watch(() => props.show, (val) => {
				data.showpop = val
			})
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},

	}
</script>
