<template>
  <div class="home-main">
    <!-- 面包屑 -->
    <!-- <template v-for="(tab, tab_idx) in navInfo.tab_list">
      <div class="page-main"
        v-if="tab.selected"
        :key="tab_idx"
      >
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item
            v-for="(breadcrumb, breadcrumb_idx) in tab.breadcrumb_list"
            :key="breadcrumb_idx"
          >{{breadcrumb.name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </template> -->
    <!-- 页面选项卡 -->
    <el-tabs
      type="border-card"
      closable
      size="mini"
      :value="navInfo.menu_current"
      @tab-click="clickPageTab"
      @tab-remove="delPageTab"
    >
      <el-tab-pane
        v-for="tab in navInfo.tab_list"
         size="mini"
         class="tab"
        :key="tab.router"
        :label="tab.name"
        :name="tab.router"
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import { Loading } from 'element-ui';
export default {
  name: 'Main-header',
  computed: {
    ...mapGetters('global', ['navInfo'])
  },
  methods: {
    ...mapActions('global', ['selectTab', 'closeTab']),
    // 切换选项卡
    clickPageTab(vueComponent) {
      console.log('vueComponent',vueComponent);
      let tab = {
        name: vueComponent.label,
        router: vueComponent.name,
        selected: true
      }
      let that = this
      let loading = Loading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, .7)'
      })
      that.selectTab(tab).then((router) => {
        that.$router.push({
          path: router
        }).then(
          loading.close()
        )
      })
    },
    // 删除选项卡
    delPageTab(tabName) {
      let that = this
      let loading = Loading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, .7)'
      })
      that.closeTab({tabName}).then(router => {
        that.$router.push({
          path: router
        }).then(
          loading.close()
        );
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.home-main {
  .page-main {
    padding: $spacing-normal $spacing-normal;
  }
}
.el-tabs__content {
  padding: 0;
}
.tab{
  font-size: 12px;
}
</style>