<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar :title="pageTitle ? pageTitle : '课程详情'"></z-nav-bar>
		<view class="curseImg">
			<image v-if="!course.image" src="/static/nobg.jpg" mode="widthFix"></image>
			<image v-else :src="course.image" mode="widthFix"></image>
		</view>
		<view class="containerBg1">
			<view class="courseTitle" v-if="course.id">
				<text class="title">{{course.title}}</text>			
			</view>
			<view class="containerBg" v-if="course.content && course.content != ''">
				<view class="prof">
					<uni-section style="background: transparent;" title="课程介绍" type="line"></uni-section>
					<view class="" v-html="course.content">
					</view>
				</view>
			</view>
			<!-- <view class="containerBg"> -->
			<view class="coursePart flexbox" v-if="librayList.length > 1">
				<view :class="['item','flexbox',curId == item.id? 'active': '' ]" v-for="(item, index) in librayList"
					:key="index" @click="clicklib(item,index)">
					<u-icon v-if="item.isBuy == 0 && curId == item.id" name="lock" color="#258feb" size="28"></u-icon>
					<u-icon v-if="item.isBuy == 0 && curId != item.id" name="lock" color="#fff" size="28"></u-icon>
					<view class="">{{item.title}}</view>
				</view>
			</view>
			<view class="courseList" v-if="courseList.length > 0">
				<view class="item" v-for="(item, index) in courseList" :key="index">
					<text>{{item.title}}</text>
				</view>
				<view class="buyBox flexbox" v-if="this.librayList[this.curIndex].isBuy == 0">
					<!-- 普通未购买 -->
					<view class="item">
						<text>您还未购买此课程，开通 <text style="font-weight: bold;">超级VIP</text> 或 购买课程 均可观看课程</text>
					</view>
					<view class="item tbn flexbox">
						<view class="saveBtn buybtn flexbox" @click="goBuy('halfFee')">
							<u-icon name="bag" color="#fff" size="28"></u-icon>
							<text>立即购买</text>
						</view>
						<view class="saveBtn vipBtn flexbox" @click="goBuy('halfFee')">
							
							<uni-icons type="vip" size="28" color="#fff"></uni-icons>
							<text>开通超级VIP</text>
						</view>
					</view>
					
				</view>
			</view>
			<u-divider v-else text="暂无数据"></u-divider>
			<u-popup :show="pricespop" :round="10" @close="closePup">
				<view class="proListPrice" v-if="proPriceList.length > 0">
				<view class="title">
					请选择您的购买时长
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in proPriceList" 
					:key="index"
					@click="choosePrice(item)"
					>
						{{item.productName}} - ￥{{item.price}}
					</view>
				</view>
					
				</view>
			</u-popup>
			<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 musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},
				courseId: null,
				// fixed: false,
				bgiStyle: {
					background: '#fff'
				},
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: 'bold',
					color: '#258feb',
				},
				scrollTop: 0,
				activeStyle: {
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.2)',
					// backgroundColor: '#258feb'

				},
				pricespop:false,
				subList: [],
				scrollable: false,
				pageTitle: null,
				courseList: [],
				course: {},
				librayList: [], // 目录列表
				curId: null,
				curIndex: 0,
				proPriceList:[],

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

		},
		components: {
			// musicPlay
		},
		//方法
		methods: {				
			getData(id) {
				$http.request({
						url: "sociology/course/getCourseDetail",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"id": id
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							this.course = res.data.course
							this.pageTitle = this.course.title
							this.librayList = res.data.catalogues
							if (this.librayList.length > 0) {
								this.courseId = this.librayList[0].id
								this.curId = this.librayList[0].id
								this.curIndex = 0
								this.getChapterList(this.courseId)
							}
						}

					}).catch(e => {
						console.log(e, '获取目录数据报错')
					});

			},
			goBuy() {
				$http.request({
						url: "sociology/product/getProductListForCourse",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"id": this.curId
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.productList.length > 0) {
								this.proPriceList = res.productList								
							} else {
								this.proPriceList = []
							}
						}
				
					}).catch(e => {
						console.log(e, '获取商品列表报错')
					});
					
				this.pricespop = true
			},
			closePup(){
				this.pricespop = false	
				this.proPriceList = []
			},
			choosePrice(item){
				console.log(item,'choosePrice')				
				uni.showModal({
					title: '提示',
					cancelText: '再想想',
					content: `您正在购买 ${item.productName}，价格是${item.price}元，是否继续？`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			clicklib(item, index) {
				if (item.id == this.curId) {
					return
				}
				this.curIndex = index
				this.curId = item.id
				this.getChapterList(item.id)
			},
			getChapterList(id) {
				$http.request({
						url: "sociology/course/getCourseCatalogueChapterList",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"id": id
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.chapterList.length > 0) {
								this.courseList = res.chapterList
								// console.log('status', res)
							} else {
								this.courseList = []
							}
						}

					}).catch(e => {
						console.log(e, '获取章节列表数据报错')
					});
			},
			// 跳转
			onPageJump(url) {
				uni.navigateTo({
					url: `${url}`
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	.proListPrice{text-align: center; 
	.title{font-size: 28rpx; margin: 10px 0; }
	.list{padding-bottom: 20rpx;
		.item{font-size: 26rpx;color: $themeColor;  line-height: 80rpx; border-bottom: 1px solid #eee; }
		.item:last-child{border-bottom: none}
	}
	}
	.vipBtn{
		@include theme("vipbtnbg");
		border-radius: 100rpx;  justify-content: center;
		width: 150px; color:#fff;
		margin: 10rpx auto;
	}
	.buyBox {
		position: fixed; 
		z-index: 2;
		bottom: 100rpx;
		left: 0;
		padding: 20rpx 10rpx;
		width: 100%; font-size: 28rpx;  flex-wrap: wrap;
		background: rgba(255, 255, 255, 0.9);
		.item{  width: 100%;
			text-align: center;
			
		}
		.tbn{align-items: center;}
		.buybtn{color: #fff;}
	}

	.curseImg {
		image {
			width: 100%;
			height: 500rpx;
		}
	}

	.courseList {
		// background-color: #fff;
		padding: 0 20rpx;
		background-image: linear-gradient(0deg, #e9f0ff 0%, #fbfbff 100%);

		.item {
			font-size: 26rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-bottom: 1px solid #ececec;

			text {
				@include toe()
			}
		}
	}

	.containerBg1 {
		border-top: 1px solid #fff;
		margin-top: -30rpx;
		position: relative;
		z-index: 1;
		border-radius: 30rpx 30rpx 0 0;
		// background-color: #fff;
		overflow: hidden;
	}

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

	.buyBox {}

	.coursePart {
		margin-top: 20rpx;
		@include ptop_bottm(10px);
		border-radius: 20rpx 20rpx 0 0;
		@include pleft_right(10px);

		@include mshadow(10px, 1);
		margin-top: 20rpx;
		padding: 0 20rpx;
		padding-top: 20rpx;
		background-color: $themeColor;

		.item {
			justify-content: center;
			align-items: center;
			color: #fff;
			width: 100%;
			text-align: center;
			padding: 20rpx 0;

			view {}
		}

		.item.active {
			background-color: #fbfbff;
			color: $themeColor;
			border-radius: 20rpx 20rpx 0 0;
		}

	}

	.btnContainer {
		border-top: 1px solid #cac6e1;
		margin-top: 20rpx;
		padding-top: 20rpx;
		justify-content: space-between;



		margin-bottom: 20rpx;
	}

	.buybtn {
		border-radius: 100rpx;  justify-content: center;
		width: 150px;
		margin: 10rpx auto;
		@include theme("btn_bg")
	}

	.priceBox {
		background: rgba(255, 255, 255, 0.8);
		border-radius: 20rpx;
		padding: 10px;
		margin-bottom: 10px;
		justify-content: space-between;
		// border-top: 1rpx solid #e7e7e7;
		// border-bottom: 1rpx solid #e7e7e7;
		padding: 10px 0;

		.price {
			width: 100%;
			text-align: center;
		}

		.price:first-child {
			border-right: 1px solid #cac6e1;
		}
	}

	.prof {
		font-size: 26rpx;
		line-height: 50rpx;
		padding: 10rpx 0;
		color: #333;
		margin-bottom: 20rpx;
	}

	.courseTitle {
		overflow: hidden;
		background-image: url(@/static/bg1.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		// background-image: linear-gradient(180deg, #cfe0ff 0%, #fff 50%);
		padding: 0 20rpx;

		.price {
			color: #ff582e;
			font-size: 32rpx;

			i {
				font-style: normal;
				font-size: 60rpx;
				font-weight: bold
			}
		}



		.title {
			display: block;
			font-size: 30rpx;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
		}

		.saveBtn {
			align-items: center;
			justify-content: center;
			height: 80rpx;
			background-color: #00d8df;
			// width: 46%;
			overflow: hidden;
			border-radius: 30rpx;

			text {
				padding-left: 10rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}

	.flexbox {
		display: flex;
	}

	.imgcontainer {
		background-color: $imgBg;
	}
</style>