<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar :title="pageTitle ? pageTitle : '课程详情'"></z-nav-bar>
		<view class="curseImg">
			<image src="../../static/video.jpg" mode="widthFix"></image>
		</view>
		<view class="containerBg1">
			<view class="courseTitle">
				<text class="title">桃源探秘•陶渊明的魔域桃源</text>
				<view class="tags flexbox">
					<view class="tagsBox">
						<uni-tag style="margin-right: 10rpx;" :inverted="true" text="高级" type="primary" />
						<uni-tag style="margin-right: 10rpx;" :inverted="true" text="选修" type="success" />
					</view>
					<view class="price">
						<text>￥<i>299</i>起</text>
					</view>
				</view>
				<view class="btnContainer flexbox">
					<view class="saveBtn flexbox">
						<!-- star-fill -->
						<u-icon name="star" color="#fff" size="28"></u-icon>
						<text>加入收藏</text>
					</view>
					<view class="saveBtn buybtn flexbox">
						<!-- bag-fill -->
						<u-icon name="bag" color="#fff" size="28"></u-icon>
						<text>购买整套课程</text>
					</view>
				</view>
			</view>
			<view class="containerBg">				
				<view class="prof">
					<uni-section style="background: transparent;" title="课程介绍" type="line"></uni-section>
					<view class="">
						需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现 如果 uni-list-item
						组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。 uni-list-item提供了3个可扩展的插槽：
					</view>
				</view>
			</view>
			<!-- <view class="containerBg"> -->
			<view class="coursePart flexbox">
				<view class="active item flexbox">
					<view class="">上部</view>
					<!-- <u-icon name="lock" color="#2979ff" size="28"></u-icon> -->
				</view>
				<view class="item flexbox">
					<!-- bag-fill -->
					<u-icon name="lock" color="#fff" size="28"></u-icon>
					<text>下部</text>
				</view>
			</view>
			<view class="courseList">
				<view class="item">
					<text>一、概论</text>
				</view>
				<view class="item">
					<text>二、阴阳应象大论（上）</text>
				</view>
				<view class="item">
					<text>三、阴阳应象大论（下）</text>
				</view>
				<view class="item">
					<text>四、阴阳离合论（一）</text>
				</view>
				<view class="item">
					<text>一、概论</text>
				</view>
				<view class="item">
					<text>二、阴阳应象大论（上）</text>
				</view>
				<view class="item">
					<text>三、阴阳应象大论（下）</text>
				</view>
				<view class="item">
					<text>四、阴阳离合论（一）</text>
				</view>
				<view class="item">
					<text>一、概论</text>
				</view>
				<view class="item">
					<text>二、阴阳应象大论（上）</text>
				</view>
				<view class="item">
					<text>三、阴阳应象大论（下）</text>
				</view>
				<view class="item">
					<text>四、阴阳离合论（一）</text>
				</view>
			</view>
			<!-- 购买位置 -->
			<view class="buyBox">

			</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 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'

				},
				subList: [],
				scrollable: false,
				pageTitle: null,
				courseList: [],
				// status: 3, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据

			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.courseId = e.id
			this.pageTitle = e.title
			console.log(e, '传入分类id')
			// this.getCateList(this.courseId)
			// this.getData(this.courseId)
		},
		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) {
				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) {
				uni.navigateTo({
					url: `${url}`
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.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: 80rpx;
			line-height: 80rpx;
			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
		}

		.item:nth-child(1) {
			border-radius: 20rpx 20rpx 0 0;
		}
	}

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

		.buybtn {
			@include theme("btn_bg")
		}

		margin-bottom: 20rpx;
	}

	.tags {
		justify-content: space-between;
		// border-top: 1rpx solid #e7e7e7;
		// border-bottom: 1rpx solid #e7e7e7;
		padding: 10px 0;
	}
.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: 20rpx;

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

	.flexbox {
		display: flex;
	}

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