<template>
  <el-container id="app-container" direction="vertical">
    <el-tabs class='app-container__tabs' v-model="$tabView.active" type="card" @tab-remove="$tabView.removeView($event)">
      <el-tab-pane class="app-main" v-for="(item) in $tabView.viewList" :key="item.key" :label="item.name" :name="item.name" :closable='item.path!=="/"'>
        <tab-view :path="item.path" :props-data="item.propsData"/>
      </el-tab-pane>
    </el-tabs>

    <el-dropdown class="app-container__viewsCtrl" size="mini" trigger="click">
      <el-button>
        <i class="el-icon-arrow-down"/>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="$tabView.removeOther()">关闭其它</el-dropdown-item>
        <el-dropdown-item @click.native="$tabView.removeBefore()">关闭左侧</el-dropdown-item>
        <el-dropdown-item @click.native="$tabView.removeAfter()">关闭右侧</el-dropdown-item>
        <el-dropdown-item @click.native="$tabView.removeAll()">关闭全部</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

  </el-container>
</template>

<script>
  import {mapGetters} from "vuex";

  export default {
    name: "Container",
    componentName: "Container",
    components: {},
    data() {
      return {};
    },
    methods: {
      formatQueryCode(code) {
        let title;
        this.$store.state.base.queryDesign.forEach((value, index) => {
          if (value.queryname === code) title = value.querytitle;
        });
        return title;
      }
    }
  };
</script>

<style>
  #app-container {
    padding: 6px;
    position: relative;
    width: 100%;
  }

  #app-container > .app-container__tabs {
    height: 100%;
    width: 100%;
    position: relative;
  }

  #app-container .app-container__tabs > .el-tabs__header {
    margin: 0px;
    padding-right: 30px;
    height: 30px;
  }

  #app-container > .app-container__tabs > .el-tabs__content {
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    padding-top: 30px;
    width: 100%;
    top: 0;
  }

  #app-container > .app-container__tabs > .el-tab-pane {
    height: 100%;
  }

  #app-container > .app-container__tabs > .el-tabs__content {
    border-right: 1px solid #e4e7ed;
    border-bottom: 1px solid #e4e7ed;
    border-left: 1px solid #e4e7ed;
  }

  #app-container > .app-container__tabs > .el-tabs__content > .el-tab-pane {
    padding: 6px;
    height: 100%;
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    box-sizing: border-box;
  }

  #app-container .app-container__viewsCtrl {
    position: absolute;
    right: 12px;
    top: 10px;
  }

  #app-container .contextmenu {
    margin: 0;
    background: #fff;
    z-index: 100;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  }

  #app-container .contextmenu li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
  }

  #app-container .contextmenu li:hover {
    background: #eee;
  }
</style>
