<template>
	<view class="content">
		<view class="video-wrap">
			<video :src="could_play?chooseCourse.course_sp:''" id="videoId" class="top-video" :poster="topimg"
				v-if="chooseCourse.course_sp"></video>
			<image :src="topimg" mode="widthFix" v-else class="top-video"></image>
			<!-- 视频蒙版 -->
			<!-- <view class="mask" v-if="!could_play" @click.stop=""></view> -->
		</view>
		<view class="nav flex">
			<view class="nav-item" v-for="(item,index) in navList" @click="navClick(index)"
				:class="{'action': index == currentIndex}">
				{{item.title}}
			</view>
		</view>
		<!-- 详情 -->
		<view class="" v-if="currentIndex == 0">
			<view class="base-info">
				<view class="info-tit">
					{{chooseCourse.course_topic}}
				</view>
				<view class="info-info flex">
					<view class="info-item">
						课程：共{{courseList.length}}节
					</view>
					<view class="hx">

					</view>
					<view class="info-item">
						人数：{{chooseCourse.course_play_count}}人学习
					</view>
				</view>
			</view>
			<view class="jianjie">
				<audio :src="bq(chooseCourse.course_audio)" controls v-if="chooseCourse.course_audio"
					:name="chooseCourse.course_topic" author="母婴严选"></audio>
				<view class="jianjie-top flex">
					<view class="hx">

					</view>
					<view class="">
						课程简介
					</view>
					<view class="hx">

					</view>
				</view>
				<view class="" v-html="chooseCourse.course_intro">

				</view>
			</view>
			<view class="tjkc">
				<view class="jianjie-top flex" style="border-bottom: #c8c7cc solid 1px;">
					<view class="hx">

					</view>
					<view class="">
						推荐课程
					</view>
					<view class="hx">

					</view>
				</view>
				<view class="kc-list">
					<view class="kc-item flex" v-for="item in recommendList" v-if="item.gr_id != id">
						<image
							:src="item.indeximg.indexOf('http') == -1 ? ('https://myj.liuniu946.com' +item.indeximg) : item.indeximg"
							mode="" class="kc-img"></image>
						<view class="kc-info">
							<view class="info-tit clamp">
								{{item.title}}
							</view>
							<view class="info-cate clamp">
								{{item.ins}}
							</view>
							<view class="info-info flex">
								<view class="rs">
									{{item.count}}
								</view>
								<view class="visit">
									{{item.alll}}
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 课程目录 -->
		<view class="" v-if="currentIndex == 1">
			<view class="kc-ml">
				<view class="ml-item flex" v-for="item in courseList" :key="item.course_id" @click="choose(item)">
					<view class="bs"></view>
					<view class="">
						{{item.course_topic}}
					</view>
				</view>
			</view>
		</view>
		<!-- 全部课程 -->
		<view class="" v-if="currentIndex == 2">
			<view class="tjkc">
				<view class="kc-list">
					<view class="kc-item flex" v-for="item in 10">
						<image src="" mode="" class="kc-img"></image>
						<view class="kc-info">
							<view class="info-tit clamp">
								母婴行业必学舞蹈（邓晏老师视频）
							</view>
							<view class="info-cate clamp">
								技术控必练习
							</view>
							<view class="info-info flex">
								<view class="rs">
									100
								</view>
								<view class="visit">
									555555
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getUser
	} from '@/api/user.js';
	import {
		getCourseList,
		recommend
	} from "@/api/index.js"
	export default {
		data() {
			return {
				user: {},
				choosId: 0,
				recommendList: [],
				topimg: '',
				id: '',
				courseList: [],
				chooseCourse: {},
				content: '<p>ddddddd</p>',
				currentIndex: 0,
				could_play: false,
				navList: [{
						title: '详情'
					}, {
						title: '课程目录'
					},
					// {
					// 	title: '讲师全部课程'
					// }
				]
			};
		},
		computed: {
			// #ifdef MP
			...mapState(['systeam']),
			// #endif
			videoContext() {
				return uni.createVideoContext('videoId', this)
			}
		},
		onLoad(opt) {

			if (opt.id) {
				this.id = opt.id
				this.getCourseList()
			}
			if (opt.img) {
				let imgurl = decodeURI(opt.img)
			}
			this.getrecommendList()
		},
		onShow() {

		},
		onReachBottom() {

		},
		methods: {
			...mapMutations('user', ['setUserInfo']),
			navTo(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						})
					}
				});
			},
			getUser() {
				const that = this;
				getUser({}).then((e) => {
					this.user = e.data;
					this.setUserInfo(e.data)
					// 
					if (that.user.info_audit_status == 1) {
						//双认证可播放
						if (that.user.type_audit_status == 1) {
							that.could_play = true
						} else {
							// 单次认证无平台认证
							if (that.chooseCourse.course_price_3 * 1 > 0) {
								//一次认证付费
								that.could_play = false
								let str = ''
								if (that.user.type_audit_status == -2) {
									str = '您未完成平台认证，是否立即认证？'
								}
								if (that.user.type_audit_status == -1) {
									str = '您平台认证失败，请重新认证'
								}
								if (that.user.type_audit_status == -3) {
									str = '您平台认证已失效，请重新认证'
								}
								if (that.user.type_audit_status == 0) {
									str = '您已提交认证信息请等待认证结束'
								}
								uni.showModal({
									title: '提示',
									content: str ? str : '您未完成平台认证，是否立即认证？',
									complete(e) {
										if (e.confirm) {
											if (that.user.work_type_id <= 0) {
												that.navTo('/pages/user/model/modelrz?modelid=' + that.user
													.show_template_id)
											} else {
												if (that.user.show_template_id) {
													that.navTo('/pages/user/model/model?mtype=' + that.user
														.show_template_id + '&type=3')
												} else {
													if (that.systeam == 'ios') {
														uni.showModal({
															title: '错误',
															content: 'IOS暂不支持',
															showCancel: false,
														});
													} else {
														uni.showModal({
															title: '错误',
															content: '您未购买模板请先购买',
															showCancel: false,
														});
													}
												}
											}
										}
									}
								})

							} else {
								//一次认证即免费
								that.could_play = true
							}
						}
					} else {
						//无认证 免费
						if (that.chooseCourse.course_price * 1 == 0) {
							that.could_play = true
						} else {
							//付费
							that.could_play = false
							uni.showModal({
								title: '提示',
								content: '您未完成信息认证，是否立即认证？',
								complete(e) {

									if (e.confirm) {
										if (that.user.work_type_id <= 0) {
											that.navTo('/pages/user/model/modelrz?modelid=' + that.user
												.show_template_id)
										} else {
											if (that.user.show_template_id) {
												that.navTo('/pages/user/model/model?mtype=' + that.user
													.show_template_id + '&type=3')
											} else {
												if (that.systeam == 'ios') {
													uni.showModal({
														title: '错误',
														content: 'IOS暂不支持',
														showCancel: false,
													});
												} else {
													uni.showModal({
														title: '错误',
														content: '您未购买模板请先购买',
														showCancel: false,
													});
												}
											}
										}
									}
								}
							})
						}
					}

				}).catch((e) => {
					console.log(e, 'sj');
				})
			},
			bq(url) {
				if (url.indexOf('http') == -1) {
					url = 'https://myj.liuniu946.com' + url
				}
				return url
			},
			choose(item) {
				this.choosId = item.course_id
				this.chooseCourse = item
				this.currentIndex = 0
			},
			getrecommendList() {
				recommend().then(res => {
					this.recommendList = res.data.recommendList.slice(0, 3)
				})
			},
			getCourseList() {
				let that = this
				getCourseList({
					gr_id: that.id
				}).then(res => {
					this.courseList = res.data.map(item => {
						// item.course_sp = (item.course_sp.indexOf('http') == -1 )? ('http://qiniuyun.deepbytop.com' + item.course_sp ): item.course_sp
						item.course_sp = item.course_sp.replace(/http:/g, 'https:')
						item.course_intro = item.course_intro.replace(/img src="/g,
							'img class="rich-img" src="https://myj.liuniu946.com')
						return item
					})
					this.chooseCourse = this.courseList[0]
					this.topimg = (this.chooseCourse.course_cover.indexOf('http') == -1 ? (
							'https://myj.liuniu946.com' + this.chooseCourse.course_cover) : this.chooseCourse
						.course_cover)
					this.getUser()
				})
			},
			navClick(index) {
				this.currentIndex = index
			}
		}
	};
</script>
<style lang="scss" scoped>
	.video-wrap {
		margin: 20rpx 0;
		position: relative;

		.top-video {
			width: 750rpx;

		}

		.mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 999;
			// background-color: red;
		}
	}

	.nav {
		width: 750rpx;
		height: 88rpx;

		.nav-item {
			line-height: 88rpx;
			width: 50%;
			text-align: center;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			height: 100%;
		}

		.action {
			font-weight: bold;
			position: relative;
			color: $base-color;
		}

		background-color: #fff;
	}

	.base-info {
		width: 710rpx;
		margin: 20rpx auto;
		background-color: #fff;
		font-size: 28rpx;

		.info-tit {
			color: #333;
			text-align: center;
			border-bottom: 1px solid #eee;
			padding: 20rpx;
		}

		.info-info {
			color: #666;

			.info-item {
				flex-grow: 1;
				text-align: center;
				padding: 20rpx 0;
			}

			.hx {
				width: 1rpx;
				height: 40rpx;
				background-color: #eee;
			}
		}

	}

	.jianjie {
		width: 710rpx;
		margin: 20rpx auto 0;
		background-color: #fff;
		padding: 20rpx;

	}

	.jianjie-top {
		font-size: 36rpx;
		color: $base-color;
		justify-content: center;
		padding: 40rpx 0 20rpx;

		.hx {
			width: 30rpx;
			height: 1px;
			background-color: $base-color;
			margin: 0 20rpx;
		}
	}

	.tjkc {
		width: 710rpx;
		background-color: #fff;
		margin: 20rpx auto;
	}

	.kc-list {
		padding: 0 30rpx;
		border-bottom: #c8c7cc solid 1px;

		.kc-item {
			border-bottom: #c8c7cc solid 1px;
			padding: 22rpx 0;
			justify-content: flex-start;

			.kc-img {
				flex-shrink: 0;
				width: 266rpx;
				height: 164rpx;
				margin-right: 20rpx;
				background-color: #eee;
			}

			.kc-info {
				height: 164rpx;
				width: 360rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;

				// background-color: red;
				.info-tit {
					width: 100%;
					font-size: 32rpx;
					color: #000;
				}

				.info-cate {
					width: 100%;
					color: #ff5a97;
					font-size: 28rpx;
				}

				.info-info {
					width: 360rpx;
					font-size: 24rpx;

					.rs {
						color: #8f8f94;
					}

					.visit {
						color: $base-color;
					}
				}
			}
		}

	}

	.kc-ml {
		padding: 30rpx;
		width: 710rpx;
		margin: 20rpx auto;
		background-color: #fff;

		.ml-item {
			align-items: flex-start;
			justify-content: flex-start;
			margin-bottom: 40rpx;

			.bs {

				flex-shrink: 0;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 1px solid #5FB878;
				margin-right: 20rpx;
			}
		}

	}

	:deep(.rich-img) {
		width: 100% !important;
	}
</style>