<template>
  <div class="tags-wrapper">
    <div class="swiper-container tags-li">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide tags-item"
            :class="{ active: item.visiable }"
            v-for="(item, index) in tagData"
            :key="index"
            @click="handleTagClick(index)">
              <a href="javascript:;"  class="tags-item-title"><i class="iconfont" v-if="index === 0">&#xe620;</i>{{ item.title }}</a>
              <a class="tags-item-close" v-if="index !== 0 " @click.stop="handleCloseTagClick(index)">
                  <i class="el-icon-close"></i>
              </a>
          </div>
        </div>
      </div>
    <!-- <ul class="tags-li">
      <li class="tags-item"  v-for="(item, index) in tagData"
        :class="{ active: item.visiable }"
        :key="index"
        @click="handleTagClick(index)">
        <a href="javascript:;"  class="tags-item-title"><i class="iconfont" v-if="index === 0">&#xe620;</i>{{ item.title }}</a>
        <a class="tags-item-close" v-if="index !== 0 " @click.stop="handleCloseTagClick(index)">
          <i class="el-icon-close"></i>
        </a>
      </li>
    </ul> -->
    <div class="tags-close-box">
      <el-dropdown @command="handleTagOptionClose">
        <a href="javascript:;" class="dropdown-btn">标签选项<i class="el-icon-arrow-down el-icon--right"></i></a>
        <el-dropdown-menu size="small" slot="dropdown">
           <el-dropdown-item command="current">关闭当前标签页</el-dropdown-item>
          <el-dropdown-item command="other">关闭其它标签页</el-dropdown-item>
          <el-dropdown-item command="all">关闭全部标签页</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import bus from '@/assets/bus'
import Swiper from 'swiper'
export default {
    name: 'LayoutTags',
    props: {
        tagData: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data () {
        return {
            tagSwiper: null
        }
    },
    methods: {
    // 关闭单个标签
        handleCloseTagClick (index) {
            this.$emit('close', index)
        },
        // 关闭全部标签
        handleCloseAllClick () {
            this.tagsList = []
            this.$router.push('/')
        },
        // 关闭其他标签
        handleCloseOtherClick () {
            const curItem = this.tagsList.filter(item => {
                return item.path === this.$route.fullPath || item.children.indexOf(this.$route.fullPath) !== -1 || item.path === '/index'
            })
            this.tagsList = curItem
        },
        // 设置标签
        handleSetTag (route) {
            const isExist = this.tagsList.some(item => {
                return item.path === route.fullPath ||
                item.path === route.meta.root ||
                item.parentPath === route.meta.parentPath ||
                item.parentPath === route.fullPath ||
                item.path === route.meta.parentPath ||
                item.children.indexOf(route.fullPath) !== -1
            })
            if (!isExist) {
                if (this.tagsList.length >= 10) {
                    this.tagsList.splice(1, 1)
                }
                this.tagsList.push({
                    title: route.meta.title,
                    parentPath: route.meta.parentPath ? route.meta.parentPath : route.fullPath,
                    path: route.fullPath,
                    name: route.matched[1].components.default.name,
                    children: []
                })
            }
            this.tagsList.forEach(item => {
                if (route.meta.parentPath && (route.meta.parentPath === item.parentPath || route.meta.root === item.parentPath)) {
                    item.path = route.fullPath
                    if (item.children.indexOf(route.fullPath) === -1) {
                        item.children.push(route.fullPath)
                    }
                }
                if (route.fullPath === item.parentPath) {
                    item.path = route.fullPath
                }
            })
            bus.$emit('tags', this.tagsList)
        },
        handleTagOptionClose (command) {
            this.$emit('handleTagOptionClose', command)
        },
        handleTagClick (index) {
            this.$emit('change', index)
            if (index < 5) {
                this.tagSwiper.slideTo(0, 300, false)
            } else {
                this.tagSwiper.slideTo(index, 300, false)
            }
        }
    },
    computed: {
    },
    watch: {
    // $route (to, from, v) {
    //   this.handleSetTag(to)
    // }
    },
    created () {
    },
    mounted () {
        this.tagSwiper = new Swiper('.swiper-container', {
            observer: true,
            observeParents: true,
            observeSlideChildren: true,
            slidesPerView: 'auto',
            resistanceRatio: 0
        })
    }
}
</script>

<style scoped>
  @import 'swiper/dist/css/swiper.css';
</style>
<style lang="less" scoped>
@height: 40px;
.tags-wrapper {
  // position: relative;
  display: flex;
  height: @height;
  overflow: hidden;
  background: #fff;
  // padding-right: 120px;
  // box-shadow: 0 5px 10px #ddd;
  .tags-li {
    // display: flex;
    flex: 1;
    box-sizing: border-box;
    // width: 100%;
    .tags-item {
      display: flex;
      align-items: center;
      font-size: 12px;
      overflow: hidden;
      cursor: pointer;
      width: auto;
      height: @height;
      // border: 1px solid #e9eaec;
      background: #fff;
      color: #666;
      transition: all 0.3s ease-in;
      border-right: 1px solid #f6f6f6;
        .tags-item-title {
          display: flex;
          align-items: center;
          text-align: center;
          flex: 1;
          padding: 0 8px;
          color: #606266;
          white-space: nowrap;
          .iconfont {
            font-size: 18px;
            margin-right: 5px;
          }
        }
        .tags-item-close {
          height: @height;
          line-height: @height;
          padding: 0 6px 0 3px;
        }
    }
    .tags-item:hover {
      background: #f6f6f6;
    }
    .tags-item.active {
      // color: #606266;
      background: #f6f6f6;
      font-weight: 600;
      // border: 1px solid #409EFF;
      // background-color: #409EFF;
    }

  }
  .tags-close-box {
    border-left: 1px solid #f6f6f6;
    width: 110px;
    height: @height;
    background: #fff;
    // box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
    .el-dropdown {
      display: block;
      height: 100%;
      .dropdown-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        color: #606266;
      }
      .dropdown-btn:hover {
        background: #f6f6f6;
      }
    }
  }
}

// .tags-li.active .tags-li-title {
//   color: #fff;
// }

</style>
