<template>
  <div>
    <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-125) +'px' }">
      <el-tree
        ref="tree"
        :data="treeList"
        node-key="id"
        :props="defaultProps"
        highlight-current
        :span="22"
        :filter-node-method="filterNode"
        :default-expanded-keys="expandList"
        @node-click="clickEvent"
      />
    </el-scrollbar>
    <transition>
      <router-view :style="{ position:'relative', left:widthLeft+'px', width: (width - widthLeft)+'px'}" :product-list="productList" />
    </transition>
  </div>
</template>

<script>
import { getLessonTree } from '@/api/jmap/lessondraft';
export default {
	name: 'LessonDetail',
	data() {
		return {

		};
	},
	computed: {
		width() {
			return this.$store.state.app.width - 481 - this.widthLeft;
		},
		height() {
			return this.$store.state.app.height - 90;
		}
	},
	mounted() {
		this.initPageData();
	},
	methods: {
		initPageData() {
			getLessonTree(this.$route.query.lessonId);
		}
	}
};
</script>
