<template>
  <div>
    <!--左侧树-->
    <div>
      <div
        v-show="isTree"
        class="position-left"
        :style="treeStyleObj"
      >
        <el-card shadow="never" class="card_tree clearfix">
          <div slot="header">
            <span>{{title}}</span>
            <el-button style="float: right;padding: 3px 0" type="text" @click="_refresh">
              <i class="el-icon-refresh" style="font-size: 20px"></i>
            </el-button>
          </div>
          <div>
            <slot name="tree"/>
          </div>
        </el-card>
      </div>
      <div
        v-if="isTree"
        style="position: absolute;left: 196px;top: 50%;cursor:pointer"
        @click="_treeHide"
      >
        <div class="navbarImgShow"></div>
      </div>
      <div
        v-else
        style="position: absolute;left:0;top: 50%;cursor:pointer"
        @click="_treeShow"
      >
        <div class="navbarImgHide"></div>
      </div>
    </div>
    <!--右侧列表-->
    <div class="position-right" :style="tableStyleObj">
      <slot name="cont"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: ['title'],
  data() {
    return {
      treeStyleObj: {
        width: '210px',
        height: ''
      },
      tableStyleObj: {
        'margin-left': '210px'
      },
      isTree: true
    }
  },
  methods: {
    // tree
    _treeHide() {
      this.isTree = false
      this.tableStyleObj.marginLeft = '10px'
    },
    _treeShow() {
      this.isTree = true
      this.tableStyleObj.marginLeft = '210px'
    },
    _refresh() {
      this.$emit('on-result-change')
    }
  }
}
</script>
