<template>
	<view class="content">
		<view class="video">
			<video id="myVideo" :src="courseInfo.filePathOss" :poster="courseInfo.fileFirstImage" object-fit="contain" :title="courseInfo.fileTitle"
				:initial-time="viewTime" title="11" @play="playVideo" @pause="pause" @timeupdate="timeupdate"
				style="width: 100vw;height: 500rpx;"></video>
		</view>
		<scroll-view id="scrollView" scroll-y="true" :style="{height:scrollViewHeight+'px'}"
			@scrolltolower="scrolltolower">
			<view class="videoDetailBox">
				<view class="videoTitleBox">
					<view>
						{{courseInfo.fileTitle}}
					</view>
					<view class="iconBottom">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				<view class="videoUser">
					<view class="videoUserImage">
						<image :src="lecturerInfo.lecturerUrl" style="height: 70rpx;border-radius: 200rpx;" mode="aspectFit"></image>
					</view>
					<view class="videoUserContent">
						<view class="videoUserName">
							{{lecturerInfo.lecturerName}}
						</view>
						<!-- <view class="videoUserRank">
							高级讲师
						</view> -->
					</view>
				</view>
				<view class="videoDetail">
					<view style="color: #414141;" v-html="courseInfo.fileIntroduce"></view>
				</view>
				
			</view>
			<view style="border-top: 1rpx solid #eee;">
					
			</view>
			<view class="relatedVideoBox">
				<view class="tagBox">
					<view class="tagItem">
						相关视频
					</view>
				</view>
				<view class="relatedVideoList">
					<view class="relatedVideoItem" v-for="item in 10">
						<view style="width: 46.5vw;">
							<image style="height: 25vw;border-radius: 16rpx;" src="../../static/images/irrNavBg.jpg"
								mode="aspectFill"></image>
						</view>
						<view class="relatedVideoTitle">
							这是一个标题················
						</view>
					</view>
				</view>
				<uni-load-more iconType="circle" :status="moreStatus"></uni-load-more>
			</view>
		</scroll-view>


	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from "vue";
	import api from "@/api/api";
	import { cffpURL } from "@/environments/environment";
	import common from '../../common/common';
	import { onLoad, onPageScroll } from "@dcloudio/uni-app";

	let windowHeight = ref(0);
	let scrollViewHeight = ref(0);

	// more/loading/noMore
	let moreStatus = ref('more');

	let userId = ref('');
	let videoId = ref('');
	let courseInfo = ref({
		filePathOss: '',
		fileFirstImage: '',
		fileTitle:'',
		fileIntroduce:''
	});
	let lecturerInfo = ref({
		lecturerUrl:'',
		lecturerName:'',
		lecturerIntroduce:''
	});


	//滑动到底事件
	const scrolltolower = res => {
		if (moreStatus.value != 'loading') {
			moreStatus.value = 'loading';
		}
	}

	//增加访问记录
	const accessLogSave = () => {
		api.accessLogSave({

			"userId": userId.value, "sessionId": 'sessionId',
			"accessUrl": cffpURL + "/myPackageA/videoProject/videoDetail?videoId=" + videoId.value, "accessType": 'cffpVideo', businessId: videoId.value, remark: '视频播放'

		}).then(res => {
			if (res['success']) {

			}
		});
	}
	//查询课程详情
	const loadCourseDetail = () => {
		api.courseDetail({
			fileId: videoId.value,
			userId: userId.value,
		}).then(res => {
			if (res['success']) {
				courseInfo.value = res['data']['data'];
				lecturerQuery(res['data']['data']['fileLecturerId']);
				// relatedCoursesList();
				// if (uni.getStorageSync('h5_coursesharing')) {
				// 	coursesharing = uni.getStorageSync('h5_coursesharing')
				// 	getshareData()
				// }
				// if (courseInfo.status == 2) {
				// 	findVideoPlayback();
				// } else {
				// 	isRenderVideo = true;
				// }
			}
		})
	}
	// 讲师信息查询
	const lecturerQuery = (fileLecturerId) => {
		api.lecturerQuery({
			id: fileLecturerId
		}).then(res => {
			if (res['success']) {
				lecturerInfo.value = res['data']['lecturerInfos'][0];
			} else {
				uni.showToast({
					title: res['message'],
					duration: 2000,
					icon: 'none'
				})
			}
		})
	}
	onLoad(option => {
		//视频Id
		videoId.value = option.videoId;
		//用户Id
		userId.value = uni.getStorageSync('cffp_userId');
		accessLogSave();
		loadCourseDetail();
	})
	onMounted(() => {
		//窗口高度
		windowHeight.value = uni.getSystemInfoSync().windowHeight;
		//元素距离顶部距离
		uni.createSelectorQuery().select('#scrollView').boundingClientRect(data => {
			scrollViewHeight.value = windowHeight.value - data['top'];
		}).exec();
	})
</script>

<style lang="scss">
	.content {
		color: #000;
		.videoDetailBox {
			padding:15rpx 25rpx 0rpx 25rpx;
			position: relative;
			.videoTitleBox {
				font-weight: 600;
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.iconBottom{
					transform:rotate(90deg) ;
				}
			}
			.videoUser{
				display: flex;
				align-items: center;
				margin: 20rpx 0 10rpx 0 ;
				.videoUserContent{
					// .videoUserRank{
					// 	background: #5359CD;
					// 	border-radius: 10rpx;
					// 	color: #fff;
					// 	padding: 4rpx 20rpx;
						
					// }
					.videoUserName{
						padding-bottom: 20rpx;
					}
				}
				.videoUserImage{
					width:70rpx;
					margin-right: 15rpx;
					
				}
			}
		}

		.relatedVideoBox {
			.tagBox {
				display: flex;
				justify-content: center;

				.tagItem {
					padding: 20rpx 0;
					font-size: 32rpx;
					color: #ff5e84;
					border-bottom: 6rpx solid #ff5e84;
				}
			}

			.relatedVideoList {
				display: flex;
				flex-wrap: wrap;
				gap: 3vw;
				padding: 2vw;

				.relatedVideoItem {
					width: 46.5vw;

					.relatedVideoTitle {
						font-size: 30rpx;
						overflow: hidden;
					}
				}
			}
		}
	}
</style>