<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="我的课程"></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; padding-right: 15px; height: 50px;"></u-tabs>
		</view>
		<view class="containerBg1">
			<view class="search" style="margin-top: 20rpx;">
				<u-search placeholder="请输入课程名"  @clear="clear" v-model="searchValue" 
					 @search="search" @custom="search"></u-search>
			</view>
			
			<uni-section class="mb-10" title="课程列表" type="line">
			  <template v-slot:right>
			    <u-icon name="grid" color="#2979ff" size="28" @click="showDrawer"></u-icon>
			  </template>
			</uni-section>
			<!-- <view class="containerBg"> -->
			<view class="newBox">
				<view class="item flexbox" v-for="(item, index) in MyCourseList.list" :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="warning" />
							<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="MyCourseList.status == 2" text="已加载全部"></u-divider>
			<u-divider v-show="MyCourseList.status == 3" text="暂无数据"></u-divider>
			<u-divider v-show="MyCourseList.status == 1" text="加载中..."></u-divider>
		</view>

		<view>
			<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
				:iconStyle="iconStyle"></u-back-top>
		</view>
		<!-- </view> -->
		<!-- 评论弹出 -->
		<public-module></public-module>
		<tree-list ref="treeList" v-if="treeListVisible" @clickCourseInfo="clickCourseInfo"></tree-list>
		
		<z-navigation></z-navigation>
		<!-- <music-play :playData="playData"></music-play> -->
	</view>
	</view>
</template>

<script>
	// import musicPlay from '@/components/music.vue'
	import treeList from '@/components/tagTree.vue'
	import commentsList from '@/components/commentsList.vue'
	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
	import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				curTagId: 0,
				playData: {},
				searchValue:'',				
				// fixed: false,
				bgiStyle: {
					background: '#fff'
				},
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: 'bold',
					color: '#258feb',
				},
				userMsg: {}, // 用户信息
				scrollTop: 0,
				activeStyle: {
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.2)',
					// backgroundColor: '#258feb'

				},
				scrollable: false,
				pageTitle: null,
				fixed: false,
				medicalId:'',
				tabList: [{
					id: 1,
					name: '我的课程'
				}, {
					id: 2,
					name: '我收藏的'
				}, {
					id: 3,
					name: '已过期'
				}], // 目录列表
				curId: null,
				curIndex: 0,
				treeListVisible:false,
				MyCourseList: {
					list: [],
					status: 88,
					page: 1,
					flag: false
				},
				LearningCourseList: {
					list: [],
					status: 88,
					page: 1,
					flag: false
				},
				ExpiredCourseList: {
					list: [],
					status: 88,
					page: 1,
					flag: false
				}

			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			// this.pageTitle = e.title
			console.log(e, '传入分类id')
			this.getUserInfo()
			// this.fatherClick()
			this.getMyCourseList()
			// this.getLearningCourseList()
			// this.getExpiredCourseList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (this.scrollTop > 500) {
				this.fixed = true
			} else {
				this.fixed = false
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();

		},
		onReachBottom() {
			console.log('触底');
			if (this.curTagId == 0) {
				if(this.MyCourseList.status != 2){
					
				}
			}else if(this.curTagId == 1){
				
			}else if(this.curTagId == 2){
				
			}
		},
		components: {
			// musicPlay
			emotion,
			treeList
			// commentsList

		},
		//方法
		methods: {
			search(res){
				console.log('点了搜索')
			},
			cancel(res){},
			clear(){
				this.searchValue = ''
			},
			clickCourseInfo(val){
				console.log(val,'选择的分类数据');
				if(val && val.id){
					this.medicalId = val.id
				}
			},
			fatherClick(e) {
				console.log(e,'tabitem')
			},
			showDrawer(){
				this.treeListVisible = true
				this.$nextTick( ()=> {
					this.$refs['treeList'].getData()
				})
				
			},
			getMyCourseList() {
				this.MyCourseList.status = 1
				if (this.MyCourseList.flag) {
					console.log('正在执行，未完成')
					return
				}
				this.MyCourseList.flag = false
				$http.request({
						url: "medical/course/getUserCourseBuy",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"limit": 10,
							"title": this.searchValue,
							"medicalId": this.medicalId,
							"page": this.MyCourseList.page
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.courseList.records.length > 0) {
								var list = res.courseList.records
								this.MyCourseList.list = this.MyCourseList.list.concat(list)
								if (res.courseList.pages > this.MyCourseList.page) {
									this.MyCourseList.status = 0
								} else {
									this.MyCourseList.status = 2
								}
							} else {

								this.MyCourseList.status = 3 // 暂无数据
							}
							console.log('status', this.MyCourseList.status)
						}
						this.MyCourseList.flag = true
					}).catch(e => {
						console.log(e, '数据报错')
					});
			},
			getLearningCourseList() {
				if (!this.pObj.pFlag) {
					return
				}
				this.pObj.pFlag = false
				this.pObj.status = 1
				$http.request({
					url: "common/taihuWelfare/getTaihuWelfareProductList",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data: {
						"page": this.pObj.page,
						"limit": 14
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					if (res.code == 0) {
						if (res.page.records.length > 0) {
							var _list = res.page.records
							this.productList = this.productList.concat(_list)
							if (res.page.pages > this.pObj.page) {
								this.pObj.status = 88
							} else {
								// 加载完毕
								this.pObj.status = 2
							}
						} else {
							this.pObj.status = 3
						}
					}
					this.pObj.pFlag = true
				}).catch(e => {
					console.log(e, '商品列表')
					this.pObj.status = 88
					this.pObj.pFlag = true
				});
			},
			getExpiredCourseList() {
				if (!this.pObj.pFlag) {
					return
				}
				this.pObj.pFlag = false
				this.pObj.status = 1
				$http.request({
					url: "common/taihuWelfare/getTaihuWelfareProductList",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data: {
						"page": this.pObj.page,
						"limit": 14
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					if (res.code == 0) {
						if (res.page.records.length > 0) {
							var _list = res.page.records
							this.productList = this.productList.concat(_list)
							if (res.page.pages > this.pObj.page) {
								this.pObj.status = 88
							} else {
								// 加载完毕
								this.pObj.status = 2
							}
						} else {
							this.pObj.status = 3
						}
					}
					this.pObj.pFlag = true
				}).catch(e => {
					console.log(e, '商品列表')
					this.pObj.status = 88
					this.pObj.pFlag = true
				});
			},
			getUserInfo() {
				// 用户详情
				// if (this.userInfo.id != undefined) {
				this.$http
					.post('book/user/info/' + this.userInfo.id)
					.then(res => {
						this.userMsg = res.user
					});
				// }
			},

			// 跳转
			onPageJump(url, id) {
				uni.navigateTo({
					url: `${url}?id=${id}`
				});
			},

		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	.search{background-color: $containerColor; padding: 10rpx; }
	.containerBg1{padding:0 10px;}
	.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 {
		padding-top:10px;
		padding-bottom: 10px;

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

		.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>