<template>
  <div class="tags-view">
    <ScrollPane>
      <transition-group name="drag" class="list" tag="div">
        <div class="tags-view-tp" v-for="(item, index) in $store.getters.tagsViewList" :key="item.fullPath" @drop="drop($event, index)" @dragover="dragover($event, index)" @dragstart="dragstart(index)" :draggable="item.fullPath !== '/home'">
          <el-tooltip v-if="item.meta.title.length > 10" class="item" effect="dark" :content="item.meta.title" placement="top-start">
            <!-- '/home'页不允许拖拽 -->
            <div @click.self="to(item.fullPath)" @contextmenu.prevent="openmenu($event, index)" class="tags-view-item" :class="isActive(item) ? 'active' : ''">
              <span @click.self="to(item.fullPath)" @contextmenu.prevent="openmenu($event, index)">{{ item.meta.title }}</span>
              <i class="el-icon-close" @click.stop="onClose(index)" v-if="item.fullPath !== '/home'"></i>
              <div class="tags-view-item-left"></div>
              <div class="tags-view-item-content"></div>
              <div class="tags-view-item-right"></div>
            </div>
          </el-tooltip>
          <div v-else @click.self="to(item.fullPath)" @contextmenu.prevent="openmenu($event, index)" class="tags-view-item" :class="isActive(item) ? 'active' : ''">
            {{ item.meta.title }}
            <i class="el-icon-close" @click.stop="onClose(index)" v-if="item.fullPath !== '/home'"></i>
            <div class="tags-view-item-left"></div>
            <div class="tags-view-item-content"></div>
            <div class="tags-view-item-right"></div>
          </div>
        </div>
      </transition-group>
      <transition name="el-fade-in-linear">
        <ConTextMenu :openVisible="openVisibles" :index="onCloseindex" v-if="visible" :porstyle="conTextMenStyle"></ConTextMenu>
      </transition>
    </ScrollPane>
  </div>
</template>

<script>
export default {
  name: 'TagsView',
  data() {
    return {
      visible: false,
      conTextMenStyle: {
        left: 0,
        top: 0
      },
      onCloseindex: undefined,
      // 源对象索引
      dragIndex: '',
      // 目标对象索引
      enterIndex: '',
      pathIndex: ''
    }
  },
  methods: {
    // 是否被选中
    isActive(tag) {
      return tag.path == this.$route.path
    },

    closeTag() {
      if (this.$route.path == this.$store.state.app.tagsViewList[this.pathIndex].path) {
        this.$router.push(this.$store.state.app.tagsViewList[this.pathIndex - 1].fullPath)
      }
      let componentInstance = this.$parent.$parent.$children[1].$children[0].$children[0].$vnode.parent.componentInstance
      this.$store.commit('app/removeTagsView', { type: 'index', index: this.pathIndex, componentInstance })
    },
    // 关闭
    onClose(index) {
      this.pathIndex = index
      const { name } = this.$route
      if (name == 'ReceiveAddComponent') {
        this.$Wbus.$emit('tagItemClose', this)
      } else {
        this.closeTag()
      }
    },
    // 鼠标右键
    openmenu(e, index) {
      this.onCloseindex = index
      this.visible = true
      const { x, y } = e
      this.conTextMenStyle.left = x + 'px'
      this.conTextMenStyle.top = y + 'px'
    },
    openVisibles() {
      this.visible = !this.visible
    },
    to(path) {
      this.$router.push(path)
    },

    // 拖拽
    dragstart(index) {
      this.dragIndex = index
    },
    // 源对象开始进入目标对象范围内触发
    drop(e, index) {
      e.preventDefault()
      if (this.dragIndex !== index) {
        this.$store.commit('app/moveTagsView', { dragIndex: this.dragIndex, enterIndex: index })
        this.dragIndex = index
      }
    },
    dragover(e, index) {
      e.preventDefault()
    }
  },
  watch: {
    // 当tag 操作拦打开 给body添加 关闭操作拦事件 当tag 操作拦关闭 给body移除 关闭操作拦事件
    visible(val) {
      if (val) {
        document.body.addEventListener('click', this.openVisibles)
      } else {
        document.body.removeEventListener('click', this.openVisibles)
      }
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
