<template>
	<view class="appointmentList">
		<u-empty v-if="g.length == 0" text="暂无相关数据" mode="list"></u-empty>
		<view class="listbox" v-if="g.length > 0"  v-for="(x, i) in g" :key="i" >
			<div class="title">
				{{x.StudentNumTypeStr}}
			</div>
			<view class="itemlist">
				<view class="items" v-for="(item, index) in x.ClassList" :key="index" @click="goappointment(item)">
					<div >{{item.ClassName}}<text>{{item.IsFree==1?'（免）':''}}</text></div>
					<div style="font-size: 12px;color: #999999;margin-top: 10px;">{{item.Title}}</div>
					<image :src="item.ClassPic" style="width: 63%;height: 53%;position: absolute;right: 0;bottom: 0;border-bottom-right-radius: 6px;" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 100px;"></view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		<tabbars></tabbars>
	</view>
</template>

<script>
	import tabbars from '@/components/tabbar/index';
	import auth from '@/components/auth/index.vue';
	export default{
		components: {
			tabbars,
			auth
		},
		data(){
			return{
				pageTitle:'约课',
				mainColor: '',
				secondary: '',
				showAuth: false,
				u:{},
				g:[],
			}
		},
		onLoad() {
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
			  this.u = {
				nickName: "未登录",
				avatarUrl: ""
			  };
			  this.showAuth = true;
			}else{
				this.getPointCourseClassList()
			}
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync("basedata")
			  ? wx.getStorageSync("basedata").bar_title
			  : [];
			pages.forEach((x) => {
			  if (x.value == u) {
			    this.pageTitle = x.new_name ? x.new_name : x.name;
			  }
			});
			uni.setNavigationBarTitle({
			  title: this.pageTitle,
			});
			
			
			
		},
		methods:{
			getPointCourseClassList(){
				this.request2({
						url: '/api/AppletPoint/GetPointCourseClassList',
						data: {}
					},
					res => {
						
						this.g = res.data
					}
				);
			},
			reloadUserinfo() {
				this.getPointCourseClassList();
				
				
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
			goappointment(item){
				uni.navigateTo({
					url: '/pages/appointment/appointment?CourseClassId='+item.ID
				});
			}
		
		}
	}
</script>

<style>
	.appointmentList{
		width: 100%;
		height: 100vh;
		background: #FFF;
	}
	.appointmentList .listbox{
		
	}
	.appointmentList .title{
		font-size: 17px;
		color: #1B1D1E;
		padding: 0px 15px 10px;
	}
	.appointmentList .itemlist{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.appointmentList .items{
		width: 44%;
		height: 210px;
		box-shadow:0 0px 10px 6px #F2F2F2;
		margin-left: 4%;
		margin-bottom: 15px;
		border-radius: 6px;
		padding: 15px;
		position: relative;
		font-size: 14px;
		color: #1B1D1E;
	}
	

</style>
