<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar :title="pageName"></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="MyCourseBox" >				
			<!-- <view class="containerBg"> -->
			<view class="newBox">
				<view :class="['item','flexbox', userMsg.vip != '0'&& item.isBuy != 1 ? 'blueBorder':'']" v-for="(item, index) in MyTaskList.list" :key="index"
					>
					<view class="vipTag" v-if="userMsg.vip != '0' && item.isBuy != 1">
						VIP畅学
					</view>
					<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
					<view class="imgcontainer" @click="onPageJump('/pages/course/courseDetail',item.id)">
						<image v-if="item.image && item.image != ''" :src="item.image" mode="aspectFit"></image>
						<!-- <image  :src="item.image" mode="" @click="goDetail(item.productId)"></image> -->
						<!-- <image v-else src="/static/nobg.jpg" mode="widthFix"></image> -->
					</view>
					<view class="buyItems">
						<view class="txt555">
							<view class="" @click="onPageJump('/pages/course/courseDetail',item.id)">
								{{item.title}}
							</view>							
						</view>						
						<view class="jianjie" v-html="item.content">

						</view>
						<view class="collection">
							<!-- 收藏状态{{item.isStudying}} -->
							<text class="add citem" v-if="item.isStudying == 0" @click="addCollection(item,index)">加入在学习</text>
							<text class="del citem" v-else @click="delCollection(item,index)">取消在学习</text>
							<text class="citem btn_box"  @click="onPageJump('/pages/course/courseDetail',item.id)">去学习</text>
						</view>						
					</view>

				</view>
			</view>
			<u-divider v-show="MyTaskList.status == 2" text="已加载全部"></u-divider>
			<u-divider v-show="MyTaskList.status == 3" text="暂无数据"></u-divider>
			<u-divider v-show="MyTaskList.status == 1" text="加载中..."></u-divider>
			</view>			
			
		</view>

		<view>
			<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
				:iconStyle="iconStyle"></u-back-top>
		</view>
		<!-- </view> -->
		<!-- 评论弹出 -->
		<public-module></public-module>
		
		<z-navigation></z-navigation>
		<!-- <music-play :playData="playData"></music-play> -->
	</view>
	</view>
</template>

<script>	
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				proPriceList: [],
				pricespop:false,
				curTagId: 0,
				playData: {},
				searchValue:'',
				selectCat:'', // 选中的分类名称
				// 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: '0',
					name: '班内任务'
				}, {
					id: '1',
					name: '医案'
				}, {
					id: '2',
					name: '心得'
				}], // 目录列表
				curId: null,
				curIndex: 0,
				treeListVisible:false,
				MyTaskList: {
					list: [],
					status: 88,
					page: 1,
					flag: false
				},	
			 classId:undefined,
			 pageType:undefined,
			 pageName:'',
			};
		},
		//第一次加载
		onLoad(e) {
			this.classId = e.id,
			this.pageType = e.type
			if(e.type == '0'){
				this.pageName = '班内任务'
			}else if(this.pageName = '医案'){
				
			}else{
				this.pageName = '心得'
			}
			// 隐藏原生的tabbar			
			uni.hideTabBar();
			// this.windowWidth = uni.getSystemInfoSync().windowWidth;
			// this.pageTitle = e.title
			console.log(e, '传入分类id')
			// this.getUserInfo()
			// this.fatherClick()
			this.getMyTaskList()			
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (this.scrollTop > 500) {
				this.fixed = true
			} else {
				this.fixed = false
			}
		},
		onPullDownRefresh() {
			this.selectCat = ''
			this.MyTaskList.page = 1
			this.MyTaskList.list = []
			this.getMyTaskList()
			// this.getLearningCourseList()
			// this.getExpiredCourseList()
			uni.stopPullDownRefresh()
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			// #ifdef APP-PLUS
			plus.screen.unlockOrientation();
			plus.screen.lockOrientation("portrait-primary");
			// #endif	
		},
		onReachBottom() {
			console.log('触底');
			if (this.curTagId == 0) {
				if(this.MyTaskList.status != 2){
					if(!this.MyTaskList.flag){
						this.MyTaskList.page++
						this.getMyTaskList()
					}
				}
			}			
		},
		components: {
			// musicPlay
			// emotion,
			// treeList,
			// buyPup
			// commentsList

		},
		//方法
		methods: {
			oprate(data){
				console.log(data,'得到的内容')
				if(data.name == 'buy'){
					this.buy(data.item)
				}else if(data.name == 'gouwuche'){
					this.addCart(data.item)
				}
			},
			// 购物车
			addCart(val){
				console.log(val)				
				if (val.productStock == 0) {
					uni.showToast({
						title: '商品库存不足',
						icon: "none"						
					});
				} else {
					console.log(this.userInfo, '222')
					this.$http
						.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
						.then(res => {				
							// console.log(
							this.cartList = res.cartList
							 this.isAddLink(val)
						}).catch( e => {
						console.log(e,'e')
						uni.showToast({
							title:`获取数据失败`,
							icon:'error'
						})
					})
				}
			},			
			
			closePup(e){
				this.pricespop = false
			},
			delselectCat(){
				this.selectCat = ''
				this.medicalId = ''
				this.MyTaskList.page = 1
				this.MyTaskList.list = []
				this.getMyTaskList()	
			},
			// search(res){
			// 	// console.log('点了搜索')				
			// 	if(!this.MyTaskList.flag){
			// 		this.MyTaskList.page = 1
			// 		this.MyTaskList.list = []
			// 		this.getMyTaskList()	
			// 		console.log(this.searchValue,'searchValue')	
			// 	}else{
			// 		console.log('存在未执行完的程序')
			// 	}			
			// },
			focus(res){
				this.oldValue = res
				// console.log(res,this.oldValue,'聚焦');
			},
			blur(res){				
				// console.log(res,this.searchValue,'res');		
				if(this.oldValue != res){ // 重新请求
					this.MyTaskList.page = 1
					this.MyTaskList.list = []
					this.getMyTaskList()	
					this.oldValue = ''
				}
				
			},
			clear(){
				// console.log('++++++++++++++++++++++')
				this.searchValue = ''
				this.MyTaskList.page = 1
				this.MyTaskList.list = []
				this.getMyTaskList()	
			},
			clickCourseInfo(val){
				console.log(val,'选择的分类数据');
				if(val && val.id){
					this.medicalId = val.id
					this.MyTaskList.page = 1
					this.MyTaskList.list = []
					this.selectCat = val.title
					this.getMyTaskList()	
				}
			},
			fatherClick(e) {
				if(this.pageType == e.id){ return}
				console.log(e,'tabitem')
				this.pageType = e.id
				
				this.getMyTaskList()
				this.curTagId = e.index
			},
			showDrawer(){				
				this.treeListVisible = true
				this.$nextTick( ()=> {
					this.$refs['treeList'].getData()
				})
				
			},
			getMyTaskList() {
				this.MyTaskList.status = 1
				// if (this.MyTaskList.flag) {
				// 	console.log('正在执行，未完成')
				// 	return
				// }
				this.MyTaskList.flag = true
				$http.request({
						url: "common/class/getClassTaskList",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"limit": 20,
							    "page": this.MyTaskList.page,
							    "type": this.pageType+'', //类型 0班内任务1医案2心得
							    "title": ""
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.page.records.length > 0) {
								var list = res.page.records
								this.MyTaskList.list = this.MyTaskList.list.concat(list)
								if (res.page.pages > this.MyTaskList.page) {
									this.MyTaskList.status = 0
								} else {
									this.MyTaskList.status = 2
								}
							} else {
								this.MyTaskList.status = 3 // 暂无数据
							}
							 // console.log('status--------------------', this.MyTaskList.list)
						}
						this.MyTaskList.flag = false
					}).catch(e => {
						this.MyTaskList.flag = false
						this.MyTaskList.status = 3
						console.log(e, '数据报错')
						uni.showToast({
							title:`获取数据失败`,
							icon:'error'
						})
					});
			},	
			
			getUserInfo() {
				// 用户详情
				// if (this.userInfo.id != undefined) {
				this.$http
					.post('book/user/info/' + this.userInfo.id)
					.then(res => {
						this.userMsg = res.user
						// this.userInfo = res.user						
					});
				// }
			},		
			
						
			// 跳转
			onPageJump(url, id) {
				uni.navigateTo({
					url: `${url}?id=${id}`
				});
			},

		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	
	.LearningCourseBox,.ExpiredCourseBox{margin-top: 20rpx;}
	.collection{ margin-top: 20rpx; overflow: hidden; text-align: right;
		.btn_box{border: 1px solid $themeColor !important; color:$themeColor !important; margin-left: 20rpx;}
		.citem{ display: inline-block;
			border-radius: 10rpx;
			// background-color: #ff7446;
			border: 1px solid #ff7446;
			padding: 10rpx; font-size:24rpx; 
			color: #ff7446; 
		}
		.del{
			background-color: #ffe6db; color: #ff7446;
		}
	}
	.sectionTitle{ margin: 20rpx 0;		
		justify-content: space-between; margin-bottom: 20rpx; margin-top: 20rpx;
		.rightIcon{color:#2979ff ; align-items: center; font-size: 26rpx;}
		}
	
	.selectCateText{ min-width:20rpx ;  font-size: 26rpx;
		.del{color: #ff7446; padding-left: 20rpx;}
	}
	.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: 2; width: 100%; background-color: #fff;
	}

	.newBox {
	.blueBorder{border: 1px solid  #2979ff !important;}
		.item { overflow: hidden;
		border: #fff 1px solid ;
			.vipTag{position: absolute; padding:10rpx 100rpx; font-size: 26rpx;
				left: -100rpx; top: 20rpx; 
				transform: rotate(-45deg); 
				-o-transform: rotate(-45deg); 
				-webkit-transform: rotate(-45deg); 
				-moz-transform: rotate(-45deg);
				z-index: 1;
				@include theme("btn_bg") ; 
				color: #fff;}
			position: relative;
			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 {
				line-height: 30rpx; height: 60rpx; overflow: hidden; 
				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>