<template>
    <AppLayout :title="title" :show-bg-image="false">
  <!--      <template #headerleft>
            <view class="btnback">
                <image src="@/static/icon/back.png" @click="navBack"></image>
            </view>
        </template> -->
		<view class="video-box">
			<view class="video-detail-container">
			    <!-- 视频播放组件 -->
			    <view class="video-wrapper">
					<video 
						v-if="videoInfo && videoInfo.cover && isVideoReady" 
						id="myVideo" 
						:src="videoInfo.currentUrl" 
						:poster="trainVideoImgUrl+ videoInfo.cover"
						:initial-time="initialTime"
						:autoplay="shouldAutoPlay"
						enable-danmu 
						controls 
						style="width: 100%;" 
						@pause="onPause" 
						@timeupdate="onTimeupdate" 
						@ended="onEnded">
					</video>
			    </view>
			</view>
			<view class="video-info" :style="getItemBackgroundStyle('video-bj2.png')">
				<view class="video-title">
					<text>视频详情</text>
					<view class="title-line"></view>
				</view>
				<view class="info-detail">
					<view class="info-left" style="width: auto;">
						<view class="info-item">
							<image class="icon-img" :src="baseUrl+'/train/zs.png'" mode=""></image>
							<view class="info-label">
								分类：
							</view>
							<view class="info-value" :data-content="getCategoryLabelByValue(videoInfo.category,IndustrialData)">
								{{getCategoryLabelByValue(videoInfo.category,IndustrialData)}}/
								{{getCategoryLabelByValue(videoInfo.category2,domainData)}}/
								{{getCategoryLabelByValue(videoInfo.category3,occupationalData)}}
							</view>
						</view>
					</view>
				</view>
				<view class="info-detail">
					
					<view class="info-right">
						<view class="info-item">
							<image class="icon-img" :src="baseUrl+'/train/zs.png'" mode=""></image>
							<view class="info-label">
								等级：
							</view>
							<view class="info-value">
								{{getLevelLabelByValue(videoInfo.level)}}
							</view>
						</view>
						<view class="info-item">
							<image class="icon-img" :src="baseUrl+'/train/zs.png'" mode=""></image>
							<view class="info-label">
								讲师：
							</view>
							<view class="info-value">
								{{videoInfo.teacherName}}
							</view>
						</view>
					</view>
				</view>
				<view class="info-detail">
					<view class="info-left">
						<view class="info-item">
							<image class="icon-img" :src="baseUrl+'/train/zs.png'" mode=""></image>
							<view class="info-label">
								时长：
							</view>
							<view class="info-value">
								{{videoInfo.hour}}分钟
							</view>
						</view>
					</view>
					<view class="info-right">
						<view class="info-item">
							<image class="icon-img" :src="baseUrl+'/train/zs.png'" mode=""></image>
							<view class="info-label">
								发布时间：
							</view>
							<view class="info-value">
								{{videoInfo.uploadTime}}
							</view>
						</view>
					</view>
				</view>
				<view class="video-intro" :style="videoIntroBackgroundStyle('video-bj.png')">
					<view class="intro-title">
						<image class="intro-img1" :src="baseUrl+'/train/video-kc.png'" mode=""></image>
						<view class="title1">
							课程
						</view>
						<view class="title2">
							简介
						</view>
						<image class="intro-img2" :src="baseUrl+'/train/video-sc.png'" mode=""></image>
					</view>
					<view class="intro-content">
						 {{videoInfo.introduce}}
					</view>
				</view>
				<view class="video-title">
					<text>学习进度</text>
					<view class="title-line"></view>
				</view>
				<view class="progress-box">
					<progress :percent="videoInfo.percentage" activeColor="#30A0FF" backgroundColor="#B0DBFF"  stroke-width="6" border-radius="10" />
					<view class="progress-info">
						<view class="progress-left">
							已观看
						</view>
						<view class="progress-right">
							{{videoInfo.percentage}}%
						</view>
					</view>
				</view>
				<view class="video-title" v-if="videoInfo.trainClassList && videoInfo.trainClassList.length>0">
					<text>课程章节</text>
					<view class="title-line"></view>
				</view>
				<view class="chapter-box" v-if="videoInfo.trainClassList && videoInfo.trainClassList.length>0">
					<view class="chapter-item" :class="{ active: currentChapter === index}" @click="chapterChange(item,index)" v-for="(item ,index) in videoInfo.trainClassList" :key="index">
						<view class="chapter-left">
							<view class="chapter-number">
								{{ index + 1 }}
							</view>
							<view class="chapter-info">
								{{item.className}}
							</view>
						</view>
						<view class="chapter-icon" v-if="currentChapter === index">
							<uni-icons type="videocam" size="24"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			
		</view>
        
    </AppLayout>
</template>

<script setup>
import { inject, reactive,ref, onMounted, onUnmounted, nextTick ,watch} from 'vue';
import { onLoad,onHide,onUnload } from '@dcloudio/uni-app';
const { $api, navTo, navBack } = inject('globalFunction');
import config from "@/config.js"

// state
const title = ref('');
const videoId=ref('')
const userId=ref('')
const videoInfo=ref({})
const trainVideoImgUrl=config.trainVideoImgUrl
const categories=ref([])
const levalLabels=ref([])
const latestTime = ref(0)
const initialTime = ref(0)
const totalTime=ref(0)
const baseUrl = config.imgBaseUrl
const pageEnterTime = ref(0)
const currentChapter = ref(0)
const isVideoReady = ref(false)
const shouldAutoPlay = ref(false)
const getItemBackgroundStyle = (imageName) => ({
    backgroundImage: `url(${baseUrl}/train/${imageName})`,
    backgroundSize: '100% 100%',      // 覆盖整个容器
    backgroundPosition: 'center', // 居中
    backgroundRepeat: 'no-repeat'
});
const videoIntroBackgroundStyle = (imageName) => ({
    backgroundImage: `url(${baseUrl}/train/${imageName})`,
    backgroundSize: '100% 100%',      // 覆盖整个容器
    backgroundPosition: 'center', // 居中
    backgroundRepeat: 'no-repeat'
});
const params = reactive({
	videoId: '',
	userId: ''
})
const IndustrialData=ref([])
const domainData=ref([])
const occupationalData=ref([])
// 监听 initialTime 变化，确保设置完成后再渲染
watch(initialTime, (newVal) => {
	if (newVal >= 0 && videoInfo.value && videoInfo.value.cover) {
		// 延迟渲染，确保初始时间设置生效
		nextTick(() => {
			isVideoReady.value = true
			shouldAutoPlay.value = newVal > 0
		})
	}
})
// 监听 videoInfo 变化
watch([videoInfo, initialTime], ([newVideoInfo, newInitialTime]) => {
	if (newVideoInfo && newVideoInfo.cover && newInitialTime >= 0) {
		nextTick(() => {
			isVideoReady.value = true
			shouldAutoPlay.value = newInitialTime > 0
		})
	}
}, { deep: true })
onLoad((options) => {
	getHeart()
	pageEnterTime.value = Date.now() // 记录毫秒时间戳
	videoId.value=options.id
	getDictionary()
	getSearchType("-1",1)
});
// onHide(() => {
//     updateVideoInfo() // 用缓存值，不要调 getCurrentTime
// 	reportPageDuration()
// })
onUnload(() => {
    //updateVideoInfo()
	saveCurrentChapterProgress()
	reportPageDuration()
})
function getData() {
	params.videoId=videoId.value
	params.userId=userId.value
	$api.myRequest('/train/public/trainVideo/updateWatchCount',{videoId:videoId.value}).then((resData) => {
		console.log("视频更新次数成功")
	});
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	$api.myRequest('/train/public/trainVideo/model', params,'post',9100,header).then((resData) => {
		videoInfo.value=resData.data
		if(resData.data.category){
		  getSearchType(resData.data.category,2)
		}
		if(resData.data.category2){
		  getSearchType(resData.data.category2,3)
		}
		videoInfo.value.currentUrl=trainVideoImgUrl+videoInfo.value.trainClassList[0].url
		videoInfo.value.percentage=((videoInfo.value.process/(videoInfo.value.hour*60))*100).toFixed(2)
		videoInfo.value.uploadTime=videoInfo.value.uploadTime.split(' ')[0]
		if(videoInfo.value.process !=null){
			queryModelUserPlay(videoInfo.value.trainClassList[0].classId)
		} else {
			// 如果没有历史进度，直接准备渲染
			initialTime.value = 0
		}
		updateVideoInfo()
	});
}
function getHeart() {
	const raw = uni.getStorageSync("Padmin-Token");
	const token = typeof raw === "string" ? raw.trim() : "";
	const headers = token ? { Authorization: raw.startsWith("Bearer ") ? raw : `Bearer ${token}` }: {};
	$api.myRequest("/dashboard/auth/heart", {}, "POST", 10100, headers).then((resData) => {
      if (resData.code == 200) {
        getUserInfo();
      }
    });
}
function getUserInfo(){
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token')
	}
	$api.myRequest('/system/user/login/user/info', {},'get',10100,header).then((resData) => {
		userId.value=resData.info.userId
		getData()
	});
}
function getDictionary(){
	$api.myRequest('/system/public/dict/data/type/question_classification', {},'get',9100).then((resData) => {
		categories.value=resData.data
	});
	$api.myRequest('/system/public/dict/data/type/train_level', {},'get',9100).then((resData) => {
		levalLabels.value=resData.data
	});
}
function getSearchType(code,i){
	let header = {
		'Authorization': uni.getStorageSync('token')||'',
		'Content-Type': "application/x-www-form-urlencoded"
	};
	$api.myRequest('/system/public/dict/data/getByParentValue', {
		dictType: "video_level",
		dictParentValue: code,
		childFlag: "1",
	},'post',9100,header).then((resData) => {
		if(resData.code==200){
			if(i==1){
				IndustrialData.value=resData.data;
			}else if(i==2){
				domainData.value=resData.data;
			}else if(i==3){
				occupationalData.value=resData.data;
			}
		}
	});
  
}
function getCategoryLabelByValue(value,arr) {
	if (!Array.isArray(arr)) {
	    console.warn('categories 不是数组:', categories.value)
	    return ''
	  }
	  const item = arr.find(item => item.dictValue === String(value))
	  return item ? item.dictLabel : '暂无分类'
}
function getLevelLabelByValue(value) {
	if (!Array.isArray(levalLabels.value)) {
	    console.warn('levalLabels 不是数组:', levalLabels.value)
	    return ''
	  }
	  const item = levalLabels.value.find(item => item.dictValue === String(value))
	  return item ? item.dictLabel : '暂无等级'
}
function onPause(e){
	updateVideoInfo()
	saveCurrentChapterProgress()
}
function onEnded(e){
	updateVideoInfo()
	saveCurrentChapterProgress()
}
function onTimeupdate(e){
	latestTime.value = e.detail.currentTime
}
// function onSeeked(){
// 	updateVideoInfo()
// }
// 更新播放时长
function updateVideoInfo(){
	totalTime.value=0
	if(currentChapter.value>0){
		videoInfo.value.trainClassList.forEach((item,index)=>{
			if(index<currentChapter.value){
				totalTime.value+=Number(item.hour)
			}
		})
	}
	totalTime.value+=Number(latestTime.value)
	let paramsData={
		userId:userId.value,
		videoId:videoId.value,
		collect:'',
		process:Math.floor(Number(totalTime.value))
	}
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	
	$api.myRequest("/dashboard/auth/heart", {}, "POST", 10100, header).then((resData) => {
	  if (resData.code == 200) {
		if(videoInfo.value.isCollect===null && videoInfo.value.process ===null && paramsData.process ==0 ){
			$api.myRequest('/train/public/videoUser/add', paramsData,'post',9100,header).then((resData) => {
				console.log("视频播放时长更新成功")
			});
		}else{
			$api.myRequest('/train/public/videoUser/update', paramsData,'post',9100,header).then((resData) => {
				console.log("视频播放时长更新成功")
			});
		}
	  }
	})
}
// 计算并上报停留时长
function reportPageDuration() {
	const duration = Date.now() - pageEnterTime.value // 毫秒
	const durationSeconds = Math.floor(duration / 1000) // 转为秒
	if (durationSeconds > 0) {
		let paramsData={
			type:'video',
			hour:durationSeconds,
			videoId:videoId.value,
			userId:userId.value,
			title:videoInfo.value.videoTitle
		}
		let header={
			'Authorization':uni.getStorageSync('Padmin-Token'),
			'Content-Type': "application/x-www-form-urlencoded"
		}
		$api.myRequest('/train/public/userHour/add', paramsData,'post',9100,header).then((resData) => {
			console.log("学习时长更新成功")
		});
	}
}
function chapterChange(video,index){
	saveCurrentChapterProgress()
	currentChapter.value=index
	videoInfo.value.currentUrl=trainVideoImgUrl+video.url
	isVideoReady.value = false
	shouldAutoPlay.value = false
	queryModelUserPlay(video.classId)
}
const updateUserPlayClassHousr = (classId,hour) => {
	let paramsData={
		userId:userId.value,
		classId:classId,
		hour:hour,
		dqHour:latestTime.value
	}
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	$api.myRequest('/train/public/videoUser/updateUserPlayClassHousr', paramsData,'post',9100,header).then((resData) => {
		if(resData.code == 200){
			console.log("学习时长更新成功")
		}
	});
}
const queryModelUserPlay = (classId) => {
	let queryParams = {
		classId: classId,
		userId: userId.value,
	};
	let header = {
		Authorization: uni.getStorageSync("Padmin-Token"),
		"Content-Type": "application/x-www-form-urlencoded",
	};
	$api.myRequest("/train/public/videoUser/modelUserPlay", queryParams, "post", 9100, header).then((resData) => {
		if(resData.code == 200){
			initialTime.value=Number(resData?.data?.dqHour ?? 0)
		}else {
			initialTime.value = 0
		}
	}).catch(() => {
		initialTime.value = 0
	});
}

// 保存当前章节进度
function saveCurrentChapterProgress() {
	if (videoInfo.value.trainClassList && videoInfo.value.trainClassList.length > 0) {
		const currentVideo = videoInfo.value.trainClassList[currentChapter.value];
		if (currentVideo) {
			updateUserPlayClassHousr(currentVideo.classId, currentVideo.hour);
		}
	}
}
onUnmounted(() => {

});




</script>

<style lang="stylus" scoped>
.video-box{
	padding: 10rpx 20rpx;
}
.video-detail-container{
    width: 100%;
    background-color: #ffffff;
}

.video-wrapper{
    position: relative;
    width: 100%;
    background-color: #000000;
	height: auto;
}
.video-info{
	width:100%;
	margin-top:30rpx;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
}
.video-title{
	font-size: 32rpx;
	color: #404040;
	font-weight: bold;
	position: relative;
	margin-bottom: 40rpx;
}
.title-line{
	position: absolute;
	bottom: -10rpx;
	left: 36rpx;
	width: 60rpx;
	height: 8rpx;
	background: linear-gradient(90deg, #FFAD58 0%, #FF7A5B 100%);
	border-radius: 4rpx;
}
.info-detail{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 30rpx;
}
.info-left{
	width: 35%;
}
.info-right{
	width: 65%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.info-item{
	display: flex;
	align-items: center;
}
.icon-img{
	width: 24rpx;
	height: 28rpx;
	margin-right: 4rpx;
}
.info-label{
	font-weight: bold;
	font-size: 28rpx;
	color: #0068C8;
	min-width: 86rpx;
}
.info-value{
	font-size: 28rpx;
	color: #404040;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.video-intro{
	padding: 20rpx;
	margin-bottom: 30rpx;
}
.intro-title{
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}
.intro-img1{
	width: 36rpx;
	height: 30rpx;
	margin-right: 10rpx;
}
.intro-img2{
	width: 30rpx;
	height: 30rpx;
	margin-left: 10rpx;
}
.title1{
	font-size: 26rpx;
	font-weight: bold;
	color: #333333;
}
.title2{
	color: #077DF5;
	font-size: 26rpx;
	font-weight: bold;
}
.intro-content{
	font-size: 24rpx;
	color: #333333;
	line-height: 1.5;
}
.progress-box{
	background: linear-gradient(0deg, #DFEDFF 0%, #F8FCFF 100%);
	box-shadow: 0px 0px 10px 0px rgba(0,48,107,0.1);
	border-radius: 16rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 30rpx;
}
.progress-info{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 24rpx;
	color: #333333;
	margin-top: 20rpx;
}
.chapter-box{
	background: linear-gradient(0deg, #DFEDFF 0%, #F8FCFF 100%);
	box-shadow: 0px 0px 10px 0px rgba(0,48,107,0.1);
	border-radius: 16rpx;
	padding: 40rpx 30rpx;
}
.chapter-item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16rpx 24rpx;
	border-radius: 12rpx;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-bottom: 16rpx;
	border: 2rpx solid #F0F0F0;
	background: #F9F9F9;
}
.chapter-item.active {
  background-color: #e6f7ff;
  color: #409EFF;
}
.chapter-left{
	display: flex;
	align-items: center;
}
.chapter-number{
	width: 50rpx;
	height: 50rpx;
	background: #cccccc;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	font-weight: 500;
	margin-right: 16rpx;
	color: #fff;
}
.chapter-item.active .chapter-number {
  background: #409EFF;
  color: #fff;
}
.chapter-info {
    font-size: 28rpx;
    color: #303133;
}
</style>