<template>
  <div ref="scrollCon" class="tags-outer-scroll-con" @DOMMouseScroll="_handlescroll" @mousewheel="_handlescroll">
    <Dropdown transfer class="close-all-tag-con" @on-click="_handleTagsOption">
      <Icon type="md-arrow-dropdown" size="25" />
      <DropdownMenu slot="list">
        <DropdownItem name="clearAll">
          关闭所有
        </DropdownItem>
        <DropdownItem name="clearOthers">
          关闭其他
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <div ref="scrollBody" class="tags-inner-scroll-body" :style="{left: tagBodyLeft + 'px'}">
      <transition-group name="taglist-moving-animation">
        <Tag
          v-for="item in tagList"
          ref="tagsPageOpened"
          :key="item.name"
          type="dot"
          :name="item.uri"
          :closable="item.id === undefined ? false : true"
          :color="item.uri === currentPath?'primary':'default'"
          :class="{'tag-no-active':(item.uri === currentPath?false:true)}"
          @on-close="_closePage"
          @click.native="_linkTo(item)"
        >
          {{ item.name }}
        </Tag>
      </transition-group>
    </div>
  </div>
</template>
<script>
import Store from 'store2'
export default {
  data() {
    return {
      currentPath: this.$route.path,
      tagBodyLeft: 0
    }
  },
  computed: {
    tagList() {
      return this.$store.state.pageTagsList
    }
  },
  watch: {
    $route: function(to) {
      this.currentPath = to.path
      this.$nextTick(() => {
        if (this.refsTag) {
          // 若标签tags存在
          this.refsTag.forEach((item, index) => {
            if (to.path === item.name) {
              const tag = this.refsTag[index].$el
              this._moveToView(tag)
            }
          })
        }
      })
    }
  },
  created() {
    // 显示添加的tag
    this.$store.commit('setOpenedList')
  },
  mounted() {
    this.refsTag = this.$refs.tagsPageOpened
    setTimeout(() => {
      if (this.refsTag) {
        // 若标签tags存在
        this.refsTag.forEach((item, index) => {
          if (this.$route.path === item.$route.path) {
            const tag = this.refsTag[index].$el
            this._moveToView(tag)
          }
        })
      }
    }, 1) // 这里不设定时器就会有偏移bug
  },
  methods: {
    // 关闭当前tag标签
    _closePage(event, name) {
      let pageTagsList = this.$store.state.pageTagsList
      let lastPageObj = pageTagsList[0]
      if (this.currentPath === name) {
        const len = pageTagsList.length
        for (let i = 1; i < len; i++) {
          if (pageTagsList[i].uri === name) {
            if (i < len - 1) {
              lastPageObj = pageTagsList[i + 1]
            } else {
              lastPageObj = pageTagsList[i - 1]
            }
            break
          }
        }
      }
      this.$store.commit('removeTag', name)
      pageTagsList = this.$store.state.pageTagsList
      Store.session('tagPageList', pageTagsList)
      if (this.currentPath === name) {
        this._linkTo(lastPageObj)
      }
    },
    // 跳转
    _linkTo(item) {
      if (item.uri) {
        this.$router.push(item.uri)
      }
    },
    // 鼠标滚轮事件
    _handlescroll(e) {
      const type = e.type
      let delta = 0
      if (type === 'DOMMouseScroll' || type === 'mousewheel') {
        delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40
      }
      let left = 0
      if (delta > 0) {
        left = Math.min(0, this.tagBodyLeft + delta)
      } else if (
        this.$refs.scrollCon.offsetWidth - 40 <
        this.$refs.scrollBody.offsetWidth
      ) {
        if (
          this.tagBodyLeft <
          -(
            this.$refs.scrollBody.offsetWidth -
            this.$refs.scrollCon.offsetWidth +
            40
          )
        ) {
          left = this.tagBodyLeft
        } else {
          left = Math.max(
            this.tagBodyLeft + delta,
            this.$refs.scrollCon.offsetWidth -
              this.$refs.scrollBody.offsetWidth -
              40
          )
        }
      } else {
        this.tagBodyLeft = 0
      }
      this.tagBodyLeft = left
    },
    _moveToView(tag) {
      if (tag.offsetLeft < -this.tagBodyLeft) {
        // 标签在可视区域左侧
        this.tagBodyLeft = -tag.offsetLeft + 10
      } else if (
        tag.offsetLeft + 10 > -this.tagBodyLeft &&
        tag.offsetLeft + tag.offsetWidth <
          -this.tagBodyLeft + this.$refs.scrollCon.offsetWidth - 40
      ) {
        // 标签在可视区域
        this.tagBodyLeft = Math.min(
          0,
          this.$refs.scrollCon.offsetWidth -
            40 -
            tag.offsetWidth -
            tag.offsetLeft -
            20
        )
      } else {
        // 标签在可视区域右侧
        this.tagBodyLeft = -(
          tag.offsetLeft -
          (this.$refs.scrollCon.offsetWidth - 40 - tag.offsetWidth) +
          20
        )
      }
    },
    // 右侧操作
    _handleTagsOption(type) {
      if (type === 'clearAll') {
        // 关闭所有
        this.$store.commit('clearAllTags')
      } else {
        // 关闭其他
        this.$store.commit('clearOtherTags', this)
      }
      this.tagBodyLeft = 0
    }
  }
}
</script>
