<template>
	<view class="page-course"  v-if="courseInfo">
		<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="image">
				 <image :src="courseInfo.imgUrl" class="img"/>
			</view>
		</view>
		<view class="section1">
			<view class="title">
				 <view class="text">
					 <view class="name">{{courseInfo.name}}</view>
					 <view class="tags" style="font-size: 12px;">{{courseInfo.tips}}</view>
				 </view>
				
			</view>
		</view>
		
		
		<view class="section2"> 
			<block v-for="(it,index) in teacherList">
				<TeacherSection :info="it" @onViewTeacher="onViewTeacher" @onViewReserve="onViewReserve"></TeacherSection>
			</block> 
		</view>
		
		<view class="section3">
			<CourseAddress  :course="courseInfo"></CourseAddress>
		</view>
		
		<view class="section4">
			<CourseSkill :course="courseInfo" ></CourseSkill>
		</view>
		
		<view class="section5">
			<view class="cate">
				<view class="name">课程介绍</view>
				<view class="name">约课介绍</view>
				<view class="name">注意事项</view>
			</view>
			<view class="intro">
				<view class="title">课程介绍</view>
				<view class="text" >
					<rich-text :nodes="courseInfo.intro"></rich-text> 
				</view>
			</view>
			
			<view class="intro">
				<view class="title">约课介绍</view>
				<view class="text" >
				 <rich-text :nodes="courseInfo.guid"></rich-text> 
				</view>
			</view>
			
			<view class="intro">
				<view class="title">注意事项</view>
				<view class="text" >
				 <rich-text :nodes="courseInfo.attach"></rich-text> 
				</view>
			</view>
		</view>
		
		<view class="footer">
			<view class="left">
				<view class="price">
					<view class="sign">￥</view>
					<view class="text">{{courseInfo.singlePrice}}</view>
				</view>
			</view>
			<view class="right"> <button open-type="share" class="share">分享</button> 
				<view class="yy" @click="onOpenYYForm">立即预约</view>
			</view>
		</view>
		
		
		<uni-popup ref="yyForm">
			<view class="yy-form">
				<view class="yy-title"><text class="txt">选择教练</text></view>
				<view class="yy-list">
					<block v-for="(it,index) in teacherList">
						<TeacherSection :info="it" @onViewTeacher="onViewTeacher" @onViewReserve="onViewReserve"></TeacherSection>
					</block> 
				</view>
				
			</view>
		</uni-popup>
		
				
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	const app = getApp();
	let hideLoading = true;
	import TeacherSection from '@/components/TeacherSection/TeacherSection.vue'
	import CourseAddress from '@/components/CourseAddress/CourseAddress.vue'
	import CourseSkill from '@/components/CourseSkill/CourseSkill.vue'
 	export default {
		components:{
			TeacherSection,
			CourseAddress,
			CourseSkill 
		},
		data() {
			return {
				courseInfo:null,
				courseId:0,
				teacherList:[],
				planList:[],
			};
		},
		computed: {
			...mapState(['store_id','systemInfo'])
		},
		onLoad(option){
			this.courseId=option.id||0;
			
			if(this.courseId>0){
				this.initCourseInfo();
			}
		},
		methods:{
			
			
			
			onBack(e){
				uni.navigateBack(-1);
			},
			
			onOpenYYForm(e){
				let _this=this;
				_this.$refs.yyForm.open("bottom")
			}, 
			
			onViewReserve(e){ 
				uni.navigateTo({
					url:'/pages/fitness/Reserve/Reserve?teacherId='+e+"&courseId="+this.courseId,
				}) 
			},
			
			onViewTeacher(e){
				uni.navigateTo({
					url:'/pages/fitness/teacher/teacher?id='+e,
				})
			},
			
			initCourseInfo(){
				let _this=this; 
				this.$http.request('course/getCourseInfo', {
					 id:_this.courseId
				}, "", "", hideLoading).then(res => {
					_this.courseInfo=res.data.info; 
					_this.teacherList=res.data.teacherList;
				}).catch(err => {})
			},
			
		}
	}
</script>

<style lang="scss">
@import './Course.scss'
</style>
