<template>
  <div class="page-tags">
    <div
      v-for="t in tags"
      :key="t.id"
      class="page-tag"
      :class="{ active: activeTag === t.name }"
      @click="switchTag(t)">
      <span class="page-tag-title">{{ t.title }}</span>
      <span
        v-if="t.name !== DEFAULT_DASHBOARD"
        class="page-tag-close"
        @click.stop="closeTag(t)">
        <i class="el-icon-close"></i>
      </span>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { DEFAULT_DASHBOARD } from '@/router'

export default {
  name: 'pageTags',
  data() {
    return {
      DEFAULT_DASHBOARD
    }
  },
  computed: {
    ...mapState('tags', ['tags', 'activeTag']),
    ...mapGetters('tags', ['currentTag'])
  },
  methods: {
    switchTag(t) {
      if (this.$route.path === t.path) return
      this.$store.commit('tags/setActive', t.name)
      this.$router.push(t.path)
    },
    closeTag(t) {
      this.$store.commit('tags/remove', t.name)
      if (this.currentTag) {
        // 切换到前一个标签页
        if (this.$route.fullPath !== this.currentTag.path) {
          this.$router.push({
            path: this.currentTag.path
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.page-tags {
  display: flex;
  padding-left: 10px;
  align-items: center;
}

.page-tag {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 8px;
  line-height: 30px;
  line-height: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background-color: #f5f5f5;
  }

  &:not(:last-child) {
    &:after {
      content: '';
      position: absolute;
      right: 0;
      top: 15px;
      bottom: 15px;
      border-right: solid 1px #ddd;
    }
  }

  &.active {
    background-color: #1565c0;
    color: #fff;
    border: 1px solid #1565c0;
  }
}

.page-tag:not(:last-child) {
  margin-right: 6px;
}

.page-tag-close {
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;

  &:hover {
    background-color: #fff;
    color: #409eff;
  }
}

.page-tag-title {
  margin-right: 6px;
}
</style>
