<style>
	.appointment{
		width: 100%;
		height: 100vh;
		background: #FFF;
	}
	.appointment-box{
		padding: 0 15px ;
	}
	.appointment .tanchu {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #FFF;
		position: absolute;
		top: 41px;
		left: 0;
		z-index: 1999;
	}
	
	.appointment .tanchu_item {
		width: 94%;
		margin-left: 3%;
		height: 45px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #f1f1f1;
	}
	.appointment .subscribeList{
		width: 100%;
		
		position: relative;
	}
	.appointment .subscribe-item{
		width: 100%;
		box-shadow:0 6px 10px 1px #F2F2F2;
		border-radius: 6px;
		margin-top: 15px;
		padding: 0 15px;
	}
	.appointment .item-top{
		width: 100%;
		padding: 15px 0;
		border-bottom: 1px solid #E2E2E2;
	}
	.appointment .item-top-o{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 11px;
		color: #1B1D1E;
	}
	.appointment .item-top-o-r{
		padding: 0 10px 0 15px;
		font-size: 10px;
		color: #FFFFFF;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 17px;
		margin-right: -15px;
		
	}
	.appointment .item-top-san{
		 width: 0;
		height: 0;
		border-top: 18px solid #FFF;
		border-right: 10px solid transparent;
		position: absolute;
		left: 0;
		top: 0;
	}
	.appointment .item-top-t{
		margin-top: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.appointment .item-top-t-r{
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		height: 40px;
		justify-content: space-between;
		font-size:13px ;
		color: #111111;
	}
	.appointment .chaochu1{
		white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: calc(100vw - 120px);
	}
	.appointment .item-b{
		width: 100%;
		height: 55px;
		padding: 15px 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.appointment .yuyue{
		width: 69px;
		height: 26px;
		border-radius: 4px;
		font-size: 13px;
		color: #FFFFFF;
		background: #40766E;
		margin-left: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
<template>
	<view class="appointment">
		<view class="appointment-box">
			<zzx-calendar ref='zzx' :dotList='dotList' @selected-change="datechange" @getweekMode = 'getweekMode' @days-change='dayschage'></zzx-calendar>
		</view>
		
		<view style="position:relative;">
			<view style=" border-bottom: 1px solid rgba(0, 0, 0, 0.03);">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bar-height='4' :active-color="mainColor"></u-tabs>
			</view>
			<view v-if="screenshow==true" class="tanchu">
				<scroll-view :scroll-y="true" :enable-back-to-top="true" style="max-height: 200px;">
					<view class="tanchu_item" v-for="(item, index) in screenList" :key="index" @click="onItemSelect(item)">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<span>{{item.Name}}</span>
						</view>
						<u-icon name="success" :color="mainColor" size="30" v-if='item.ID==msg.CourseClassId && current==1'></u-icon>
						<u-icon name="success" :color="mainColor" size="30" v-if='item.ID==msg.TeacherId && current==2'></u-icon>
					</view>
				</scroll-view>
			</view>
			<!-- 预约的列表 -->
			
			<view class="subscribeList" style="height: calc(100vh - 190px);width: calc(100vw);overflow: auto;" >
				<scroll-view  :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scroll='getscroll'>
					<u-empty v-if="subscribeList.length == 0" text="暂无相关数据" mode="list" ></u-empty>
					<view style="padding: 0 15px;"  @touchstart="getscroll" v-if="subscribeList.length>0">
						<view class="subscribe-item" v-for="(item,index) in subscribeList" :key='index' :style="{'margin-bottom':subscribeList.length==index+1?'20px':'0'}">
							<view class="item-top">
								<view class="item-top-o">
									<text>{{item.StudyStartDate}}-{{item.StudyEndDate}} {{showteacher==0?'可预约':''}}</text>
									<view class="item-top-o-r" :style="{'background':mainColor}">
										{{item.ClassName}}
										<view class="item-top-san"></view>
									</view>
								</view>
								<view class="item-top-t">
									<u-avatar :src="item.TeacherLogo" size='80' mode="circle"></u-avatar>
									<view class="item-top-t-r">
										<view class="chaochu1" style="font-weight: bold;">{{item.CourseName}}</view>
										<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
											<view  style="font-size: 12px;color: #666666;">{{item.TeacherName}}</view>
											<view style="display: flex;flex-direction: row;align-items: flex-end;color: #DD0000;" v-if="showteacher==0">
												
												<text style='font-size: 16px;'>
													{{item.PointNum}}
												</text>
												<text style='font-size: 12px;'>
													点
												</text>
											</view>
										</view>
										
									</view>
								</view>
							</view>
							<view class="item-b" v-if="showteacher==0">
								<view style="font-size: 11px;color: #1B1D1E;">
									课时时长{{item.StudyDuration}}{{item.DurationUnitName}}(至少约课{{item.MinDuration}}{{item.DurationUnitName}})
								</view>
								<view class="yuyue" v-if="item.IsHaveCourse==0 && item.IsSubscribe==1" @click="goconfirm(item)">预约</view>
								<view class="yuyue" style="background: #FFFFFF;color: #40766E;border: 1px solid #40766E;" v-if="item.IsHaveCourse>0 && item.IsSubscribe==1">已预约</view>
								<view class="yuyue" style="background: rgba(64, 118, 110, 0.5);color: #FFF;" v-if="item.IsHaveCourse==0 && item.IsSubscribe==0">预约</view>
								<view class="yuyue" style="background: rgba(64, 118, 110, 0.5);color: #FFF;" v-if="item.IsHaveCourse==1 && item.IsSubscribe==0">已学习</view>
								
							</view>
							<view class="item-b" v-if="showteacher==1">
								<view v-if="item.OrderList.length==0">
									暂学员报名
								</view>
								<view v-if="item.OrderList.length>0 " style="width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
									<view style="display: flex;flex-direction: row;align-items: center;" >
										<u-avatar :src="x.Photo" size='44' mode="circle" v-for="(x, i) in item.OrderList" :key="i" v-if='i<4'></u-avatar>
									</view>
									<view style="font-size: 12px;color: #999999;" @click="gostudent(item.OrderList)">
										查看更多
									</view>
								</view>
								
							</view>
						</view>
						<view style="width: 100%;height: 100px;"></view>
						<view style="width: 100%;height: 100%;background: #000000;opacity: 0.3;position: absolute;left: 0;top: 0;" v-if="screenshow==true && subscribeList.length > 0" @touchstart="screenshow=false" ></view>
					</view>
				</scroll-view>
				<view style="width: 100%;height: 100%;background: #000000;opacity: 0.3;position: absolute;left: 0;top: 0;" v-if="screenshow==true && subscribeList.length == 0" @touchstart="screenshow=false" ></view>
				
			</view>
			
		</view>
		
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		<tabbars v-if="showtabbars==true"></tabbars>
	</view>
</template>

<script>
import zzxCalendar from './components/zzx-calendar/zzx-calendar.vue'
import auth from '@/components/auth/index.vue';
import {gegerateDates, dateEqual,formatDate} from './components/zzx-calendar/generateDates.js';
import tabbars from '@/components/tabbar/index';
	export default{
		components:{
			 zzxCalendar,
			 auth,
			 tabbars
		},
		
		data(){
			return{
				pageTitle:'约课',
				mainColor: "",
				secondary: '',
				showAuth:false,
				showtabbars:true,
				list: [{
					name: '综合排序'
				}, {
					name: '课程'
				},{
					name: '老师'
				}],
				current: 0,
				screenshow:false,
				screenList:[],
				contents:[],
				contents2:[],
				subscribeList:[],
				weekMode:true,
				msg:{
					SelectStartTime:'',
					SelectEndTime:'',
					CourseClassId:0,
					TeacherId:0,
				},
				showteacher:0,//0为约课 1位老师进去查看自己的约课情况
				totalData:[],
				fullDate:'',
				dotList:[],
				WeekStr:'',
			}
		},
		onLoad(options) {
			console.log(options,'options')
			if(options && options.CourseClassId){
				this.msg.CourseClassId  = options.CourseClassId
				this.current=1
				this.showtabbars=false
			}
			if(options && options.showtabbars){//判断是否显示标题栏
				if(options.showtabbars ==1){
					this.showtabbars=false
				}
			}
			if(options && options.teacher){//判断是否个人老师进入页面
				this.showteacher = options.teacher;
				this.list= [{name: '综合排序'}, {name: '课程'}]
				this.showtabbars=false
				this.pageTitle='排课'
			}
			// this.msg.SelectStartTime =  formatDate(new Date(), 'yyyy-MM-dd'),
			// this.msg.SelectEndTime =  formatDate(new Date(), 'yyyy-MM-dd'),
			this.fullDate=formatDate(new Date(), 'yyyy-MM-dd')
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
			  this.u = {
				nickName: "未登录",
				avatarUrl: ""
			  };
			  this.showAuth = true;
			}else{
				if(this.showteacher==1){
					this.msg.TeacherId = this.u.UserTeacher
					this.init()
				}
				this.getPointCourseClassList()
				this.getTeacherList()
				
				
			}
		},
		created() {
			
		},
	
		methods:{
			
			datechange(e){
				this.fullDate = e.fullDate
				this.totalData.forEach(x=>{
					let time = x.DateYear+'-'+x.DateMonth+'-'+x.DateDay
					if(this.fullDate == time){
						this.subscribeList = x.PlanList
						this.WeekStr = x.WeekStr
					}
				})
			},
			getweekMode(e){
				
				this.weekMode = e
			},
			
			getscroll: function() {
				let that = this
				if(that.weekMode == false){
					that.$refs.zzx.changeMode()
					that.weekMode=true
				}
			},
			onItemSelect(item){
				this.screenshow = false;
				if(this.current==1){
					this.msg.CourseClassId = item.ID;
					this.list[this.current].name = item.Name
				}else if(this.current==2){
					this.msg.TeacherId = item.ID
					this.list[this.current].name = item.Name
				}
				this.init()
			},
			change(val){
				if (val == 0) {
					this.screenshow = false
					if(this.showteacher==0){
						this.list= [{name: '综合排序'}, {name: '课程'},{name: '老师'}]
						this.msg.TeacherId = 0;
					}else{
						this.list= [{name: '综合排序'}, {name: '课程'}]
					}
					
				this.msg.CourseClassId=0;
				
				} else if(val == 1){
					if (val == this.current && this.screenshow == true) {
						this.screenshow = false
					} else {
						this.screenshow = true
					}
					this.screenList = this.contents
				}
				else if(val == 2){
					if (val == this.current && this.screenshow == true) {
						this.screenshow = false
					} else {
						this.screenshow = true
					}
					this.screenList = this.contents2
				}
				
				this.current = val
				this.init()
			},
			getPointCourseClassList(){
				this.request2({
						url: '/api/AppletPoint/GetPointCourseClassList',
						data: {}
					},
					res => {
						this.contents=[]
						res.data.forEach(x=>{
							x.ClassList.forEach(j=>{
								let obj = {
									Name:j.ClassName,
									ID:j.ID
								}
								if(j.ID==this.msg.CourseClassId){ //如果和列表的某个相等 把名字赋值给tabs 
									this.list[1].name =j.ClassName
								}
								this.contents.push(obj)
							})
						})
						
						
						
					}
				);
			},
			getTeacherList(){
				this.request2({
						url: '/api/AppletSchool/GetTeacherList',
						data: {}
					},
					res => {
						this.contents2=res.data
						
					}
				);
			},
			dayschage(obj){
				let start =formatDate(new Date(obj.start), 'yyyy-MM-dd')
				let end =formatDate(new Date(obj.end), 'yyyy-MM-dd')
				this.msg.SelectStartTime = start
				this.msg.SelectEndTime = end
				this.u = uni.getStorageSync("mall_UserInfo");
				if (!this.u) {
				  this.u = {
					nickName: "未登录",
					avatarUrl: ""
				  };
				  this.showAuth = true;
				}else{
					if(this.showteacher==1){
						this.msg.TeacherId = this.u.UserTeacher
					}
					this.init()
				}
			},
			init(){
				
				this.request2({
						url: '/api/AppletPoint/GetTeacherCourseList',
						data: this.msg
					},
					res => {
						// this.subscribeList = res.data[0].PlanList
						this.totalData = res.data
						this.dotList =[]
						this.totalData.forEach(x=>{
							let time = x.DateYear+'-'+x.DateMonth+'-'+x.DateDay
							if(this.fullDate == time){
								this.subscribeList = x.PlanList;
								this.WeekStr = x.WeekStr
							}
							if(x.haveCourseCount>0){
								let obj = {
									date:time
								}
								this.dotList.push(obj)
							}
						})
					}
				);
			},
			reloadUserinfo() {
				this.userinfo();
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
			goconfirm(item){
				
				uni.navigateTo({
					url: '/pages/appointment/confirmAppointment?CourseId='+item.ID
				});
			},
			gostudent(item){//学员列表
				uni.navigateTo({
					url: '/pages/appointment/traineeList?list='+encodeURIComponent(JSON.stringify(item))
				});
			}
		}
	}
</script>


