<style scoped>
	.mySubscribe {
		width: 100%;
		height: 100vh;
		background-color: #F5F5F5;
	}

	.headrow {
		overflow: hidden;
		border-radius: 0px 0px 50rpx 50rpx;
	}

	.listbox {
		width: 100%;
		margin-top: 15px;
		padding: 0 15px;
		box-sizing: border-box;
	}

	.row {
		display: flex;
		align-items: center;
	}

	.onetext {
		width: 100%;
		text-align: center;
		overflow: hidden;
		display: inline-block;
		white-space: nowrap;
		text-overflow: ellipsis
	}

	.popupbox {
		width: 60vw;
		background: #FFF;
		height: 100vh;
		box-sizing: border-box;
		position: relative;

	}

	.popupBtnBox {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.popupBtn {
		font-size: 30rpx;
		color: #111;
	}

	.popupbox-c {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.popupbox-list {
		height: 90rpx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		font-size: 26rpx;
		color: #555555;
		box-sizing: border-box;
	}

	.popupbox-item {
		justify-content: space-between;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		height: 100rpx;
	}

	.box-item {
		border-radius: 24rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #FFF;
		font-size: 24rpx;
		box-shadow: 2rpx 4rpx 40rpx 0px rgba(212, 212, 212, 0.6);
		position: relative;
	}

	.listItemBox1 {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.listItemBox1 .listItemDate {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
		margin-right: 10rpx;
	}

	.listItemBox1 .listItemWeek {
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #A5A5A5;
	}

	.listItemBox2 {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background-color: #E4E5FB;
		border-radius: 16rpx;
		margin: 20rpx 0;
		box-sizing: border-box;
		padding: 16rpx 20rpx;
	}

	.listItemBox2 .classTime {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
	}

	.listItemBox2 .gap {
		margin: 0 20rpx;
		text-align: center;
	}

	.listItemBox2 .classMinutes {
		font-size: 18rpx;
		font-family: PingFang SC;
		color: #9699E6;
	}

	.CourseTimeListItem {
		margin: 5rpx 0;
	}

	.listItemBox3 {
		display: flex;
		margin: 10rpx 0;
	}

	.listItemBox3 .label {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #A5A5A5;
		margin-right: 20rpx;
	}

	.listItemBox3 .con {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #111111;
		display: flex;
		white-space: nowrap;
	}

	.stateBox {
		position: absolute;
		right: 44rpx;
		bottom: 44rpx;
	}

	.stateBox .StateName {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111111;
	}

	.quxiaoBtn {
		box-sizing: border-box;
		padding: 6rpx 12rpx;
		border-radius: 10rpx;
		margin-left: 300rpx;
		border: 1px solid #9699e6;
		color: #4c50e7;
		font-size: 20rpx
	}
</style>
<template>
	<view class="mySubscribe">
		<view class="row headrow">
			<van-tabs style="flex:1" :active="data.msg.State" title-inactive-color="#444444"
				title-active-color="#4C50E7" line-height="0" @change="changeTab">
				<van-tab :title="x.Name" :name="x.Id" v-for="(x,y) in stateList" :key='y'></van-tab>
			</van-tabs>
			<view class="onetext"
				style="width: 100rpx;background: #FFF;height: 88rpx;display: flex;align-items: center;justify-content: center;"
				@click="popupshow2=true">
				<van-icon name="bars" color="#4C50E7" size="44rpx" />
			</view>
		</view>

		<view v-if="List.length>0">
			<scroll-view :scroll-y="true" style="height: calc(100vh - 150rpx );width: 100vw;">
				<view class="listbox" v-for='(x,y) in List' :key='y'>
					<view class="box-item">
						<view class="listItemBox1">
							<view class="listItemDate">
								{{x.Date}}
							</view>
							<view class="listItemWeek">
								{{getWeek(x.Date)}}
							</view>
							<view class="quxiaoBtn" v-if="x.State == 1" @click="goquxiao(x)">
								取消
							</view>
						</view>
						<view class="listItemBox2"
							:style="{display:x.CourseTimeList.length==1?'inline-block':'flex','background-color':x.State == 5?'#D4D4D4':'#E4E5FB'}">
							<view v-for="(item,index) in x.CourseTimeList" :key="index" class="row CourseTimeListItem">
								<image
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee2.png"
									mode="" style="width: 38rpx;height: 38rpx;margin: 0 20rpx ;" v-if="index%2===1">
								</image>
								<text class="classTime">{{item.StartTime}}</text>
								<view class="gap">
									<view class="classMinutes">{{item.Minutes}}分钟</view>
									<van-icon name="ellipsis" color="#9699E6" size="26rpx" />
								</view>
								<text class="classTime">{{item.EndTime}}</text>
							</view>
						</view>

						<view class="listItemBox3">
							<view class="label">
								课程
							</view>
							<view class="con">
								{{x.CourseName}}
							</view>
						</view>
						<view class="listItemBox3">
							<view class="label">
								教室
							</view>
							<view class="con">
								{{x.RoomName}}
							</view>
						</view>
						<view class="listItemBox3">
							<view class="label">
								校区
							</view>
							<view class="con">
								{{x.RoomSchoolName}}
							</view>
						</view>
						<view class="listItemBox3">
							<view class="label">
								课次
							</view>
							<view class="con">
								第{{x.ChapterNo||0}}次课
							</view>
						</view>
						<view class="listItemBox3">
							<view class="label">
								教师
							</view>
							<view class="con">
								<image :src='x.TeacherHead' mode="aspectFill"
									style="width:36rpx ;height: 36rpx;border-radius: 50%; margin-right: 12rpx;"></image>
								<text>{{x.TeacherName}}</text>
							</view>
						</view>
						<view class="stateBox">
							<view class="StateName"
								:style="{color: x.State == 2?'#4C50E7':x.State == 4?'#EF5361':x.State == 5?'#d4d4d4':'#111111'}">
								{{x.StateName}}
							</view>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 40rpx;"></view>
			</scroll-view>
		</view>
		<view v-else>
			<van-empty description="暂无数据" />
		</view>
		<van-dialog :show='show' title="提示" message='正在确认中,您确定取消预约？' show-cancel-button @cancel='show = false'
			@confirm='quedquxiao'>
		</van-dialog>
		<van-popup :show="popupshow2" @close="popupshow2=false" position='right'>
			<view class="popupbox" style="font-size: 14px;padding: 20rpx;">
				<view class="popupbox-item row">
					<span>开始时间</span>
					<view class="row" @click="showdatePopup=true">
						<span v-if="msg.StartTime==''" style="color: #999999;">请选择</span>
						<span v-else>{{msg.StartTime}}</span>
					</view>

				</view>
				<view class="popupbox-item row">
					<span>结束时间</span>
					<view class="row" @click="showdatePopup2=true">
						<span v-if="msg.EntTime==''" style="color: #999999;">请选择</span>
						<span v-else>{{msg.EntTime}}</span>
					</view>
				</view>
				<view class="popupbox-item row">
					<span>老师</span>
					<view class="row" @click="popupshow=true">
						<span v-if="msg.TeacherId==0" style="color: #999999;">请选择</span>
						<span v-else>{{TeacherName}}</span>
					</view>
				</view>
				<view class="popupBtnBox">
					<van-button type="info" plain size="small" @click="popupshow2=false">取消</van-button>
					<van-button type="info" size="small" @click="search">确定</van-button>
				</view>
			</view>
		</van-popup>
		<van-popup :show="popupshow" @close="popupshow=false" position='right'>
			<view class="popupbox">
				<view class="popupbox-top">
					<van-search :value="value" placeholder="请输入搜索关键词" @change="onSearch" @cancel="onSearch" />
				</view>
				<view class="popupbox-c" v-if='TeacherList.length>0'>
					<scroll-view :scroll-y="true" style="height: calc(100vh - 110rpx - 150rpx);width: 100%;">
						<view class="popupbox-list row" style="justify-content: space-between;"
							v-for='(x,y) in TeacherList' :key='y' @click="choice(x)">
							<span>{{x.TeacherName}}</span>
							<van-icon name="success" color='#0000ff' v-if='msg.TeacherId == x.TId' />
						</view>
						<view style="width: 100%;height: 20px;"></view>
					</scroll-view>
				</view>
				<view v-else>
					<van-empty description="暂无数据" />
				</view>

			</view>
		</van-popup>
		<van-popup :show="showdatePopup" round position="bottom" custom-style="height: 50%"
			@close="showdatePopup=false">
			<van-datetime-picker type="date" :value="getCurrentDate" @cancel="showdatePopup=false"
				@confirm="onConfirm()" />
		</van-popup>
		<van-popup :show="showdatePopup2" round position="bottom" custom-style="height: 50%"
			@close="showdatePopup2=false">
			<van-datetime-picker type="date" :value="getCurrentDate2" @cancel="showdatePopup2=false"
				@confirm="onConfirm2()" />
		</van-popup>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		provide,
	} from "vue";
	import Dialog from '../../wxcomponents/vant/dialog/dialog'
	export default {
		components: {

		},
		props: [],
		setup(props) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				msg: {
					pageIndex: 1,
					pageSize: 10,
					StartTime: '',
					EntTime: '',
					State: 0,
					TeacherId: 0,
					Q_SelectNormal:1,
				},
				TeacherName: "",
				pageState: "more",
				PageCount: 0,
				timer: null, //防抖
				List: [],
				stateList: [],
				show: false,
				AppointId: 0,
				popupshow: false,
				popupshow2: false,
				value: '',
				TeacherList: [],
				allTeacherList: [],
				showdatePopup: false,
				showdatePopup2: false,
				getCurrentDate: new Date().getTime(),
				getCurrentDate2: new Date().getTime(),
			})
			let methods = {
				getList() {
					if(data.msg.State==0){
						data.msg.Q_SelectNormal=1
					}else{
						data.msg.Q_SelectNormal=0
					}
					data.pageState = "loading";
					proxy.$request("/AppletCenter/GetMyAppointPageList", data.msg).then(res => {
						if (res.Code == 1) {
							if (data.timer) data.timer = null;
							data.PageCount = res.Data.PageCount;
							if (data.msg.pageIndex === 1) {
								data.List = res.Data.PageData;
							} else {
								data.List = [...data.List, ...res.Data.PageData];
							}
							if (data.msg.pageIndex >= res.Data.PageCount) {
								data.pageState = "none";
							} else {
								data.pageState = "more";
							}
						}
					})

				},
				lower(e) {
					if (data.msg.pageIndex < data.PageCount) {
						data.pageState = "loading";
						if (data.timer) clearTimeout(data.timer);
						data.timer = setTimeout(() => {
							data.msg.pageIndex++;
							that.getList();
						}, 1000);
					} else {
						data.pageState = "none";
					}
				},
				getState() {
					proxy.$request("/AppletCenter/GetCourseAppointStateEnumList", {}).then(res => {
						if (res.Code == 1) {
							data.stateList = res.Data
							data.stateList.unshift({
								Id: 0,
								Name: '全部'
							})
						}
					})
				},
				getTeacherList() {
					proxy.$request("/AppletCenter/GetTeacherList", {}).then(res => {
						if (res.Code == 1) {
							data.TeacherList = res.Data
							data.TeacherList.unshift({
								TeacherName: '不限',
								TId: 0
							})
							data.allTeacherList = JSON.parse(JSON.stringify(res.Data))
						}
					})
				},
				choice(x) { //老师选择
					data.msg.TeacherId = x.TId;
					data.popupshow = false;
					data.value = '';
					data.TeacherList = JSON.parse(JSON.stringify(data.allTeacherList))
					data.TeacherName = x.TeacherName
				},
				onSearch(val) {
					if (!val.detail) {
						data.TeacherList = JSON.parse(JSON.stringify(data.allTeacherList))
					} else {
						data.TeacherList = data.allTeacherList.filter(e => {
							return e.TeacherName.indexOf(val.detail) > -1
						})
					}
				},
				changeTab(e) {
					data.msg.State = e.detail.name;
					data.msg.pageIndex = 1;
					that.getList();
				},
				goquxiao(x) {
					data.show = true;
					data.AppointId = x.Id
				},
				quedquxiao() {
					uni.showLoading({
						title: '取消中...'
					})
					proxy.$request("/AppletCenter/CancelAppointment", {
						AppointId: data.AppointId
					}).then(res => {
						if (res.Code == 1) {
							uni.hideLoading()
							data.show = false;
							data.msg.pageIndex = 1;
							that.getList();
						}
					})
				},
				onConfirm(val) {
					data.getCurrentDate = val.detail;
					let curdate = new Date(val.detail);
					let year = curdate.getFullYear();
					let month = curdate.getMonth() < 9 ? "0" + (curdate.getMonth() + 1) : curdate.getMonth() + 1
					let day = curdate.getDate() < 9 ? "0" + (curdate.getDate()) : curdate.getDate()
					data.msg.StartTime = year + "-" + month + '-' + day;
					data.showdatePopup = false
				},
				onConfirm2(val) {
					data.getCurrentDate2 = val.detail;
					let curdate = new Date(val.detail);
					let year = curdate.getFullYear();
					let month = curdate.getMonth() < 9 ? "0" + (curdate.getMonth() + 1) : curdate.getMonth() + 1
					let day = curdate.getDate() < 9 ? "0" + (curdate.getDate()) : curdate.getDate()
					data.msg.EntTime = year + "-" + month + '-' + day;
					data.showdatePopup2 = false
				},
				search() {
					data.msg.pageIndex = 1
					this.getList()
					data.popupshow2 = false
				},
				getWeek(d) {
					const date = new Date(d)
					const week = date.getDay()
					let weekStr = ""
					switch (week) {
						case 0:
							weekStr = '星期天';
							break;
						case 1:
							weekStr = '星期一';
							break;
						case 2:
							weekStr = '星期二';
							break;
						case 3:
							weekStr = '星期三';
							break;
						case 4:
							weekStr = '星期四';
							break;
						case 5:
							weekStr = '星期五';
							break;
						case 6:
							weekStr = '星期六';
							break;
					}
					return weekStr
				}

			}
			onMounted(() => {

			})
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},
		onShow() {

		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: "约课记录",
			});

			this.getState()
			this.getTeacherList()
			this.getList()

		},
	}
</script>
