<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;
		border-bottom: 1px solid #E2E2E2;
	}
	.appointment .item-top-o{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 15px;
		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;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
	.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' @selected-change="datechange" @getweekMode = 'getweekMode'></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.OrderBy && current==1'></u-icon>
						<u-icon name="success" :color="mainColor" size="30" v-if='item.ID==msg.CarBrandId && 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'>
					<view style="padding: 0 15px;"  @touchstart="getscroll">
						<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.time}}</text>
									<view class="item-top-o-r" :style="{'background':mainColor}">
										{{item.CourseClassName}}
										<view class="item-top-san"></view>
									</view>
								</view>
								<view class="item-top-t">
									<u-avatar :src="item.photo" size='80' mode="circle"></u-avatar>
									<view class="item-top-t-r">
										<view class="chaochu1" style="font-weight: bold;">{{item.kecheng}}</view>
										<view class="chaochu1" style="font-size: 12px;color: #666666;">{{item.teacher}}</view>
									</view>
								</view>
							</view>
							<view class="item-b">
								<view class="yuyue">预约</view>
								<view class="yuyue" style="background: #FFFFFF;color: #40766E;border: 1px solid #40766E;">取消预约</view>
								<view class="yuyue">去上课</view>
							</view>
						</view>
					</view>
					
					<view style="width: 100%;height: 100%;background: #000000;opacity: 0.4;position: absolute;left: 0;top: 0;" v-if="screenshow==true" @touchstart="screenshow=false" ></view>
				</scroll-view>
				
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
import zzxCalendar from './components/zzx-calendar/zzx-calendar.vue'
	export default{
		components:{
			 zzxCalendar,
		},
		
		data(){
			return{
				pageTitle:'约课',
				mainColor: "",
				secondary: '',
				list: [{
					name: '综合排序'
				}, {
					name: '课程'
				},{
					name: '老师'
				}],
				current: 0,
				screenshow:false,
				screenList:[],
				contents:[
					{'ID': 0, Name: '体验课'},
					{'ID': 1, Name: '一对一'},
				],
				contents2:[
					{'ID': 0, Name: '李老师'},
					{'ID': 1, Name: '林老师'},
				],
				subscribeList:[
					{kecheng:'日语年月日正确表达',teacher:'张小碗儿',CourseClassName:'一对一',time:'20:30',photo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1609315660000_6.png'},
					{kecheng:'日语年月日正确表2达',teacher:'小林子',CourseClassName:'体验课',time:'20:30',photo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1609315660000_6.png'},
					{kecheng:'日语年月日正确表2达',teacher:'小林子',CourseClassName:'体验课',time:'20:30',photo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1609315660000_6.png'},
					{kecheng:'日语年月日正确表2达',teacher:'小林子',CourseClassName:'体验课',time:'20:30',photo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1609315660000_6.png'},
					{kecheng:'日语年月日正确表2达',teacher:'小林子',CourseClassName:'体验课',time:'20:30',photo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1609315660000_6.png'},
					{kecheng:'日语年月日正确表2达',teacher:'小林子',CourseClassName:'体验课',time:'20:30',photo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1609315660000_6.png'},
					{kecheng:'厉害',teacher:'小林子',CourseClassName:'体验课',time:'20:30',photo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1609315660000_6.png'},
				],
				weekMode:true
				
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
		},
	
		methods:{
			datechange(e){
				console.log(e)
				
			},
			getweekMode(e){
				
				this.weekMode = e
			},
			
			getscroll: function() {//一直在调用 空了处理
				let that = this
				if(that.weekMode == false){
					that.$refs.zzx.changeMode()
					that.weekMode=true
				}
				
			},
			onItemSelect(){
				this.screenshow = false;
			},
			change(val){
				if (val == 0) {
					this.screenshow = false
				
				} 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
			}
		}
	}
</script>


