<template>
  <div class='multiple_tag'>
    <el-tabs
      v-model='curTag'
      :class="['tag-tabs', 'tag-tabs-style-' + curTheme]"
      type='card'
      @tab-click='tabClick'
      @tab-remove='tabRemove'
    >
      <el-tab-pane
        v-for='item in multipleTag'
        :closable='homeClosable(item)'
        :key='item.id'
        :label='item.meta.name'
        :name='item.path'
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { routeWithParams } from '@utils/tag';

export default {
  name: 'MultipleTag',
  data() {
    return {};
  },
  computed: {
    multipleTag() {
      return this.$store.getters.multipleTag;
    },
    curTag: {
      get() {
        return this.$store.getters.curTag;
      },
      set() {
      }
    },
    curTheme() {
      return this.$store.getters.curTheme;
    }
  },
  methods: {
    tabClick(tab, event) {
      let path = tab.name;
      this.$store.dispatch('setCurTag', path);
      if (routeWithParams.includes(path)) {
        let id = this.$route.query.id;
        if (id) {
          localStorage.setItem(path, id);
        }
        this.$router.push({ path: path, query: { id: localStorage.getItem(path) } });
      } else {
        this.$router.push(path);
      }
    },
    tabRemove(name) {
      const vm = this;
      const index = this.multipleTag.findIndex((item) => item.path === name);
      const toRouter = this.multipleTag[index - 1];
      this.multipleTag.splice(index, 1);
      this.$store.dispatch('setMultipleTag', this.multipleTag).then(() => {
        if (name === vm.$route.path) {
          vm.$store.dispatch('setCurTag', toRouter.path);
          vm.$router.push(toRouter.path);
        }
      });
    },
    homeClosable(item) {
      if (item.path === '/home') {
        return false;
      } else {
        return true;
      }
    }
  },
  mounted() {
  }
};
</script>

<style scoped lang='less'>
.multiple_tag {
  position: relative;
  z-index: 1;

  :deep(.tag-tabs) {
    &.el-tabs {
      .el-tabs__header {
        margin: 0;
        border: none;

        .el-tabs__nav-wrap {
          &.is-scrollable {
            padding: 0 50px;
          }

          .el-tabs__nav {
            border: none;

            .el-tabs__item {
              border: none;
              margin-bottom: -1px;
              position: relative;
              z-index: 1;
              border-bottom: none !important;
              color: #fff;
              opacity: 0.7;
              font-weight: normal;

              &.is-active {
                opacity: 1;
                border-radius: 6px 6px 0 0;
                position: relative;
                font-weight: bold;

                &::after {
                  content: '';
                  display: block;
                  position: absolute;
                  bottom: 2px;
                  height: 3px;
                  width: calc(100% - 60px);
                  border-radius: 8px;
                  background: #fff;
                }
              }
            }
          }

          .el-tabs__nav-prev,
          .el-tabs__nav-next {
            box-sizing: border-box;
            width: 50px;
            line-height: inherit;
            height: 100%;
            padding: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: @theme-gray-color;
            font-size: 16px;

            &:hover {
              color: @theme-black-color;
            }
          }
        }
      }
    }
  }
}
</style>
