<template>
	<div style="height: calc(100vh - 60px);">
		<el-row style="height: 100%;border-top: 2px solid #eee;" :gutter="20">
			
			<el-col :xl="19" :lg="19" :md="24" :sm="24" :xs="24" style="height: 100%;position: relative;border-right: 10px solid #eee;">
				<div style="position: absolute;top: 0px;left: 20px;z-index: 99;" class="hidden-lg-and-up" @click="treeSee">
					<i class="el-icon-s-unfold" style="font-size: 20px;" ></i>
				</div>
				<div style="width: 100%;height: 100%;position: relative;" v-if="videoPath == null">
					<!-- <img src="../../../assets/images/hysy.jpg"
						style="width: 40%;margin-top: 60px;position: absolute;left: 50%;transform: translateX(-50%);"
						alt="" /> -->
					<img src="../../../assets/images/xxbg1.png"
						style="width: 30%;margin-top: 60px;position: absolute;left: 50%;transform: translateX(-50%);"
						alt="" />
				</div>
				<div style="width: 100%;height: 100%;" v-else-if="fileType == 1 && videoPath != null">
					<div style="height: 100%;" v-loading="load">
						<div class="flex-ac-jc" style="height: 60px;font-weight: bold;font-size: 20px;">
							{{classInfo.VName}}
						</div>
						<div style="height: calc(100% - 100px)" v-if="!load">
							<play-video ref="video" :path="videoPath"
								:lastTime="classInfo.lookstatus == '0'?Number(classInfo.fenzhong):0" :classInfo="classInfo"
								:isFinish="classInfo.lookstatus == '0'?false : true" @seeOver="seeOver" @success="lookSuccess"></play-video>
						</div>
						<div class="flex-ac" style="height: 40px;color: #F56C6C;font-weight: bold;font-size: 16px;">
							注：切换视频将从0开始计时！！
						</div>
					</div>
				</div>
				<div style="width: 100%;height: 100%;" v-else-if="fileType ==2 && videoPath != null">
					<div style="height: 100%;" v-loading="load">
						<div class="flex-ac-jc" style="height: 60px;font-weight: bold;font-size: 20px;">
							{{classInfo.VName}}
						</div>
						<div style="height: calc(100% - 60px);width: 100%;">
							<vuePptx :src="videoPath"></vuePptx>
						</div> 
					</div>
				</div>
				<div style="width: 100%;height: 100%;" v-else-if="fileType == 3 && videoPath != null">
					<div style="height: 100%;" v-loading="load">
						<div class="flex-ac-jc" style="height: 60px;font-weight: bold;font-size: 20px;">
							{{classInfo.VName}}
						</div>
						<div style="height: calc(100% - 60px)" >
							<iframe :src="videoPath" style="width: 100%;height: 100%;"></iframe>
						</div> 
					</div>
				</div>
			</el-col>
			<el-col :xl="5" :lg="5" style="height: 100%;overflow-y: auto;padding-top: 10px;"
				class="classTree hidden-md-and-down">
				<el-tree :data="data" :default-expanded-keys="[0]" node-key="Id" v-loading="treeLoad"  @node-click="handleNodeClick">
					<span class="custom-tree-node" slot-scope="{ node, data }">
						<div style="display: flex;align-items: center;justify-content: space-between;padding-right: 10px;">
							<span>{{ data.VName }}</span>
							<span v-if="data.lookstatus != undefined && data.type == 1">{{data.Undef1}}分钟</span> 
						</div>
						<div style="width: 100%;margin-top: 10px;" v-if="data.lookstatus != undefined  && data.type == 1"> 
							<el-progress :percentage="getlooktime(data.lookstatus,data.fenzhong,data.Undef1)"></el-progress>
						</div>
						
					</span>
				</el-tree>
			</el-col>
		</el-row>
		<el-drawer title="课程讲解" append-to-body :visible.sync="treeShow" :direction="'ltr'">
			<el-tree :data="data" :default-expanded-keys="[0]" node-key="Id" v-loading="treeLoad"  @node-click="handleNodeClick">
				<span class="custom-tree-node" slot-scope="{ node, data }">
					<div style="display: flex;align-items: center;justify-content: space-between;padding-right: 10px;">
						<span>{{ data.VName }}</span>
						<span v-if="data.lookstatus != undefined && data.type == 1">{{data.Undef1}}分钟</span> 
					</div>
					<div style="width: 100%;margin-top: 10px;" v-if="data.lookstatus != undefined && data.type == 1"> 
						<el-progress :percentage="getlooktime(data.lookstatus,data.fenzhong,data.Undef1)"></el-progress>
					</div>
				</span>
			</el-tree>
		</el-drawer>
	</div>
</template>

<script>
	import playVideo from "./video.vue"
	import { getToken } from "@/utils/auth";
	import axios from "axios";
	import {
		getClassList,
		saveRecord,
	} from "@/api/jianliyuan/index"
	import Vue from "vue";
	export default {
		name: "Xuexi",
		props: {
			classData: {
				type: Object,
				default: null
			}
		},
		components: {
			playVideo
		},
		data() {
			return {
				data: [],
				defaultProps: {
					children: 'children',
					label: 'VName'
				},
				videoPath: null,
				baseUrl: process.env.VUE_APP_BASE_API,
				classInfo: null,
				treeShow: false,
				ti:null,
				load:false,
				treeLoad:false,
				fileType:null
			}
		},
		created() {
			this.getList(this.classData)
		},
		methods: {
			handleNodeClick(data) {
				if (data.VPath != undefined) {
					clearTimeout(this.ti)
					this.fileType = data.type
					this.classInfo = null
					this.load = true
					this.classInfo = data
					this.classInfo.personid = this.classData.personid
					this.videoPath = this.baseUrl + data.VPath
					this.ti = setTimeout(()=>{
						this.load = false
					},1000)
					this.getList(this.classData)
					// axios({
					// 	url: '/dev-api/system/ClassVideo/getVideoSrc?id='+data.Id, // 替换为实际的API地址
					// 	method: 'GET',
					// 	responseType: 'blob', // 重要！设置响应类型为blob
					// 	headers:{
					// 		"Authorization":"Bearer " + getToken()
					// 	}
					//   })
					//   .then((response) => {
					// 	console.log(response)
					// 	this.videoPath = URL.createObjectURL(response.data)
					//   })
					//   .catch((error) => {
						
					//   });
				}
			},
			//查询已报名继续教育课程列表
			getList(v) {
				this.treeLoad = true
				getClassList({
					classIdList: v.classIdList,
					personId: v.personid
				}).then(res => {
					let index = 0
					this.data = []
					for (let i in res.data) {
						let obj = {
							VName: i,
							Id: index,	
							allNum: res.data[i].filter(obj => obj.lookstatus != undefined).length,
							studyNum: res.data[i].filter(obj => obj.lookstatus != undefined && obj
								.lookstatus != '0').length,
							children: res.data[i]
						}
						Vue.set(this.data, index, obj)
						index++
						// this.data.push(obj)
					}
					this.treeLoad = false
				})
			},
			//视频观看完成
			seeOver(e) {
				if (e == true) {
					this.data = []
					this.getList(this.classData)
				}

			},
			treeSee(){ 
				this.treeShow = true
			},
			getlooktime(v,yxsj,zsc){
				if(v == 0 &&yxsj == null){
					return 0
				}else if(v == 0 &&yxsj != null){ 
					return Math.floor((Number(yxsj)/60/Number(zsc))*100)
				}else if(v != 0 ){
					return 100
				}
				
				// return `(已学习：${ysfz%60==0?ysfz/60+':00':Math.floor(ysfz/60)+':'+(ysfz%60<10?'0'+(ysfz%60):ysfz%60)},未学习：${wsfz%60==0?wsfz/60+':00':Math.floor(wsfz/60)+':'+(wsfz%60<10?'0'+(wsfz%60):wsfz%60)})`
				
			},
			lookSuccess(e){
				this.getList(this.classData)
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .custom-tree-node{
		font-size: 16px;
	}
	::v-deep .el-tree-node__children .custom-tree-node{
		font-size: 14px !important;
		height: auto!important;
		border: 1px solid #ccc;
		padding: 10px;
		border-radius: 4px;
		width: 100% !important;
	}
	::v-deep .el-tree-node__children .el-tree-node{
		height: auto!important;
		margin-top: 10px;
		
	}
	::v-deep  .el-tree-node__children .el-tree-node__content{
		height: auto !important;
		padding-left: 0px  !important;
		margin-left: 18px !important;
	}
	::v-deep .el-tree-node__children .el-tree-node__content .is-leaf{
		display: none !important;
	}
</style>