<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar :title="pageTitle"><view class="curseSet" slot="right" @click="shuomingPage('/pages/course/illustrate',tagId,pid)"><uni-icons type="info" size="24"></uni-icons> 课程说明</view></z-nav-bar>
		<view class="tabsBox" :class="[fixed ? 'fixed' : '' ]">
			<u-tabs v-if="tabList.length > 0" :class="['tabList']" @click="fatherClick" :current="curTagId"
				:activeStyle="activeStyle" :scrollable="scrollable" :list="tabList"
				itemStyle="padding-left: 15px; background-color:#fff;  padding-right: 15px; height: 50px;"></u-tabs>
		</view>
		<view class="containerBg">
			<view class="subCate flex" v-if="subList.length> 0">
				<text :class="['item',subTabId == item.id ? 'active' : '']" v-for="(item, index) in subList"
					@click="curseClick(item)" :key="index">{{item.title}}</text>
			</view>
			<view class="learnBox box">
				<!-- <view class="learn flexbox shiting">
					<view class="item" v-for="(item, index) in courseList" :key="index">
						<view class="imgcontainer">
							<image :src="item.image" mode="aspectFit"></image>
						</view>
						<view class="buyItems flexbox">
							<view class="txt555">
								{{item.title}}
							</view>
						</view>

					</view>
				</view> -->
				<view class="newBox">
					<view class="item flexbox" v-for="(item, index) in courseList" :key="index" @click="onPageJump('/pages/course/courseDetail',item.id)">
						<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
						<view class="imgcontainer">
							<image :src="item.image" mode="aspectFit"></image>
						</view>
						<view class="buyItems">
							<view class="txt555">
								{{item.title}}
							</view>
							<view class="jianjie" v-html="item.content">

							</view>
							<view class="tag-view">
								<uni-tag v-if="item.level != 0" style="margin-right: 10rpx;" :text="item.level == 1 ? '初级':'高级'" type="primary" size="small" />
								<uni-tag v-if="item.selective != 0 && item.selective == 1" style="margin-right: 10rpx;" text="必修" size="small" type="error" />
								<uni-tag v-if="item.selective != 0 && item.selective == 2" style="margin-right: 10rpx;" text="选修" size="small" type="success" />
							</view>
							<view class="btn_box">
								<text>了解课程</text>
							</view>
						</view>
						
					</view>
				</view>
				<u-divider v-show="status == 2" text="已加载全部"></u-divider>
				<u-divider v-show="status == 3" text="暂无数据"></u-divider>
				<u-divider v-show="status == 1" text="加载中..."></u-divider>
			</view>
			<view>
				<!-- <u-back-top scroll-top="100"></u-back-top> -->
				<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
					:iconStyle="iconStyle"></u-back-top>
			</view>
			<public-module></public-module>
			<z-navigation></z-navigation>
			<music-play :playData="playData"></music-play>
		</view>
	</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,
				pid:null,
				fixed: false,
				fatherTabId: null,
				subTabId: null, //
				bgiStyle: {
					background: '#fff'
				},
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: 'bold',
					color: '#258feb',
				},
				scrollTop: 0,
				activeStyle: {
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.2)',
					// backgroundColor: '#258feb'

				},
				subList: [],
				scrollable: false,
				pageTitle: '',
				tabList: [],
				curTagId: 0,
				courseList: [],
				status: 3, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据
				page: 1,
				flag: true, // 函数是否执行完
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.tagId = e.id
			this.pageTitle = e.title
			this.pid = e.pid
			console.log(e, '传入分类id')
			this.getCateList(this.tagId)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (this.scrollTop > 500) {
				this.fixed = true
			} else {
				this.fixed = false
			}
			// console.log(this.scrollTop,'this.scrollTop')
		},
		onReachBottom() {
			if (this.status != 2) {
				this.page++
				this.getData(this.subTabId)
			}
			console.log('触底加载', this.page)
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();


		},
		components: {
			musicPlay
		},
		//方法
		methods: {
			surl(imageurl) {
				return `url(${imageurl})`
			},
			getCateList(id) {
				$http.request({
						url: "medical/home/getChildCourseMedicalTree",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"id": id,
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.labels.length > 0) {
								var list = []
								res.labels.forEach(item => {
									item.name = item.title
								})
								this.tabList = res.labels
								// this.fatherTabId = this.tabList[0].id
								if (this.tabList[0].isLast == 1) { // 终极
									this.subList = []
									this.subTabId = this.tabList[0].id
								} else { //非终极
									if (this.tabList[0].children.length > 0) {
										this.subList = this.tabList[0].children
										this.subTabId = this.subList[0].id

									} else {
										this.subList = []
										this.subTabId = null
									}
								}
								if (this.subTabId) {
									// console.log(this.subTabId, this.subList[0].title, '初始进入')
									this.courseList = []
									this.status = 1
									this.getData(this.subTabId)
								}


							}else{
								this.subList = []
								this.subTabId = id
								this.getData(id)
							}
							console.log(this.curTagId, '当前高亮')
						}
					}).catch(e => {
						console.log(e, '获取子分类报错')
					});
			},
			fatherClick(e) {
				// console.log(e, '点击')
				this.page = 1
				var item = e
				if (item.isLast == 1) { // 终极
					this.subList = []
					this.subTabId = item.id
				} else {
					if (item.children.length > 0) { // 非终极
						this.subList = item.children
						this.subTabId = item.children[0].id
					} else {
						this.subList = []
						this.subTabId = null
					}
				}
				if (this.subTabId) {
					this.status = 1
					this.courseList = []
					this.getData(this.subTabId);
				}

			},
			curseClick(item) {
				this.subTabId = item.id
				this.courseList = []
				this.page = 1
				this.getData(this.subTabId);
			},
			getData(id) {
				if (!this.flag) {
					console.log('正在执行，未完成')
					return
				}
				this.status = 1
				this.flag = false
				$http.request({
						url: "medical/home/getMedicalCourseList",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"id": id,
							"limit": 12,
							"page": this.page
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.courses.records.length > 0) {
								var list = res.courses.records
								this.courseList = this.courseList.concat(list)
								if (res.courses.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, '数据报错')
					});
			},
			// 跳转
			onPageJump(url,id) {
				uni.navigateTo({
					url: `${url}?id=${id}`
				});
			},
			
			shuomingPage(url,id,pid){
				uni.navigateTo({
					url: `${url}?id=${id}&pid=${pid}`
				});
			}
		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.containerBg {
		background-color: $containerColor;
		padding: 0 20rpx;

	}
	.curseSet{margin-right: 20rpx; font-size: 28rpx; display: flex; align-items: center;}
	.fixed {
		position: fixed;
		z-index: 1; width: 100%; background-color: #fff;
	}

	.newBox {

		.item {
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			@include ptop_bottm(10px);
			@include pleft_right(10px);

			@include mshadow(10px, 1) .imgcontainer {
				display: block;
				width: 110rpx;
				margin-right: 20rpx;
				// background-size: cover;
				// background-position: center;
				height: 200rpx;
				flex-grow: 1;
				// @include ptop_bottm(10px);
				overflow: hidden;

				// @include pleft_right(10px);
				image {
					width: 100%;
					height: 200rpx;
				}
			}
			.btn_box{ text-align: right;
				text{
					border-radius: 20rpx;
					padding: 3px 5px;  @include theme("btn_bg");
					font-size: 28rpx; color: #fff;
				}
			}
			.buyItems {
				width: 60%;
			}

			.jianjie {
				margin-top: 10rpx;
				font-size: 24rpx;
				@include bov();
				color: #9c9c9c;
			}

			.txt555 {
				font-size: 30rpx;
				color: #000;
				@include bov()
			}
		}
	}

	.subCate {
		margin-top: 10px;
		margin-bottom: 5px;

		.item {
			font-size: 26rpx;
			background-color: #fff;
			border-radius: 10px;
			color: #333;
			margin-right: 30rpx;
			padding: 10rpx 12rpx;
		}

		.item:last-child() {
			margin-right: 0;
		}

		.item.active {
			background-color: $themeColor;
			color: #fff;
		}
	}

	.tabList {
		text-align: center;
	}

	.flexbox {
		display: flex;
	}

	.imgcontainer {
		background-color: $imgBg;
	}

	.box {
		// background-color: #fff;		
		min-height: calc(100vh - 270rpx);
	}

	.learnBox {
		// background-color: #fff;
		margin-top: 10px;

		.learn {
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 20rpx;

			.item {
				width: 48%;
				margin-bottom: 16px;

				overflow: hidden;

				image {
					width: 100%;
					height: 200rpx;
				}

				.txt555 {
					display: block;
					text-align: center;
					height: 40rpx;
					width: 100%;
					line-height: 40rpx;
					@include bov(1);
					margin-top: 10rpx;
					font-size: 24rpx;

				}

			}
		}
	}
</style>