<template>
	<a-layout>
		<a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible collapsedWidth="0">
			<div class="classTitle">
				<div>{{ classDetail.courseName }}</div>
			</div>
			<a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
				<template v-for="(item, idx) in classTimeList" :key="item.id">
					<template v-if="!item.classHours">
						<a-menu-item :key="item.id" v-for="(item, idx) in classTimeList">
							<span class="mr-2">
								<CheckSquareOutlined v-if="selectedKeys.includes(item.id)" />
								<BorderOutlined v-else />
							</span>
							<span>{{ item.name }}</span>
						</a-menu-item>
					</template>
					<template v-else>
						<a-sub-menu :key="String(idx + 1)" v-for="(item, idx) in classTimeList">
							<template #title>{{ item.name }}</template>
							<a-menu-item :key="itemc.id" v-for="(itemc, idxc) in item.classHours">
								<span class="mr-2">
									<CheckSquareOutlined v-if="selectedKeys.includes(itemc.id)" />
									<BorderOutlined v-else />
								</span>
								<span>{{ itemc.name }}</span>
							</a-menu-item>
						</a-sub-menu>
					</template>
				</template>
			</a-menu>
		</a-layout-sider>
		<a-layout>
			<a-layout-header style="padding: 0 20px">
				<div class="flex-between">
					<div>
						<menu-unfold-outlined
							v-if="collapsed"
							class="trigger"
							@click="() => (collapsed = !collapsed)"
							style="font-size: 30px; color: #fff"
						/>
						<menu-fold-outlined
							v-else
							class="trigger"
							@click="() => (collapsed = !collapsed)"
							style="font-size: 30px; color: #fff"
						/>
					</div>
				</div>
			</a-layout-header>
			<a-layout-content style="overflow-y: auto">
				<a-card :bordered="false">
					<video
						style="height: 900px; width: 100%; background-color: #000"
						ref="videoRef"
						controls
						Controlslist="nodownload noplaybackrate noremoteplayback disablePictureInPicture"
						@timeupdate="timeUpdate"
						:currentTime="currentTimenew"
					>
						<source :src="videoUrl" type="video/mp4" />
						<source :src="videoUrl" type="video/ogg" />
						您的浏览器不支持 HTML5 video 标签。
					</video>
					<rightMenu :idsObj="idsObj" :dataList="classTimeData" ref="rightNenuRef" @videoSpeed="videoSpeed"></rightMenu>
				</a-card>
				<div style="display: flex;justify-content: center;">
					<a-card :bordered="false" class="mt-2" style="max-width: 1200px">
						<a-tabs v-model:activeKey="tabsActiveKey">
							<a-tab-pane key="1" tab="讲义">
								<div style="height: 900px;">
									<vue-office-pdf :src="itemObj.url" style="width: 100%; height: 100%" />
								</div>
							</a-tab-pane>
							<a-tab-pane key="2" tab="字幕">
								<div style="height: 900px; overflow-y: auto">
									<div v-for="(item, idx) in danmuObj.srtInfoList" :key="idx">
										<div>{{ item.startTime }}~{{ item.endTime }}</div>
										<div style="cursor: pointer; padding: 10px 0" @click="videoSpeed(item)">{{ item.text }}</div>
									</div>
								</div>
							</a-tab-pane>
							<a-tab-pane key="3" tab="笔记">
								<note :idsObj="idsObj" ref="noteRef" @edit="noteEdit"></note>
							</a-tab-pane>
							<a-tab-pane key="4" tab="问答">
								<askDiv :idsObj="idsObj" ref="askDivRef" @edit="askEdit"></askDiv>
							</a-tab-pane>
						</a-tabs>
					</a-card>
				</div>
			</a-layout-content>
		</a-layout>
	</a-layout>
</template>

<script setup name="classCentre">
	import classCentre from '@/api/student/classCentre'
	import rightMenu from './rightMenu.vue'
	import { useRoute, useRouter } from 'vue-router'
	import sysConfig from '@/config/index'
	import note from './note.vue'
	import askDiv from './ask.vue'
	import VueOfficePdf from '@vue-office/pdf'
	import axios from 'axios'
	const route = useRoute()
	const router = useRouter()
	const classDetail = ref({})
	const classTimeList = ref([])
	const classTimeData = ref([])
	const openKeys = ref(['1'])
	const selectedKeys = ref([])
	const collapsed = ref(false)
	const videoRef = ref()
	const currentTimenew = ref()
	const idsObj = computed(() => {
		let item = findNodeByKey(classTimeList.value, selectedKeys.value[0])
		return {
			courseId: route.query.id,
			chapterId: item?.chapterId,
			hourId: selectedKeys.value[0]
		}
	})
	function findNodeByKey(list, id) {
		for (const item of list) {
			if (item.id === id) {
				return item
			}
			if (item.classHours && Array.isArray(item.classHours)) {
				const found = findNodeByKey(item.classHours, id)
				if (found) return found
			}
		}
		return null
	}
	const getClassData = () => {
		classCentre.addViewCount({ courseId: route.query.id })
		classCentre.courseDetail({ courseId: route.query.id }).then((data) => {
			classDetail.value = data
			classCentre.coursechapterList({ courseId: data.courseId }).then((data) => {
				classTimeList.value = data
				selectedKeys.value = [data[0]?.classHours[0].id]
				if (selectedKeys.value[0]) {
					classCentre.courseTimeDetail({ id: selectedKeys.value[0] }).then((data) => {
						classTimeData.value = data.courseRelates.map((r) => {
							return {
								...r,
								url: sysConfig.FILE_URL + r.url
							}
						})
						videoRef.value.src = classTimeData.value.filter((r) => r.funcType == 1)[0]?.url
					})
				}
			})
		})
	}
	getClassData()

	const tabsActiveKey = ref('1')
	const noteRef = ref()
	const askDivRef = ref()
	const itemObj = computed(() => {
		let item = classTimeData.value.length > 0 ? classTimeData.value.filter((r) => r.funcType == 2)[0] : { url: '' }
		return item
	})
	const danmuObj = computed(() => {
		let item = classTimeData.value.length > 0 ? classTimeData.value.filter((r) => r.funcType == 3)[0] : { url: '' }
		console.log('🚀 ~ item:', item)
		if (item?.url) {
			GetSrtInfo(item.url)
		}
		return item
	})
	const videoUrl = ''
	const newsschedule = ref(0)
	const currTime = ref(null)
	const maxTime = ref(0)
	const initialtime = ref(0)
	const videoContext = ref()
	const timeStamp1 = ref()
	const allTime = ref()
	const biNum = ref()
	const currentTime = ref()
	const videoStart = () => {
		videoContext.value = videoRef.value
		if (initialtime.value > 0) {
			videoContext.value.currentTime = initialtime.value
			timeStamp1.value = initialtime.value
		}
	}
	nextTick(() => {
		videoStart()
	})
	const timeUpdate = (e) => {
		//获取当前播放时间 durationinitialtime
		if (timeStamp1.value != parseInt(e.target.currentTime)) {
			allTime.value = parseInt(e.target.duration) //视频总时长（秒）
			//对播放的时间进行整
			timeStamp1.value = parseInt(e.target.currentTime) //播放进度 (秒)
			biNum.value = Math.floor((timeStamp1.value / allTime.value) * 10000) / 100 //暂时没用到
			currentTime.value = e.target.currentTime
			if (newsschedule.value < 90) {
				//newsschedule.value 请求接口获取的参数就是判断当前观看的时长是否小于90 小于90就禁止拖动进度条

				if (e.srcElement.currentTime - currTime.value > 3) {
					//这里拖动进度条时间 - 当前观看的时长 > 3秒 这边判定它为拖动进度条
					e.srcElement.currentTime = currTime.value > maxTime.value ? currTime.value : maxTime.value
					let newsVal = initialtime.value
					if (newsVal) {
						videoContext.value.currentTime = newsVal
					}
					//当前用户记录观看时间 大于 实施播放时间
					if (currTime.value > newsVal) {
						videoContext.value.currentTime = currTime.value
					}
					console.log('快进了')
				}
				currTime.value = e.srcElement.currentTime
				maxTime.value = currTime.value > maxTime.value ? currTime.value : maxTime.value
			}
		}
	}

	const rightNenuRef = ref()
	const noteEdit = (e) => {
		rightNenuRef.value.selectBtn({ key: 6, type: 2 }, e)
	}
	const askEdit = (e) => {
		rightNenuRef.value.selectBtn({ key: 7, type: 4 }, e)
	}
	const videoSpeed = (e) => {
		currentTimenew.value = e.startTime
	}
	//获取字幕内容，发送一个get请求
	function GetSrtInfo(srtUrl) {
		axios
			.get(`${srtUrl}`)
			.then(function (response) {
				let textList = response.data
					.split(/\n\s\n/)
					.filter((item) => item != '')
					.map((item, index) => {
						let textItem = item.split(/\n/)
						return {
							index: index,
							sort: textItem[0],
							text: textItem[2],
							startTime: ToSeconds(textItem[1].split(' --> ')[0]),
							endTime: ToSeconds(textItem[1].split(' --> ')[1]),
							timeLine: textItem[1]
						}
					})
				danmuObj.value.srtInfoList = textList
				console.log('解析之后的字幕内容', textList)
			})
			.catch(function (error) {
				console.log(error)
			})
	}
	//将时间转化为秒
	function ToSeconds(t) {
		var s = 0.0
		if (t) {
			var p = t.split(':')
			for (let i = 0; i < p.length; i++) {
				s = s * 60 + parseFloat(p[i].replace(',', '.'))
			}
		}
		return s
	}
</script>
<style scoped lang="less">
	.classTitle {
		height: 64px;
		width: 200px;
		font-size: 18px;
		color: #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.flex-between {
		display: flex;
		justify-content: space-between;
	}
</style>
