<template>
  <el-container style="height: 100%; border: 1px solid #eee">
    <split-pane :min-percent='minPercent' :default-percent='defaultPercent' split="vertical">
      <template slot="paneL">
        <el-header class="header-menu">
          <header-menu></header-menu>
        </el-header>
        <left-menu class="left-menu"></left-menu>
      </template>
      <template slot="paneR">
        <el-header class="header-main">
          <header-main></header-main>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </template>
    </split-pane>
    <el-footer height="40px" v-show="showFooterView">
      <footer-view></footer-view>
    </el-footer>
  </el-container>

</template>

<script>
import HeaderMain from '@/components/HeaderMain'
import HeaderMenu from '@/components/HeaderMenu'
import LeftMenu from '@/components/LeftMenu'
import FooterView from '@/components/FooterView'

export default {
  components: {
    FooterView,
    HeaderMain,
    HeaderMenu,
    LeftMenu
  },
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      showFooterView: true,
      defaultPercent: 20,
      minPercent: 10,
      tableData: Array(10).fill(item)
    }
  },
  created() {
    this.disableEvent()
  },
  methods: {
    disableEvent() {
      this.$nextTick(() => {
        // 禁用右键
        document.oncontextmenu = new Function("event.returnValue=false");
        // 禁用选择
        document.onselectstart = new Function("event.returnValue=false");
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
$headerHeight: 60px;
$footerHeight: 40px;

.el-header {
  color: #333;
  height: $headerHeight!important;
  line-height: $headerHeight;
}

.header-menu {
  background-color: #084699;
}

.header-main {
  text-align: right;
  background-image: linear-gradient(to right, #075dce, #3d92fc);
}

.splitter-paneL {
  background-color: #e5effb;
  padding-right: 0 !important;
}

.splitter-paneR {
  padding-left: 0 !important;
}

.splitter-pane-resizer {
  background: none !important;
}

.el-footer {
  padding: 0;
  height: $footerHeight!important;
  background-color: #2c3e50;
}

.left-menu {
  height: calc(100vh - $headerHeight - $footerHeight);
  overflow: auto;
}
</style>