<template>
	<view class="page-fitness">
		<uni-nav-bar :fixed="true" height="200rpx" color="#FFF"  left-icon="home" backgroundColor="rgb(0,0,0,0)"  :border="false" @clickLeft="onHome"/>
		
		<view class="swiper-item">
		<swiper >
			<swiper-item v-for="(item ,index) in bannerList" :key="index"  style="width:100%;">
				<view class="swiper-img"  style="width:100%;">
					<image :src="item.imageUrl" style=" width:100%;"></image>
				</view>
			</swiper-item>
		</swiper>
		</view>
		
		
		<view class="teacher">
			<view class="title">明星教练</view>
			<view class="list">
				<view class="left">
					<block v-for="(it,index) in teacherList"> 
						<view class="header" @click="onViewTeacher(it)">
							<image :src="it.headerImg" class="img"></image>
						</view> 
					</block> 
				</view>
				<view class="right">
					<uni-icons type="right" size="24"></uni-icons> 
				</view>
			</view>
		</view>
		
		<view class="section1">
			<view class="title">
				<view class="txt">团课课表</view>
				<view class="more" @click="onViewHome()">健身特权卡售卖中，查看详情</view>
			</view> 
			<view class="time-bg">
				
				<PlanDate @onSetDate="onSetDate"></PlanDate>
			</view>
			
			<!-- 
			<view class="selection">
				<uni-data-select :localdata="courseSectionList" :clear="false"  style="margin-right:10px;"></uni-data-select>
				<uni-data-select :localdata="areaSectionList" :clear="false" style="margin-right:10px;"></uni-data-select>
				<uni-data-select :localdata="sortSectionList" :clear="false"  style="margin-right:10px;"></uni-data-select> 
			</view>
			
			 -->
			
			<view class="sections-tab">
				<template v-for="(it,index) in tabQuery">
					<view class="item" :class="index==tabIndex?'active':''"  @click="onChangeTab(index)">{{it.name}}</view>
				</template> 
			</view>
		 
			<view class="teacher-list">
				<block v-if="tabQuery[tabIndex].dataList.length>0">
				
					<block v-for="(it,index) in tabQuery[tabIndex].dataList">
						<CourseItem :info="it" @onStart="onStartCourse"></CourseItem> 
					</block> 
				</block>
				
				<block v-else> 
					<view class="empty-course">没有课程信息</view>
				</block>
				
				
			</view>
		</view>
		
		<page-btm-bar :active="1" />
	</view>
	
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	const app = getApp();
	let hideLoading = true;
	import CourseItem from "@/components/CourseItem/CourseItem.vue"
	import PlanDate from '@/components/PlanDate/PlanDate.vue'
	
	export default {
		components:{
			CourseItem,
			PlanDate
		},
		data() {
			return {
				teacherList:[],//教练列表
				bannerList:[],
				tabIndex:0,
				tabQuery:[
					{
						name:'私教课',
						queryForm:{
							page:0,
							type:1,
							pageSize:10,
							startTime:'',
							endTime:'',
						},
						dataList:[],
					},
					{
						name:'团课',
						queryForm:{
							page:0,
							type:2,
							pageSize:10,
							startTime:'',
							endTime:'',
						},						
						dataList:[],
					}
				],
				storeInfo:null,
			 
				 
				courseSectionList:[
					{
						value:'',
						text:'全部课程 '
					}
				],
				sortSectionList:[
					{
						value:'',
						text:'距离优先'
					}
				],
				areaSectionList:[
					{
						value:'',
						text:'所有区域'
					}
				]
			};
		},
		computed: {
			...mapState(['store_id','systemInfo'])
		},
		onShow(){
			this.initBanner();
			this.initTeacherList();
			
			this.tabIndex=0;
			this.tabQuery[0].queryForm.page=0;
			this.onSearchCourse();
			
			 		 
		},
		methods:{
			
			onChangeTab(e){
				let _this=this;
				_this.tabIndex=e;
				_this.tabQuery[e].queryForm.page=0;
				_this.onSearchCourse();
			},
			
			onViewTeacher(e){ 
				uni.navigateTo({
					url:'/pages/fitness/teacher/teacher?id='+e.id,
				})
			},
			
			onViewHome(e){
			  // 设置全局数据
			  getApp().globalData.runMethod = true;
			
			  // 切换 tab
			  uni.switchTab({
			    url:'/pages/home/home',
			  });
			},
			
			
			initBanner(){
				let _this=this;
				this.$http.request('banner/search', {
					page:1,
					pageSize:10,
					type:3,
				}, "", "", hideLoading).then(res => {
					_this.bannerList=res.data.dataList;
				}).catch(err => {})
			},
			
			initTeacherList(){
				let _this=this;
				this.$http.request('course/teacherList ', { 
					page:0,
					pageSize:4
				}, "", "", hideLoading).then(res => { 
					_this.teacherList=res.data.dataList;  
				}).catch(err => {})
			}, 
			
			onSetDate(e){
				let _this=this;
				_this.tabQuery[_this.tabIndex].queryForm.startTime=e+" 00:00:00";
				_this.tabQuery[_this.tabIndex].queryForm.endTime=e+" 23:00:00";
				_this.tabQuery[_this.tabIndex].queryForm.page=0;
				_this.onSearchCourse();			
			},
			
			onSearchCourse(){
				let _this=this;
				if(_this.tabQuery[_this.tabIndex].queryForm.page<1){
					_this.tabQuery[_this.tabIndex].dataList=[];
				}
				_this.tabQuery[_this.tabIndex].queryForm.page++; 
				
				this.$http.request('course/searchCourse', _this.tabQuery[_this.tabIndex].queryForm, "", "", hideLoading).then(res => {
					_this.tabQuery[_this.tabIndex].dataList=res.data.dataList; 
				}).catch(err => {})
			},
			
		 
			
			onHome(e){
				uni.switchTab({
					url:'/pages/home/home'
				})
			},
			
			initStoreInfo(){
				 let _this=this;
				 this.$http.request('xcx/system', {
				 	store_id: this.store_id, 
				 }, "", "", hideLoading).then(res => {
				 	_this.storeInfo=res.data;
				 }).catch(err => {})
			},
			
			//开始课程
			onStartCourse(e){ 
				uni.navigateTo({
					url:"/pages/fitness/Course/Course?id="+e
				}) 
			}, 
			
		}
	}
</script>

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