<template>
  <div class="tab">
    <div :class="{'li-parent':true,light:data.routerName === $store.state.nowTab}":key="data.routerName" v-for="data in tabList">
      <div class="tab-li" @click="toPath(data.routerName)">
        {{data.value}}
      </div>
      <i class="iconfont icon-close-b close-btn" v-if="!data.delNo" @click="delPath(data)"></i>
    </div>
  </div>
</template>

<script>
  export default {
    name: "tab",
    data () {
      return {
        tabList:this.$store.state.openedTab,
      }
    },
    mounted:function(){
    },
    methods:{
      toPath:function (name) {
        this.$router.push({name:name})
      },
      delPath:function (data) {
        let i = this.$store.state.openedTab.indexOf(data);
        this.$store.state.openedTab.splice(i,1)
        if(data.routerName === this.$store.state.nowTab)this.$router.push({name:this.$store.state.openedTab[i-1].routerName})
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .tab{
    padding: 2px 5px;
    background-color: @light-line;
    position: relative;
    .clear-both;
    .li-parent{
      float: left;
      margin: 5px;
      user-select:none;
      transition: all .3s;
      background: @gold-color;
      cursor: pointer;
      font-size: 14px;
      border-radius: 3px;
      position: relative;
      &.light{
        background: @gold-color-light;
      }
      .close-btn{
        position: absolute;
        top: -4px;
        right: -4px;
        transition: all .3s;
        color: @secondary-font-color;
        &:hover{
          transform: scale(1.5,1.5);
          top: -6px;
          right: -6px;
          color: red;
        }
      }
      .tab-li{
        padding: 5px 20px 5px 10px;
      }
    }
  }
</style>