<template>
  <el-container id="app-container" direction="vertical">
    <el-tabs class='hidcon' 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.name" :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 size="mini" trigger="click">
      <el-button>
        <i class="el-icon-arrow-down"></i>
      </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 > .el-tabs {
  height: 100%;
  width: 100%;
  position: relative;
}

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

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

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

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

#app-container > .el-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 .el-dropdown {
  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>
