<template>
	<view class="page">
		
		<view class="courcon">
			<view class="leftfix">
				<view class="courhead">
					<view class="ctitle">日期</view>
					<view class="ctitle">15日内</view>
				</view>
				<view class="leftcon">
					<view class="courcell" v-for="(item, index) in timelist" :key="index">
						{{item.time}}
					</view>
				</view>
			</view>
			<view class="rightcon">
				<view class="courheadr">
					<view class="chcell" v-for="(item, index) in datelist" :key="index">
						<view class="ctitle">{{item.day}}</view>
						<view class="ctitle">{{item.week}}</view>
					</view>
				</view>
				<view class="courcellr">
					<view class="courow" v-for="(row, ii) in timelist" :key="ii">
						<view class="coucell" v-for="(col, kk) in datelist" :key="kk">
							<block v-for="(item, index) in courselist" :key="index">
								<view class="courheadtext" v-if="row.time==item.time && col.day==item.day" 
								:style="{color:colorlist[ii].fcolor,backgroundColor:colorlist[ii].color,borderLeftColor:colorlist[ii].fcolor}" >
									<view class="ctxt">{{item.timeslot}}</view>
									<view class="ctxt">{{item.name}}</view>
									<view class="ctxt">{{item.info}}</view>
									<view class="ctxt">{{item.room}}</view>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
 
		<!-- 是否登录 -->
		<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:"",
				id:'',
				type:'',// 1 老师课程表  2、精品课程表
				name:'精品', // 精品课程名称
				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'
					}
				],
				timelist:[
					{
						time:'08:30',
						fcolor:'#ce4b62',
						color:'#ffdbdf'
					},
					{
						time:'10:00',
						fcolor:'#0c7e07',
						color:'#f4fff3'
					},
					{
						time:'11:00',
						fcolor:'#9344b9',
						color:'#fbf6ff'
					},
					{
						time:'14:00',
						fcolor:'#95440f',
						color:'#ffe9cb'
					},
					{
						time:'15:00',
						fcolor:'#116c94',
						color:'#cbefff'
					},
					{
						time:'16:00',
						fcolor:'#788ab8',
						color:'#f4f0ff'
					},
					{
						time:'17:00',
						fcolor:'#7dced1',
						color:'#e0f8fa'
					},
					{
						time:'18:00',
						fcolor:'#e8739d',
						color:'#feecfa'
					},
					{
						time:'19:00',
						fcolor:'#4d8ae3',
						color:'#eaf0ff'
					},
					{
						time:'20:00',
						fcolor:'#f2960f',
						color:'#fbeacc'
					}
				],
				datelist:[
					{
						day:'06-01',
						week:'周日'
					},
					{
						day:'06-02',
						week:'周一'
					},
					{
						day:'06-03',
						week:'周二'
					},
					{
						day:'06-04',
						week:'周三'
					},
					{
						day:'06-05',
						week:'周四'
					},
					{
						day:'06-06',
						week:'周五'
					},
					{
						day:'06-07',
						week:'周六'
					},
					{
						day:'06-08',
						week:'周日'
					},
					{
						day:'06-09',
						week:'周一'
					},
					{
						day:'06-10',
						week:'周二'
					},
					{
						day:'06-11',
						week:'周三'
					},
					{
						day:'06-12',
						week:'周四'
					},
					{
						day:'06-13',
						week:'周五'
					},
					{
						day:'06-14',
						week:'周六'
					},
					{
						day:'06-15',
						week:'周日'
					}
				],
				courselist:[
					{
						day:'06-01',
						time:'08:30',
						timeslot:'08:30-09:30',
						name:'团课',
						info:'进修课程提升课',
						room:'大教室'
					},
					{
						day:'06-01',
						time:'15:00',
						timeslot:'15:00-16:00',
						name:'团课',
						info:'进修课程提升课',
						room:'大教室'
					},
					{
						day:'06-01',
						time:'17:00',
						timeslot:'17:00-18:00',
						name:'团课',
						info:'进修课程提升课',
						room:'大教室'
					},
					{
						day:'06-01',
						time:'19:00',
						timeslot:'19:00-20:00',
						name:'团课',
						info:'进修课程提升课',
						room:'大教室'
					},
					{
						day:'06-01',
						time:'20:00',
						timeslot:'20:00-21:00',
						name:'团课',
						info:'进修课程提升课',
						room:'大教室'
					},
					{
						day:'06-02',
						time:'10:00',
						timeslot:'10:00-11:00',
						name:'小课班',
						info:'新课程一',
						room:'大教室'
					},
					{
						day:'06-02',
						time:'11:00',
						timeslot:'11:00-12:00',
						name:'小课班',
						info:'新课程一',
						room:'大教室'
					},
					{
						day:'06-02',
						time:'14:00',
						timeslot:'14:00-15:00',
						name:'小课班',
						info:'新课程一',
						room:'大教室'
					},
					{
						day:'06-02',
						time:'16:00',
						timeslot:'16:00-17:00',
						name:'小课班',
						info:'新课程一',
						room:'大教室'
					},
					{
						day:'06-02',
						time:'18:00',
						timeslot:'18:00-19:00',
						name:'小课班',
						info:'新课程一',
						room:'大教室'
					},
					{
						day:'06-03',
						time:'14:00',
						timeslot:'14:00-15:00',
						name:'小课班',
						info:'新课程一',
						room:'大教室'
					},
					{
						day:'06-04',
						time:'10:00',
						timeslot:'10:00-11:00',
						name:'小课班',
						info:'新课程一',
						room:'大教室'
					},
					{
						day:'06-05',
						time:'14:00',
						timeslot:'14:00-13:00',
						name:'小课班',
						info:'新课程一',
						room:'大教室'
					}
				],
				
				
			};
		},
		onLoad(option) {
			// 课程表类型
			if(option.type){
				this.type=option.type;
			}
			if(option.name){
				this.name=option.name;
			}
			
			if(option.id&&option.id!=='undefined'){
				this.id=option.id;
				// this.loadinfo();
			}
			else{
				// uni.showModal({
				// 	title: '提示',
				// 	content: '当前信息不存在..',
				// 	cancelText: '取消',
				// 	confirmText: '确定',
				// 	success: ress => {
				// 		// 返回
				// 		uni.navigateBack({
				// 			delta: 1
				// 		});
				// 	}
				// });
			}
		},
		onReady(){
			if(this.type=='1'){
				uni.setNavigationBarTitle({
				  title: "教练课程表",
				});
			}
			else if(this.type=='2'){
				uni.setNavigationBarTitle({
				  title: this.name+"课程表",
				});
			}
		},
		onShow() {
			this.openId = myCache('openId');
			this.phone = myCache('phone');
			this.userid = myCache('userid');
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},500);
		},
		onPageScroll(e) {
			//调用子组件方法
			this.$refs.topId.topData(e.scrollTop);
		},
		methods: {
			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();
				var params = {
					id: this.id
				};
				try{
					const {data: res1} = await uni.$http.post('/alipay/productById',params);
					// console.log(res1);
					if (res1) {
						if(res1.state!==1){
							uni.showModal({
								title: '提示',
								content: '当前信息获取异常，请返回..',
								cancelText: '取消',
								confirmText: '确定',
								success: ress => {
									// 返回
									uni.navigateBack({
										delta: 1
									});
								}
							});
							return false;
						}
						this.productall=res1;
						this.teacherName=res1.name;
						this.sex=res1.sex;
						this.html=res1.content;
						this.$forceUpdate();
					}
					else{
						uni.showModal({
							title: '提示',
							content: '当前信息不存在..',
							cancelText: '取消',
							confirmText: '确定',
							success: ress => {
								// 返回
								uni.navigateBack({
									delta: 1
								});
							}
						});
					}
				}
				catch(e){
					console.log(e)
				}
			},
			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;
		min-height: 100vh;
	}
	.courcon{
		display: flex;
		position: relative;
		min-height: 100vh;
		overflow: auto;
		.leftfix{
			position: absolute;
			left: 0;
			top:0;
			width: 120rpx;
			display: flex;
			flex-direction: column;
		}
		.leftcon{
			margin-top: 120rpx;
		}
		.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: 180rpx;
			border-bottom: 1rpx dotted #ccc;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ffffff;
		}
		.rightcon{
			margin-left: 120rpx;
			width: auto;
			overflow-x: auto;
			overflow-y: hidden;
			display: flex;
			flex-direction: column;
			flex: 1;
		}
		.courheadr{
			border-radius: 8rpx;
			background-color: #ffffff;
			display: flex;
			flex: 1;
			flex-direction: row;
			height: 120rpx;
			align-items: flex-start;
		}
		.chcell{
			display: flex;
			flex-direction: column;
			flex-shrink: 0;
			width: 240rpx;
			height: 120rpx;
			justify-content: center;
			align-items: center;
			background-color: #fff;
		}
		.courcellr{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
		}
		.courow{
			display: flex;
			flex-direction: row;
			height: 180rpx;
			align-items: flex-start;
			border-bottom: 1rpx dotted #ccc;
		}
		.coucell{
			display: flex;
			flex-direction: column;
			width: 240rpx;
			height: 177rpx;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
		}
		.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;
		}
	}
	.bbtn{
		margin: 20rpx 30rpx 54rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FCFCFD;
		width: 314rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: #89965f;
		box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
		border-radius: 10rpx;
		opacity: 1;
		&::after{
			border:none;
		}
	}
	
</style>
