<template>
  <div class='tabs-view-container'>
    <router-link class="tabs-view" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">
      <el-tag :closable="true" @close='closeViewTabs(tag,$event)'>
        {{tag.name}}
      </el-tag>
    </router-link>
    </div>
</template>

<script>
    export default {
      computed: {
        visitedViews() {
          return this.$store.state.app.visitedViews.slice(-6)
        }
      },
      methods: {
        closeViewTabs(view, $event) {
          this.$store.dispatch('delVisitedViews', view)
          $event.preventDefault()
        },
        addViewTabs() {
          this.$store.dispatch('addVisitedViews', this.$route.matched[this.$route.matched.length - 1])
        }
      },
      watch: {
        $route() {
          this.addViewTabs()
        }
      }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .tabs-view-container{
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
    .tabs-view{
      margin-left: 10px;
    }
  }

</style>