<template>
	<div style="height: calc(100vh - 120px);">
		<el-row style="height: 100%;">
			<el-col :span="5" style="height: 100%;border-right: 2px solid #55ffff;overflow-y: auto;" class="classTree">
				<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
			</el-col>
			<el-col :span="19" style="height: 100%;">
				<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="" />
				</div>
				<div style="width: 100%;height: 100%;" v-else>
					<play-video :path="videoPath"></play-video>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import playVideo from "./video.vue"
	import { getClassList } from "@/api/jianliyuan/index"
	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
			}
		},
		created() {
			this.getList(this.classData)
		},
		methods: {
			handleNodeClick(data) {
			    console.log(data)
				this.videoPath = this.baseUrl+data.VPath
				console.log(this.videoPath)
			},
			//查询已报名继续教育课程列表
			getList(v){
				getClassList({classIdList:v.classIdList,personId:v.personid}).then(res=>{
					for(let i in res.data){
						let obj = {
							VName:i,
							children:res.data[i]
						}
						this.data.push(obj)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
</style>