<template>
  <div style="margin-left:10px; font-size: 1.2rem">
    <el-tabs
        v-model='selectedTabName'
        type='card'
        @tab-click='clickTab'
        @tab-remove='removeTab'
    >
      <el-tab-pane
          :closable = "item.name !== '0-0'"
          v-for='item in tabs'
          :key='item.name'
          :label='item.title'
          :name='item.name'
      >
        <el-row>
          <el-col :span="10" style="padding: 10px; font-weight: bolder">{{ item.title }}</el-col>
          <el-col :span="2" :offset ="12">
            <img src="@/../public/image/BKLogoSmall.png" alt="logo" style="width: 80px; height: 40px">
          </el-col>
        </el-row>
        <el-row>
          <el-scrollbar height="calc(100vh - 180px)">
            <router-view v-slot="{ Component }">
              <keep-alive><component :is="Component"/></keep-alive>
            </router-view>
          </el-scrollbar>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import  《组件名称》  from '《组件路径》 ';
import router from '@/router';

export default {

  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    // 这里存放数据
    return {

    }
  },
  // 计算属性 类似于 data 概念
  computed: {
    selectedTabName: {
      get() {
        return this.$store.state.tab.selectedTab
      },
      set(value) {
        this.$store.commit('setSelectedTab', value)
      }
    },
    tabs: {
      get() {
        return this.$store.state.tab.tabs
      },
      set(value) {
        this.$store.commit('setTabs', value)
      }
    },
    menuList: {
      get() {
        return this.$store.state.menu.menuList
      },
      set(value) {
        this.$store.commit('setMenuList', value)
      }
    }
  },
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 点击tab时触发
    clickTab(tabsPaneContext, event) {
      const tabName = tabsPaneContext.paneName
      const tabRouterInfo = this.menuList.filter(f => f.index === tabName)
      if(tabRouterInfo === undefined || tabRouterInfo === null || tabRouterInfo.length < 1) {
        router.push({ name: 'nullPage' })
      } else {
        router.push({ name: tabRouterInfo[0].router })
      }
    },
    removeTab(tabName) {
      if(tabName === '0-0') {
        return  // 主页不让关
      }
      this.tabs = this.tabs.filter(f => f.name !== tabName)
      const lastTab = this.tabs[this.tabs.length - 1]
      const tabRouterInfo = this.menuList.filter(f => f.index === lastTab.name)
      if(tabRouterInfo === undefined || tabRouterInfo === null || tabRouterInfo.length < 1) {
        router.push({ name: 'nullPage' })
      } else {
        this.$store.commit('setSelectedTab', lastTab.name)
        router.push({ name: tabRouterInfo[0].router })
      }
    },

  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  }
}
</script>

<style scoped>

</style>