<template>
	<view class="page-teacher" v-if="teacherInfo">
		<uni-nav-bar height="200rpx" :fixed="true" title="教练介绍" color="#FFF"   left-icon="left" backgroundColor="rgb(0,0,0,0)" :border="false" @clickLeft="onBack"/>
		 <view class="section0">
			 <view class="teach-banner"><image :src="teacherInfo.fmImg" style="width:100%;height: 100%;" mode="scaleToFill"></view>
			 </image>
			 
		 </view>
		 
		 <view class="section1">
			 <view class="name">
				 <view class="text">
					 {{teacherInfo.name}}
				 </view>
				
			 </view>
			 <view class="intro" > 
			 <rich-text :nodes="teacherInfo.intro"></rich-text> 
			 </view> 			 
		 </view>
		 
		<!-- <view class="section2" v-if="teacherInfo.verifyBook.length>0">
			 <view class="title">专业认证</view>
			 <view class="zs">
				 <block v-for="(it,index) in teacherInfo.verifyBook">
					 <view class="image">
						<image :src="it" class="img"></image>
					 </view>
				 </block>
			 </view> 
		 </view> -->
		 
	 
	 
		 <view class="section3" v-if="teacherCourseList.length>0">
			 <view class="title" >TA的私教课</view>
			 
			 <view class="list">
				 <block v-for="(it,index) in teacherCourseList">
					 <TeacherCourse :info="it" @onViewReserve="onViewReserve"></TeacherCourse> 
				 </block> 
			 </view>
		 </view>
		 
		 
		 <view class="section4">
		 	<view class="title">
		 		<view class="txt">私教课课表</view>
		 		<view class="more"  @click="onViewFitness">查看其他课程</view>
		 	</view>
		 	<view class="course-date">
				<PlanDate @onSetDate="onSetDate"></PlanDate>
			</view>
		 	 
		 	
		 	<!-- <view class="selection">
				<uni-data-select
					v-model="area"
					:localdata="dataRange"
					@change="onChangeArea"
					:clear="false"
					style="margin-right: 10px;"
				></uni-data-select>
				<uni-data-select
					v-model="sort"
					:localdata="sortRange"
					@change="onChangeSort" 
					:clear="false"
					style="margin-right: 10px;"
				></uni-data-select>
		 		<uni-data-select style="margin-right: 10px;"></uni-data-select> 
		 	</view> -->
		 	<view class="address">
		 		<!-- {{storeInfo.address}} -->
		 	</view>
		 	<view class="teacher-list">
				
		 		<block v-for="(it,index) in courseList">
		 			<CourseItem :info="it" @onStart="onStartCourse"></CourseItem> 
		 		</block>
		 		 
		 	</view>
		 </view>
		 
		 
		 
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	const app = getApp();
	let hideLoading = true;
	import TeacherCourse from '@/components/TeacherCourse/TeacherCourse.vue'
	import CourseItem from "@/components/CourseItem/CourseItem.vue"
	import PlanDate from '@/components/PlanDate/PlanDate.vue'
	export default {
		components:{
			TeacherCourse,
			CourseItem,
			PlanDate
		},
		data() {
			return {
				 teacherId:0,
				 teacherInfo:null,
				 teacherCourseList:[],
				 storeInfo:null,
				 courseList:[],
				 sort:'',
				 area:'',
				 dataRange:[
				 	{
				 		value:'',
				 		text:'所在区域',
				 	},
				 ],
				 sortRange:[
				 	{
				 		value:'1',
				 		text:'距离最近',
				 	} 
				 ],
				 queryForm:{
					 page:0,
					 pageSize:10,
					 teacherId:0,
				 }
			};
		},
		computed: {
			...mapState(['store_id','systemInfo'])
		},
		onLoad(options){
			this.teacherId=options.id||0;
			this.queryForm.teacherId=this.teacherId;
			this.initTeacherInfo(); 
			this.onSearchCourse();
		},
		methods:{
			
			
			onChangeSort(e){
				
			},
			onChangeArea(e){
				
			},
			
			onViewReserve(e){
				uni.navigateTo({
					url:'/pages/fitness/Reserve/Reserve?teacherId='+this.teacherId+"&courseId="+e,
				}) 
			},
			onViewFitness(e){
				uni.switchTab({
					url:'/pages/fitness/index/index',
				})
			},
			onBack(e){
				uni.navigateBack(-1);
			},
			onSetDate(e){
				let _this=this;
				_this.queryForm.startTime=e+" 00:00:00";
				_this.queryForm.endTime=e+" 23:00:00";
				_this.queryForm.page=0;
				_this.onSearchCourse();	
			},
			
			//开始课程
			onStartCourse(e){ 
				uni.navigateTo({
					url:"/pages/fitness/Course/Course?id="+e
				}) 
			},
				
			onSearchCourse(){
				let _this=this;
				if(_this.queryForm.page<1){
					_this.courseList=[];
				}
				_this.queryForm.page++; 
				this.$http.request('course/searchCourse', _this.queryForm, "", "", hideLoading).then(res => {
					_this.courseList=res.data.dataList; 
				}).catch(err => {})
			},
		
			
			//搜索教练课程
			searchTeacherCourseList(){
				// let _this=this;
				// this.$http.request('fitness/courseList', {
				// 	store_id:_this.store_id,
				// 	coach_id:_this.teacherId
				// }, "", "", hideLoading).then(res => {
				// 	_this.teacherCourseList=res.data.list;
				// 	_this.storeInfo=res.data.store;
				// }).catch(err => {})
			},
			
			//初始化教练信息
			initTeacherInfo(){
				let _this=this;
				this.$http.request('course/teacher', {
					 id:_this.teacherId
				}, "", "", hideLoading).then(res => {
					_this.teacherInfo=res.data.info; 
					_this.teacherCourseList=res.data.courseList;
				}).catch(err => {})
			},
			
		}
	}
</script>

<style lang="scss">
@import "./teacher.scss";
</style>
