<template>
	<view>
		<status-container :ifReturn="false" titlet="课程列表">
			<view slot="content" style="margin-top: -20rpx;">
				<view class="posi-sticky" :style="{top:newtop+'px'}">
					<view class="pad-sx26 pad-zy20" style="border-bottom: 2rpx solid #fcede8;">
						<view class="radius40 pad-sx2 disjbac pad-zy20" style="background-color: #fff6f5;border: 2rpx solid #ece6e6;">
							<input v-model="keyword" @confirm="getCourseList" type="text" class="fon24 width100 pad-sx6" placeholder="关键字搜索" placeholder-style="color:#aaa4a3">
							<view class="disjcac pad-sx6 pad-zy10" @tap="getCourseList">
								<image class="flexs" src="/static/tabbar/icon-search.png" mode="" style="width: 28rpx;height: 28rpx;" lazy-load></image>
							</view>
						</view>
					</view>
					<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
				</view>
				<view class="pad-zy20">
					<list ref="refcourse" @goDetail="goDetail"></list>
					<view class="" v-if="noMore">
						<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
					</view>
				</view>
			</view>
		</status-container>
		<!-- 底部tab -->
		<foot-tab current='0'></foot-tab>
	</view>
</template>

<script>
	// 底部组件
	import footTab from '@/components/foot-tabs/foot-tab.vue';
	import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
	import list from '@/components/list.vue';
	import pitera from '@/components/nothing/pitera.vue';
	export default {
		components:{'foot-tab' :footTab,swiperTab,list,pitera},
		data() {
			return {
				newtop:uni.getSystemInfoSync().statusBarHeight + 42,
				// newtop:uni.getSystemInfoSync().statusBarHeight + (140 / 750 * uni.getSystemInfoSync().windowWidth),
				current:0,
				dataList:[],//分类列表
				classId:'',//分类id
				keyword:'',//关键字
				page:1,
				size:10,
				total:0,
				noMore:false,//是否没有更多
			}
		},
		onLoad() {
			// 调用获取分类列表
			this.getCourseCate();
		},
		onReachBottom() {
			if(this.total!=this.$refs.refcourse.list.length){
				this.page++;
				// 调用获取商品产品列表
				this.getCourseList();
			}
		},
		methods: {
			// tab点击事件
			clickTab(index){
				this.current = index;
				this.page = 1;
				this.noMore = false;
				// 设置分类id
				this.classId = this.dataList[index].id;
				// 调用获取商品产品列表
				this.getCourseList();
			},
			// 获取分类列表
			getCourseCate(){
				this.$requst.get('/api/spu/category',{type:'course'}).then(res=>{
					// 设置分类列表
					this.dataList = res.data;
					// 如果分类列表不为空
					if(this.dataList.length){
						// 设置分类id
						this.classId = this.dataList[0].id;
						// 调用获取商品产品列表
						this.getCourseList();
					}
				})
			},
			// 获取商品产品列表
			getCourseList(){
				let params = {
					category_id:this.classId,
					page:this.page,
					size:this.size,
					keyword:this.keyword
				}
				this.$requst.post('/api/spu/course',params).then(res=>{
					if(res.code==0){
						// 设置总数
						this.total = res.data.total;
						if(this.page==1){this.$refs.refcourse.list=[];}
						// 设置产品列表
						this.$refs.refcourse.list = [...this.$refs.refcourse.list,...res.data.list];
						if(this.total==this.$refs.refcourse.list.length && this.page!=1){
							this.noMore = true;
						}
					}
				})
			},
			// 去课程详情
			goDetail(id){
				uni.navigateTo({
					url:`/pagesB/course-detail/course-detail?id=${id}&category_id=${this.classId}`
				})
			},
		}
	}
</script>

<style></style>