<template>
  <div class="app-wrapper">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <div v-show="treeShow" class="list" :style="{width: widthLeft+'px'}">
        <script-tree ref="tree" :height="height" />
      </div>
      <drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
      <transition>
        <router-view />
      </transition>
    </el-scrollbar>
  </div>
</template>
<script>
    import ScriptTree from './category/tree';
    import drapLeft from '@/views/components/drapLeft/index';
    import WindowResizeHandler from '@/mixin/WindowResizeHandler';
    export default {
        name: 'Script',
        components: {
            ScriptTree,
            drapLeft
        },
        mixins: [WindowResizeHandler],
        data() {
            return {
                height: 0,
                treeShow: true,
                widthLeft: 450
            };
        },
        methods: {
            resizeHandler() {
                this.height = this._clientHeight - 50;
            },
            drapWidth(width) {
                this.widthLeft = Number(width);
            },
            // refresh(filterSelect) {
            //     this.$refs && this.$refs.tree && this.$refs.tree.refresh(filterSelect);
            // }
        }
    }
</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>