<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="课程设置"></z-nav-bar>
		
		
		<public-module></public-module>
		<z-navigation></z-navigation>
		<!-- <music-play :playData="playData"></music-play> -->
	</view>
</template>

<script>
	import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},
				tagId: null,				
				
				// status:0, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据
				// page:1,
				// flag:true, // 函数是否执行完
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			// this.tagId = e.id
			// this.pageTitle = e.title
			// console.log(e, '传入分类id')
			this.getData();
		},
		onReachBottom() {
			if(this.status != 2){
			this.page ++
			this.getData()	}		
			console.log('触底加载',this.page)
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			

		},
		components: {
			musicPlay
		},
		//方法
		methods: {
			getData() {
				if(!this.flag){
					console.log('正在执行，未完成')
					return
				}
				this.status = 1
				this.flag = false
				$http.request({
						url: "medical/home/getMarketCourseList",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"id": this.tagId,
							"limit": 12,
							"page": this.page
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.courseList.records.length > 0) {
								var list = res.courseList.records
								this.courseList = this.courseList.concat(list)
								if(res.courseList.pages > this.page){
									this.status = 0
								}else{
									this.status = 2
								}
							} else if(this.page > 1){
								this.status = 2 // 加载完成
								
							}else{
							
								this.status = 3 // 暂无数据
							}
							console.log('status',this.status)
						}
						this.flag = true
					}).catch(e => {
						console.log(e,'数据报错')
					});
			}
		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	.flexbox{display: flex; }
	.imgcontainer {
		background-color: $imgBg;
	}

</style>