<template>
	<view>
		<video :custom-cache="false" @loadedmetadata="onLoadedmetadata"	 id="nodeVideo" @timeupdate="onVideoTimeupdate" :src="currentNode.videoUrl" :title="currentNode.nodeName" play-btn-position="center" show-mute-btn show-center-play-btn controls autoplay enable-play-gesture class="video" ></video>
		<view class="subject">
			<view class="subject-name u-line-2">
				{{subject.subjectName}}
			</view>
			<view class="subject-introduce u-line-2">
				{{subject.introduce}}
			</view>
		</view>
		<u-gap v-if="subject.product" bg-color="#efefef" height="8"></u-gap>
		<view v-if="subject.product" class="product">
			<view @click="toProductDetail" class="volume">
				<u--image :src="subject.product.image" width="168.75rpx" height="168.75rpx" mode="aspectFill" radius="8rpx"></u--image>
				<view style="width: 500rpx;" class="volume-info">
					<view class="volume-title">{{subject.product.storeName}}</view>
					<view class="volume-level">{{subject.product.storeInfo}}</view>
					<view class="volume-price">
						<view style="height: 30rpx;"><text style="font-size: 16rpx;">￥</text>{{subject.product.price}}</view>
						<view class="btn-pay"><u-button type="primary" size="mini">查看</u-button> </view>
					</view>
				</view>
			</view>
		</view>
		<u-gap bg-color="#efefef" height="8"></u-gap>
		<u-tabs @change=onTabChange  :list="tabLIst" :current="currentTabIndex" :activeStyle="{color: '#eb3729','font-weight': 'bold'}" lineColor="#eb3729" :scrollable="false" itemStyle="width: 33.33%;height: 100rpx;font-size: 32rpx !important;"></u-tabs>
		<view v-show="currentTabIndex == 0">
			<view @click="onVolumeChange(item.id, index)" class="volume" v-for="(item ,index) in subject.volumeList" :key="index">
				<u--image :src="item.poster" width="300rpx" height="168.75rpx" mode="aspectFill" radius="8rpx"></u--image>
				<view class="volume-info">
					<view class="volume-title">{{item.volumeName}}</view>
					<view class="volume-level">{{item.level}} | {{item.nodeList?item.nodeList.length: 0}}小节</view>
					<view class="volume-price">
						<view style="height: 30rpx;"><text  v-if="!item.isPaid" style="font-size: 16rpx;">￥</text>{{item.isSpike?item.spikePrice:item.price}}</view>
						<view v-if="!item.isPaid" @click.stop="onBuy(item.id)" class="btn-pay"><u-button type="primary" size="mini">立即报名</u-button> </view>
						<view v-if="item.isPaid" class="btn-pay"><u-button type="success" size="mini">学习</u-button> </view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="currentTabIndex == 1">
			<u-cell-group>
				<u-cell  @click="onPlayNode(item)" :label="`${(item.duration / 60).toFixed(0)}分钟`" :title="item.nodeName" 
				 v-for="(item, index) in subject.volumeList[volumeIndex].nodeList" :key="index">
				 <view slot="value" style="padding-right: 20rpx;display: flex; align-items: center;">
					 <template v-if="item.isFree || subject.volumeList[volumeIndex].isPaid">
						 <u-icon size="50rpx" name="play-right"></u-icon>立即播放
					 </template>
					 <template v-else>
						 <u-icon size="50rpx" name="lock"></u-icon>解锁专栏
					 </template>
				 </view>
				</u-cell>
			</u-cell-group>
			
		</view>
		<view v-show="currentTabIndex == 2">
			<view class="subject-detail">
				<rich-text :nodes="subject.detail"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
	import {
		getProductDetail,
		postCartAdd,
		getCartCount,
		getProductCode
	} from '@/api/store'
	import  * as SubjectApi from '@/api/subject.js'
	import parseHtml from '@/utils/html-parser.js'
	let videoContext = null
	let timer;
	export default {
		data() {
			return {
				tabLIst: [{name:'专栏'},{name:'目录'},{name: '介绍'}],
				currentTabIndex: 0,
				currentNode: {},
				subjectId: undefined,
				volumeId: undefined,
				nodeId: undefined,
				volumeIndex: 0,
				nodeIndex: undefined,
				volume: {},
				subject: {
					subjectName: '',
					introduce:'',
				}
			}
		},
		computed: mapGetters(['userInfo']),
		onLoad(options) {
			const {sid, vid, nid} = options
			this.subjectId = sid
			this.volumeId = vid
			this.nodeId = nid
			this.getSubjectInfo()
			uni.$on('VolumePaid', (volumeId) => {
				console.log('volumeId: ',volumeId);
				this.getSubjectInfo()
			})
			
			
			timer = setInterval(() => {
				this.now += 1000
			})
		},
		onReady() {
			videoContext = uni.createVideoContext("nodeVideo", this)
		},
		onUnload() {
			uni.$off('VolumePaid')
		},
		destroyed() {
			if(timer) {
				clearInterval(timer);
				timer = null
			}
		},
		methods: {
			toProductDetail() {
				this.$yrouter.push({
				  path: '/pages/shop/GoodsCon/index',
				  query: { id: this.subject.product.id },
				})
			},
			onTabChange({index, name}) {
				this.currentTabIndex = index
			},
			onLoadedmetadata() {
				if(this.currentNode.position) {
					console.log("改变进度");
					videoContext.seek(this.currentNode.position)
				}
				
				videoContext.play()
			},
			onVideoTimeupdate(e) {
				const {currentTime, duration} = e.detail
				if(currentTime < 20) {
					return
				}
				// 30秒保存一次记录
				uni.$u.throttle(()=>{
					console.log('currentTime: ',currentTime);
					SubjectApi.saveNodeViews({
						nodeId: this.currentNode.id,
						volumeId: this.currentNode.volumeId,
						subjectId: this.subjectId,
						position: currentTime,
						duration: duration
					})
				}, 30000)
			},
			async getSubjectInfo() {
				const res = await SubjectApi.getSubject(this.subjectId)
				this.subject = res.data
				
				
				
				
				res.data.detail = res.data.detail.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;"')
				res.data.detail = res.data.detail.replace(/\<video/gi,
					'<video style="max-width:100%;height:auto;"')
				res.data.detail = res.data.detail.replace(/style=""/gi,
					'')
				
				
				
				
				this.subject.detail = parseHtml(res.data.detail);
				
				uni.setNavigationBarTitle({
					title: this.subject.subjectName
				})
				if(res.data.videoUrl){
					this.currentVideo = res.data.videoUrl
				}
				
				if(!this.volumeId) {
					this.volumeId = this.subject.volumeList[0].id
				}
				
				this.volumeIndex = this.subject.volumeList.findIndex(item => item.id == this.volumeId)
				this.onVolumeChange(this.volumeId, this.volumeIndex)
				if(this.nodeId) {
					
					const node = this.subject.volumeList[this.volumeIndex].nodeList.find(item => item.id == this.nodeId)
					this.onPlayNode(node)
				}
					
			},
			onVolumeChange(volumeId, index) {
				this.volumeId = volumeId
				this.volumeIndex = index
				this.currentTabIndex = 1
				
				
			},
			async onPlayNode(node) {
				const volume = this.subject.volumeList[this.volumeIndex]
				
				
				if(volume.isPaid || node.isFree) {
					if(node.id != this.currentNode.id) {
						
						// 获取进度
						const res = await SubjectApi.getNodeViews(node.id)
						node.position = 0
						if(res.data) {
							node.position = res.data.position
						}
						this.currentNode = node
						videoContext.stop()
					}
				}else {
					this.onBuy(volume.id)
				}
			},
		
			async onBuy(volumeId) {
				this.$yrouter.push({
					path: '/pages/subject/OrderSubmission/index',
					query: {
						volumeId: volumeId
					},
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video{
		width: 750rpx;
		height: 420rpx;
		
	}
	
	.subject{
		position: relative;
		padding: 20rpx 0;
		&-name {
			// width: 400rpx ;
			color: #333333;
			font-size: 36rpx;
			padding-left: 30rpx;
		}
		
		&-introduce{
			// width: 400rpx;
			color: #6c6c6c;
			font-size: 24rpx;
			padding-left: 30rpx;
			margin-top: 10rpx;
		}
	}
	
	.volume{
		display: flex;
		padding: 30rpx;
		justify-content: space-between;
		&-info {
			width: 350rpx;
		}
		&-title {
			font-size: 32rpx;
			height: 70rpx;
		}
		
		&-level {
			font-size: 24rpx;
			color: #6c6c6c;
			margin-bottom: 10rpx;
		}
		
		&-price {
			font-size: 26rpx;
			color: #eb3729;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		.btn-pay{
			width: 130rpx;
		}
	}
	
	.node {
		padding: 30rpx 0;
		margin: 0 30rpx;
		border-bottom: #e8e8e8 solid 1px;
		&-title {
		}
	}
	
	.subject-detail{
		padding: 30rpx;
	}
	
</style>
