<template>
  <div class="app-wrapper">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <div v-show="treeShow" class="list" :style="{width: widthLeft+'px'}">
        <script-tree ref="scriptTree" :height="height" />
      </div>
      <drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
      <transition>
        <router-view @refresh="refresh" />
      </transition>
    </el-scrollbar>
  </div>
</template>
<script>
import ScriptTree from './category/tree';
import drapLeft from '@/views/components/drapLeft/index';

export default {
	name: 'Script',
	components: {
		ScriptTree,
		drapLeft
	},
	data() {
		return {
			treeShow: true,
			widthLeft: 450
		};
	},
	computed: {
		height() {
			return this.$store.state.app.height - 50;
		}
	},
	methods: {
		drapWidth(width) {
			this.widthLeft = Number(width);
		},
		refresh(data) {
			this.$refs.scriptTree.refresh(data);
		}
	}

};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";

  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .list {
    float: left;
  }
</style>
