export default{
  data() {
    return {
      tag_body_left: 0,
      outer_padding: 4
    };
  },
  watch: {
    '$route'(to, from) {
      setTimeout(() => {
        this.getTagElementByName();
      }, 500);
    }
  },
  created() {},
  methods: {
    mouseScroll(e) {
      const type = e.type;
      let delta = 0;
      if (type === 'DOMMouseScroll' || type === 'mousewheel') {
        delta = (e.wheelDelta) ? e.wheelDelta : -(e.detail || 0) * 40;
      }
      this.handleScroll(delta);
    },

    handleScroll(offset) {
      const outerWidth = this.$refs.scrollOuter.offsetWidth;
      const bodyWidth = this.$refs.scrollBody.offsetWidth;
      if (offset > 0) {
        this.tag_body_left = Math.min(0, this.tag_body_left + offset);
      } else {
        if (outerWidth < bodyWidth) {
          if (this.tag_body_left < -(bodyWidth - outerWidth)) {
            this.tag_body_left = this.tag_body_left;
          } else {
            this.tag_body_left = Math.max(this.tag_body_left + offset, outerWidth - bodyWidth);
          }
        } else {
          this.tag_body_left = 0;
        }
      }
    },

    /**
       * [menuChange 点击标签事件]
       * @param  {[type]} index [description]
       * @return {[type]}       [description]
       */
    menuChange(index) {
      if (this.tagnavs.length) {
        const obj = this.tagnavs[index];
        if (obj) {
          let path = { path: obj.path };

          if (obj.name) {
            path.name = obj.name;
          }

          if (obj.query) {
            path.query = this.deepClone(obj.query);
          }

          if (obj.params) {
            path.params = this.deepClone(obj.params);
          }
          this.$router.push(path);
        }
      }
    },

    /**
       * [getTagElementByName 获取当前tag元素]
       * @param  {[type]} name [description]
       * @return {[type]}      [description]
       */
    getTagElementByName() {
      this.$nextTick(() => {
        const navtags = this.$refs.navTag;
        this.tagnavs.forEach((item, index) => {
          if (item.name == this.$route.name) {
            if (navtags[index] && navtags[index].$el) {
              this.moveToView(navtags[index].$el);
            }
          }
        });
      });
    },

    /**
       * [moveToView 将标签滚动到可视区域]
       * @param  {[type]} tag [description]
       * @return {[type]}     [description]
       */
    moveToView(tag) {
      const outerWidth = this.$refs.scrollOuter.offsetWidth;
      const bodyWidth = this.$refs.scrollBody.offsetWidth;
      if (bodyWidth < outerWidth) {
        this.tag_body_left = 0;
      } else if (tag.offsetLeft < -this.tag_body_left) {
        // 标签在可视区域左侧
        this.tag_body_left = -tag.offsetLeft + this.outer_padding;
      } else if (tag.offsetLeft > -this.tag_body_left && tag.offsetLeft + tag.offsetWidth < -this.tag_body_left + outerWidth) {
        // 标签在可视区域
        this.tag_body_left = Math.min(0, outerWidth - tag.offsetWidth - tag.offsetLeft - this.outer_padding);
      } else {
        // 标签在可视区域右侧
        this.tag_body_left = -(tag.offsetLeft - (outerWidth - this.outer_padding - tag.offsetWidth));
      }
    },

    // 关闭所有和关闭其他
    closeNav(name) {
      if (name == 'close-all') {
        this.$store.commit('CLEAR_TAGNAVS', []);
        this.$router.push('/');
      } else {
        if (this.$route.query.mid !== undefined) {
          // 当前高亮不是首页
          for (let i = 0, len = this.tagnavs.length; i < len; i++) {
            let obj = this.tagnavs[i];
            if (this.tagnavs[i].id == this.$route.query.mid) {
              this.$store.commit('CLEAR_TAGNAVS', []);
              this.$store.commit('SET_TAGNAVS', obj);
              break;
            }
          }
        } else {
          // 当前高亮为首页
          this.$store.commit('CLEAR_TAGNAVS', []);
          this.$router.push('/');
        }
      }
      this.tag_body_left = 0;
    },

    // 关闭滚动菜单(单项)
    menuClose(e, name) {
      let nav = this.tagnavs[name];
      // 关闭的是当前页面，打开前一个页面
      if (nav.path == this.$route.path) {
        nav = this.tagnavs[name - 1];
        this.$router.replace({ path: nav.path, query: nav.query, params: nav.params });
      }
      this.$store.commit('REMOVE_TAGNAVS', name);
    }

  }
};
