<template>
    <div style="height: 100%">
        <el-tabs style="height: 100%" v-model="editableTabsValue" type="border-card" class="dw-tabs" :class="toggleMenu? '' : 'dw-tabs-left'" @tab-click="tabClick"
            @tab-remove="tabRemove">
            <el-tab-pane :key="index" v-for="(item, index) in headerTabs" :label="item.name" :name="index.toString()" :closable="index !== 0">
                <div style="height: 100%"></div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
  export default {
    name: '',
    components: {},
    props: {},
    data() {
      return {
        editableTabsValue: this.$store.state.globalStore.activeTabIndex.toString(),
        editableTabsValueInt: this.$store.state.globalStore.activeTabIndex,
        menuData: []
      }
    },
    computed: {
      headerTabs() {
        const common_data = this.getCommonData()
        common_data.forEach(item => {
          this.$store.state.globalStore.headerTabs.forEach(tab => {
            if ('/' + item.index === tab.path) {
              tab.name = item.caption ? item.caption : item.title
            }
          })
        })
        return this.$store.state.globalStore.headerTabs
      },
      toggleMenu() {
        return this.$store.state.globalStore.toggleMenu
      },
      activeTabIndex() {
        return this.$store.state.globalStore.activeTabIndex
      }
    },
    created() {},
    mounted() {
    },
    methods: {
      getCommonData() {
        const arr = []
        if (sessionStorage.menu) {
          const data = JSON.parse(sessionStorage.menu)
          data.forEach(item => {
            item.subs.forEach(sub => {
              sub.data.forEach(child => {
                arr.push(child)
              })
            })
          })
          sessionStorage.subs_menu = JSON.stringify(arr)
          return arr
        } else {
          // this.$alert('登录信息缓存失效，请重新登录！', '提示', {
          //   dangerouslyUseHTMLString: true,
          //   type: 'error'
          // }).then(() => {
          //   this.$store.commit('del_token')
          //   sessionStorage.removeItem('menu')
          //   sessionStorage.removeItem('login_data')
          //   this.$router.push('/login')
          // }).catch(_ => {
          //   this.$store.commit('del_token')
          //   sessionStorage.removeItem('menu')
          //   sessionStorage.removeItem('login_data')
          //   this.$router.push('/login')
          // })
        }
      },
      tabClick(el) {
        this.$store.commit('changeActiveTabIndex', { that: this, index: el.name })
      },
      tabRemove(targetName) {
        this.$store.commit('deleteHeaderTab', { that: this, index: targetName })
      }
    },
    updated() {},
    watch: {
      '$store.state.globalStore.activeTabIndex': function(val) {
        this.editableTabsValue = val.toString()
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scope>
.dw-tabs {
  position: absolute;
  left: 230px;
  top: 68px;
  right: 0;
  margin: 0 10px 10px 0;
}
.dw-tabs-left {
  left: 110px !important;
}
</style>
