<template>
	<view class="page">
		
		<uni-table class="courcon" ref="table" :loading="loading" emptyText="暂无更多数据">
			<view class="table_head">
				<uni-tr>
					<uni-th width="60" align="center" class="leftfix">
						<view class="leftcell">
							<view class="ctitle">日期</view>
							<view class="ctitle">15日内</view>
						</view>
					</uni-th>
					<uni-th width="120" align="center" v-for="(item, index) in columnTitles" :key="index">
						<view class="rightcell">
							<view class="ctitle">{{item.day?(item.day).slice(-5):''}}</view>
							<view class="ctitle">{{item.weekName}}</view>
							<view class="cnum" v-if="item.count>0">{{item.count}}</view>
						</view>
					</uni-th>
				</uni-tr>
			</view>
			<view class="table_body">
				<uni-tr v-for="(item, index) in claTimeContainer" :key="index">
					<uni-td width="60" align="center" class="leftfix">
						<view class="courfix">
							{{item.time}}
						</view>
					</uni-td>
					<uni-td width="120" align="center" v-for="(cell, ii) in columnTitles" :key="ii"> 
						<block v-for="(cc, kk) in item.claTimeWeekDayMap" :key="kk">
							<block v-for="(dd, mm) in cc" :key="mm" >
								<!-- dd.weekDay==cell.weekName && -->
								<!-- :style="{color:dd.claColor,backgroundColor:dd.claColor,opacity: 0.2,zindex: -1,borderLeftColor:dd.claColor}" -->
								<!-- :style="{color:colorlist[index].fcolor,backgroundColor:colorlist[index].color,borderLeftColor:colorlist[index].fcolor}" -->
								<view class="courheadtext" v-if="dd.claDate==cell.day"  @click="gotoCourse(dd.courseTimeId)"
								:style="{color:colorlist[index].fcolor,backgroundColor:colorlist[index].color,borderLeftColor:colorlist[index].fcolor}" 
								>
									<view class="ctxt">{{dd.startTime}}-{{dd.endTime}}</view>
									<view class="ctxt">{{dd.courseName}}</view>
									<view class="ctxt">{{dd.claName}}</view>
									<view class="ctxt">{{dd.staffName}}</view>
								</view>
							</block>
						</block>
					</uni-td>
				</uni-tr>
				
			</view>
		</uni-table>
		
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
		
		<!-- service 客服-->
		<service ref="serviceId" @goservice="goservice"></service>
		
		<!-- top 返回顶部-->
		<top ref="topId"></top>
		
		
	</view>
</template>

<script>
	import { myCache,getRemoteFile,getRemoteHtmlFile } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	import top from "../components/top.vue";
	import service from "../components/service.vue";
	
	export default {
		components: {
		  openlogin,top,service
		},
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				loading:true,
				colorlist:[
					{
						time:'08:30',
						fcolor:'#ce4b62',
						color:'#ffdbdf'
					},
					{
						time:'10:00',
						fcolor:'#0c7e07',
						color:'#f4fff3'
					},
					{
						time:'11:00',
						fcolor:'#b871d7',
						color:'#faebfe'
					},
					{
						time:'14:00',
						fcolor:'#95440f',
						color:'#ffe9cb'
					},
					{
						time:'15:00',
						fcolor:'#116c94',
						color:'#cbefff'
					},
					{
						time:'16:00',
						fcolor:'#867ae0',
						color:'#f4f0ff'
					},
					{
						time:'17:00',
						fcolor:'#37acc0',
						color:'#e0f8fa'
					},
					{
						time:'18:00',
						fcolor:'#e8739d',
						color:'#feecfa'
					},
					{
						time:'19:00',
						fcolor:'#4d8ae3',
						color:'#eaf0ff'
					},
					{
						time:'20:00',
						fcolor:'#f2960f',
						color:'#fbeacc'
					}
				],
				columnTitles: [
					{
						"weekName": "星期二",
						"day": "08-19",
						"count": 1
					},
					{
						"weekName": "星期三",
						"day": "08-20",
						"count": 3
					},
					{
						"weekName": "星期四",
						"day": "08-21",
						"count": 0
					},
					{
						"weekName": "星期五",
						"day": "08-22",
						"count": 1
					},
					{
						"weekName": "星期六",
						"day": "08-23",
						"count": 1
					},
					{
						"weekName": "星期日",
						"day": "08-24",
						"count": 2
					},
					{
						"weekName": "星期一",
						"day": "08-25",
						"count": 2
					},
					{
						"weekName": "星期二",
						"day": "08-26",
						"count": 1
					},
					{
						"weekName": "星期三",
						"day": "08-27",
						"count": 3
					},
					{
						"weekName": "星期四",
						"day": "08-28",
						"count": 0
					},
					{
						"weekName": "星期五",
						"day": "08-29",
						"count": 1
					},
					{
						"weekName": "星期六",
						"day": "08-30",
						"count": 1
					},
					{
						"weekName": "星期日",
						"day": "08-31",
						"count": 2
					},
					{
						"weekName": "星期一",
						"day": "09-01",
						"count": 2
					}
				],
				claTimeContainer: [
				{
						"time": "08:30",
						"claTimeWeekDayMap": {
							"1": [
								{
									"courseTimeId": 1935590320385343489,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-24",
									"weekDay": "星期日",
									"startTime": "08:00",
									"endTime": "09:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								},
								{
									"courseTimeId": 1935590320385343492,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-31",
									"weekDay": "星期日",
									"startTime": "08:00",
									"endTime": "09:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								}
							],
							"2": [
								{
									"courseTimeId": 1935590320385343490,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-25",
									"weekDay": "星期一",
									"startTime": "08:00",
									"endTime": "09:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								},
								{
									"courseTimeId": 1935590320385343493,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-09-01",
									"weekDay": "星期一",
									"startTime": "08:00",
									"endTime": "09:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								}
							],
							"3": [],
							"4": [
								{
									"courseTimeId": 1935590320322428930,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-20",
									"weekDay": "星期三",
									"startTime": "08:00",
									"endTime": "09:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								},
								{
									"courseTimeId": 1935596230449086465,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-27",
									"weekDay": "星期三",
									"startTime": "08:00",
									"endTime": "09:00",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								},
								{
									"courseTimeId": 1935590320385343491,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-09-03",
									"weekDay": "星期三",
									"startTime": "08:00",
									"endTime": "09:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								}
							],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "10:00",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [],
							"4": [],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "11:00",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [],
							"4": [],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "14:00",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [],
							"4": [],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "15:00",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [],
							"4": [],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "16:00",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [],
							"4": [],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "17:00",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [],
							"4": [],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "18:00",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [],
							"4": [],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "19:30",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [
								{
									"courseTimeId": 1935590110594646018,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-19",
									"weekDay": "星期二",
									"startTime": "16:00",
									"endTime": "17:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								}
							],
							"4": [],
							"5": [],
							"6": [
								{
									"courseTimeId": 1935590110657560578,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-29",
									"weekDay": "星期五",
									"startTime": "16:00",
									"endTime": "17:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								}
							],
							"7": [
								{
									"courseTimeId": 1935590110657560579,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-30",
									"weekDay": "星期六",
									"startTime": "16:00",
									"endTime": "17:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								}
							],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					}
				],
				
			};
		},
		onLoad(option) {
			// 加载我的课程表
			this.loadinfo();
		},
		onShow() {
			this.openId = myCache('openId');
			var user = myCache('user');
			this.userid = user.userid? user.userid:'';
			this.phone = user.userphone;
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},500);
		},
		onPageScroll(e) {
			//调用子组件方法
			this.$refs.topId.topData(e.scrollTop);
		},
		methods: {
			gotoCourse(id){
				// console.log(item);
				// var data=encodeURIComponent(JSON.stringify(item));
				// 预定详情
				uni.navigateTo({
					url: `/pages/user/mycourseinfo?id=${id}`
				});
			}, 
			goservice(val){
				console.log(val);
			}, 
			iflogin(){
				this.openId = myCache('openId');
				this.phone = myCache('phone');
				this.userid = myCache('userid');
				if(this.userid==""||this.userid=="0"){
					this.$refs.loginId.open();
					return false;
				}
				else{
					return true;
				}
			},
			async loadinfo(){
				// 详情
				uni.showLoading();
				this.loading=true;
				var params = {
					id: this.id
				};
				try{
					const {data: res1} = await uni.$http.get('/api/my/getCourseList');
					console.log(res1);
					this.loading=false;
					if (res1&&res1.data) {
						if(res1.code==500){
							uni.showModal({
								title: '提示',
								content: res1.msg + '请返回..',
								cancelText: '取消',
								confirmText: '确定',
								success: ress => {
									// 返回
									uni.navigateBack({
										delta: 1
									});
								}
							});
							return false;
						}
						this.columnTitles=res1.data.columnTitles?res1.data.columnTitles:[];
						this.claTimeContainer=res1.data.claTimeContainer?res1.data.claTimeContainer:[];
						this.$forceUpdate();
					}
					else{
						uni.showModal({
							title: '提示',
							content: res1.message? res1.message : '当前信息不存在..',
							cancelText: '取消',
							confirmText: '确定',
							success: ress => {
								// 返回
								uni.navigateBack({
									delta: 1
								});
							}
						});
					}
				}
				catch(e){
					this.loading=false;
					console.log(e);
					uni.showModal({
						title: '提示',
						content: '当前信息不存在..',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							// 返回
							uni.navigateBack({
								delta: 1
							});
						}
					});
				}
			},
			getPhoneNumber(e){
				if(e.phone){
					this.phone = e.phone
				}
				if(e.userid){
					this.userid = e.userid
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 0;
		position: relative;
		background-color: #f8f8f8;
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
	}
	.table_head{ 
		position: sticky;
		top: 0;
		z-index: 20;
	}
	.table_body{
		position: sticky;
		top: 0;
		height: calc(100vh - 120rpx);
		/* #ifdef H5 */
		height: calc(100vh - 120rpx - var(--window-top));
		/* #endif */
		background: #f8f8f8;
	} 
	::v-deep .uni-table-tr{
		display: flex;
	}
	::v-deep .uni-table-th{
		padding:0 !important
	}
	::v-deep .uni-table-td{
		padding:0 !important
	}
	::v-deep .uni-table-tr .uni-table-th:first-child {
	  position: sticky;
	  left: 0;
	  z-index: 10;
	  background-color: #FFFAF2;
	}
	::v-deep .uni-table-tr .uni-table-td:first-child {
	  position: sticky;
	  left: 0;
	  z-index: 10;
	  background-color: #FFFAF2;
	}
	.leftfix{
		position: sticky;
		left: 0;
		z-index: 10;
		background-color: #fffae0;
	}
	.courcon{
		width: 100%;
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		overflow: auto;
		margin: 0;
		padding: 0;
		.leftcell{
			position: sticky;
			left: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 120rpx;
			height: 120rpx;
			background-color: #fffae0;
		}
		.rightcell{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 240rpx;
			height: 120rpx;
			background-color: #ffffff;
		}
		.cnum{
			position: absolute;
			top:15rpx;
			right: 20rpx;
			min-width: 28rpx;
			padding: 0 2rpx;
			border-radius: 50% 50%;
			background-color: #ff0000;
			color: #FFF;
			font-size: 22rpx;
		}
		.courhead{
			border-radius: 8rpx;
			background-color: #ffffff;
			display: flex;
			flex-direction: column;
			width: 120rpx;
			height: 120rpx;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 0;
			top: 0;
		}
		.ctitle{
			font-size: 30rpx;
			color:#000;
		}
		.courcell{
			width: 120rpx;
			height: 120rpx;
			border-bottom: 1rpx dotted #ccc;
			background-color: #ffffff;
		}
		.chcell{
			width: 240rpx;
		}
		.courfix{
			position: sticky;
			left: 0;
			display: flex;
			flex-direction: column;
			width: 120rpx;
			height: 180rpx;
			justify-content: center;
			align-items: center;
			border-bottom: 1rpx dotted #ccc;
		}
		.courheadtext{
			display: flex;
			flex-direction: column;
			width: 240rpx;
			height: 180rpx;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			border-radius: 10rpx;
			border-left-width: 10rpx;
			border-left: solid;
		}
		.ctxt{
			font-size: 28rpx;
			line-height: 36rpx;
		}
	}
	
</style>
