<template>
  <el-container>
    <el-header class="empty-header">
      <!--标题-->
      <div class="title">
        <span>数据质量检测系统</span>
      </div>
      <el-menu :default-active="key" class="empty-menu" mode="horizontal" @select="handleSelect">
        <el-menu-item index="/emport">数据导入</el-menu-item>
          <el-menu-item index="/field">元字段管理</el-menu-item>
        <el-menu-item index="/rule">规则管理</el-menu-item>
          <el-menu-item index="/area">区域管理</el-menu-item>
        <el-menu-item index="/datasource">数据源管理</el-menu-item>
      </el-menu>
      <!--快捷功能操作区-->
      <div v-if="false" class="operator">
        <el-button @click="openApi">API文档</el-button>
        <el-button @click="openConsole">MinIO控制台</el-button>
      </div>
    </el-header>
    <el-main class="empty-main">
      <section class="empty-layout">
        <transition mode="out-in" name="fade-transform">
          <router-view :key="key"/>
        </transition>
      </section>
    </el-main>
  </el-container>
</template>

<script>
import WindowUtil from '@/utils/document/WindowUtil'

export default {
  name: 'EmptyLayout',
  computed: {
    key() {
      return this.$route.path
    }
  },
  data(){
    return {

    }
  },
  methods:{
    openApi(){
      WindowUtil.open("http://localhost:28081/doc.html")
    },
    openConsole(){
      WindowUtil.open(this.getProtocol()+"9001")
    },
    handleSelect(key){
      this.$router.push({
        path:key
      })
    },
      getProtocol(){
        const location = window.location
         let port = location.port
          let origin = location.origin
          let index = origin.indexOf(port)
          return origin.substring(0,index) + origin.substring(index + port.length+4,origin.length)
      },
  }
}
</script>

<style lang="scss" scoped>
.empty-header{
  display: flex;
  align-items: center;
  border-bottom: solid 1px #e6e6e6;
  .title{
      font-weight: bold;
      width: 170px;
      font-size: 20px;
  }
  .operator{
    width: 200px;
  }
  .empty-menu{
    flex: 1;
  }
}
.empty-layout {
  //min-height: calc(100vh - 76px);

}
.empty-main{
  height: calc(100vh - 60px);
  padding: 8px;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
