

<template>
  <div class="tags-outer-scroll">
    <div @click="handleToLeft" v-if="tagsSlicedShow" class="tags-sliced tags-left">
      <iconpark-icon name="icon-biaoqian-left"></iconpark-icon>
    </div>
    <div ref="scrollCon" class="tags-outer-scroll-con" :style="{marginLeft: tagsSlicedShow ? '10px': '0px' }">
      <div ref="scrollBody" class="tags-inner-scroll-body" :style="{left: tagBodyLeft + 'px'}">
        <transition-group  name="taglist-moving-animation">
          <Tag
            :class="item.name==currentPageName ? 'select-tag' : ''"
            v-for="item in pageTagsList"
            ref="tagsPageOpened"
            :key="item.name"
            :name="item.name"
            @on-close="closePage"
            @click.native="linkTo(item)"
            size="medium"
            :closable="!(item.name=='home_index')"
            @contextmenu.prevent.native="contextMenu(item, $event)"
          >{{ itemTitle(item) }}
          </Tag>

        </transition-group>
      </div>
      <div v-if="!tagsSlicedShow" @click="handleTagsOption('others')" class="close-tag">关闭标签</div>
    </div>
    <div @click="handleToRight" v-if="tagsSlicedShow"  class="tags-sliced tags-right">
      <iconpark-icon name="icon-biaoqian-right"></iconpark-icon>
      <div @click="handleTagsOption('others')" class="close-tag" style="margin: 0 6px;">关闭标签</div>
    </div>
  </div>

</template>

<script>
export default {
  name: "tagsPageOpened",
  data() {
    return {
      currentPageName: this.$route.name, // 当前路由名称
      tagBodyLeft: 0, // 标签左偏移量
      refsTag: [], // 所有已打开标签
      tagsSlicedShow: false
    };
  },
  props: {
    pageTagsList: Array,
    beforePush: {
      type: Function,
      default: item => {
        return true;
      }
    }
  },
  computed: {
    title() {
      return this.$store.state.app.currentTitle;
    },
    tagsList() {
      return this.$store.state.app.pageOpenedList;
    }
  },
  methods: {
    handleToLeft() {
      this.tagBodyLeft = 0
    },
    handleToRight() {
      let lastTag = this.$refs.tagsPageOpened[this.$refs.tagsPageOpened.length-1].$el
      this.tagBodyLeft = -(
      lastTag.offsetLeft -
        (this.$refs.scrollCon.offsetWidth - 100 - lastTag.offsetWidth) +
        20
      );
    },
    itemTitle(item) {
      if (typeof item.title == "object") {
        return this.$t(item.title.i18n);
      } else {
        return item.title;
      }
    },
    closePage(event, name) {
      let pageOpenedList = this.$store.state.app.pageOpenedList;
      let lastPageObj = pageOpenedList[0];
      if (this.currentPageName == name) {
        let len = pageOpenedList.length;
        for (let i = 1; i < len; i++) {
          if (pageOpenedList[i].name == name) {
            if (i < len - 1) {
              lastPageObj = pageOpenedList[i + 1];
            } else {
              lastPageObj = pageOpenedList[i - 1];
            }
            break;
          }
        }
      } else {
        let tagWidth = event.target.parentNode.offsetWidth;
        this.tagBodyLeft = Math.min(this.tagBodyLeft + tagWidth, 0);
      }
      this.$store.commit("removeTag", name);
      this.$store.commit("closePage", name);
      pageOpenedList = this.$store.state.app.pageOpenedList;
      localStorage.pageOpenedList = JSON.stringify(pageOpenedList);
      if (this.currentPageName == name) {
        this.linkTo(lastPageObj);
      }
      let lastTag = this.$refs.tagsPageOpened[this.$refs.tagsPageOpened.length-1].$el
      if(lastTag.offsetLeft+lastTag.offsetWidth<this.$refs.scrollCon.offsetWidth) {
        this.tagsSlicedShow = false
      }
    },
    linkTo(item) {
      if (this.$route.name == item.name) {
        return;
      }
      let routerObj = {};
      routerObj.name = item.name;
      if (item.argu) {
        routerObj.params = item.argu;
      }
      if (item.query) {
        routerObj.query = item.query;
      }
      if (this.beforePush(item)) {
        this.$router.push(routerObj);
      }
    },
    handleTagsOption(type) {
      this.$store.commit("clearOtherTags", this);
      this.tagBodyLeft = 0;
      this.tagsSlicedShow = false
    },
    moveToView(tag,lastTag) {
      if (tag.offsetLeft < -this.tagBodyLeft) {
        this.tagBodyLeft = -tag.offsetLeft + 50;
      } else if (
        tag.offsetLeft + 10 > -this.tagBodyLeft &&
        tag.offsetLeft + tag.offsetWidth <
          -this.tagBodyLeft + this.$refs.scrollCon.offsetWidth - 100
      ) {
        this.tagBodyLeft = Math.min(
          0,
          this.$refs.scrollCon.offsetWidth -
            100 -
            tag.offsetWidth -
            tag.offsetLeft -
            20
        );
      } else {
        // 标签在可视区域右侧
        this.tagBodyLeft = -(
          tag.offsetLeft -
          (this.$refs.scrollCon.offsetWidth - 100 - tag.offsetWidth) +
          20
        );
      }
      if(lastTag.offsetLeft+lastTag.offsetWidth+100>this.$refs.scrollCon.offsetWidth) {
        this.tagsSlicedShow = true
      }
    }
  },
  mounted() {
    this.refsTag = this.$refs.tagsPageOpened;
    setTimeout(() => {
      let lastTag = this.refsTag[this.refsTag.length-1].$el;
      this.refsTag.forEach((item, index) => {
        if (this.$route.name == item.name) {
          let tag = this.refsTag[index].$el;
          this.moveToView(tag,lastTag);
        }
      });
    }, 1);
  },
  watch: {
    $route(to) {
      this.currentPageName = to.name;
      this.$nextTick(() => {
        let lastTag = this.refsTag[this.refsTag.length-1].$el;
        this.refsTag.forEach((item, index) => {
          if (to.name == item.name) {
            let tag = this.refsTag[index].$el;
            this.moveToView(tag,lastTag);
          }
        });
      });
    }
  }
};
</script>

<style lang="scss">
@import "@/views/main.scss";
.ivu-tag-primary, .ivu-tag-primary.ivu-tag-dot .ivu-tag-dot-inner{
  background: $theme_color;
}
</style>
