<template>
  <div class="rxBreadcrumb">
    <!-- <div class="item item-icon icon-w">
        <a-icon type="left" @click="toLeft"/>
    </div> -->
    <div class="box">
      <div class="box-in">
        <template v-for="(item,index) in menuTabs">
          <el-tag :closable ="item.name == 'home'?false:true" :class="['item',{active:item.name == routerName}]" @click="handlerClick(item)" @close="closeItem(item)">
            <span class="title">{{item.title}}</span>
            <!--                        <i class="icon el-icon-error" />-->
          </el-tag>
        </template>
      </div>

    </div>

    <!-- <div class="item item-icon icon-w" id="right" @click="toRight">
        <a-icon type="right" />
    </div> -->
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: "rxBreadcrumb",
  watch: {
    routerName:{
      handler(newValue, oldValue){
        //处理视窗
        this.$nextTick(target=>{
          this.slide();
        })
      }
    }
  },
  methods:{
    closeItem(item){
      console.log(item)
      if(item.name == this.routerName){
        this.$router.go(-1)
      }
      this.$store.dispatch('deleteMenu',item)
    },
    handlerClick(item){
      this.$router_(item)
      this.slide()
    },
    slide(){
      let elmnt = this.$el.getElementsByClassName('active');
      if(elmnt){
        elmnt[0].scrollIntoView({behavior :'smooth'});
      }
    },

  },
  computed: {
    ...mapGetters(['menuTabs']),
    title() {
      return this.$route.meta.title
    },
    routerName(){
      return this.$route.name
    }
  },
  mounted() {

    this.slide()
  }
}
</script>

<style scoped lang="less">
.rxBreadcrumb {
  display: flex;
  align-items: center;
  width: 100%;
  height: 35px;
  background-color: white;
  border-top:1px solid #eeeeee;
  border-bottom:1px solid #eeeeee;
  position: relative;

  .box{
    /*border: 1px solid black;*/
    width:100%;
    // width:calc(100% - 64px);
    overflow: auto;
    height:35px;
    line-height: 30px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 30px;
    .item{
      border-radius: 3px;
      /*height: 25px;*/

      display: inline-block;
      position: relative;
      cursor: pointer;
      height: 26px;
      line-height: 26px;
      border: 1px solid #d8dce5;
      color: #495060;
      background: #fff;
      padding: 0 8px;
      font-size: 13px;
      margin-left: 5px;
      margin-top: 4px;
      /deep/ .el-tag__close{
        color: #000;
        &:hover{
          background: grey;
          color:#ffffff;
        }
      }
      &:first-of-type {
        margin-left: 15px;
      }
      &:last-of-type {
        margin-right: 15px;
      }
      &.active {
        /deep/ .el-tag__close{
          color: #fff;
        }
        background-color: #42b983;
        color: #fff;
        border-color: #42b983;
        &::before {
          content: '';
          background: #fff;
          display: inline-block;
          width: 9px;
          height: 9px;
          border-radius: 50%;
          position: relative;
          margin-right: 4px;
        }
      }

    }
    .box-in{
      display: flex;
      align-items: center;
      position: absolute;
    }
  }
  .box::-webkit-scrollbar {/*滚动条整体样式*/
    height: 0px;
  }
  .box:hover::-webkit-scrollbar {/*滚动条整体样式*/
    height: 4px;
  }
  #right{
    position: absolute;
    top:3px;
    right: 0px;
  }

  .item-icon{
    padding: 0 3px;
  }
  .active{
    color: #1890ff;
    background: #e6f7ff;
    border-color: #91d5ff;
  }

  .rxBreadcrumb-item{
    margin-left: 20px;
  }
}

</style>
