<template>
  <div class="tags-view-container">
    <scroll-pane class="tags-view-wrapper" ref="scrollPane">
      <router-link
        ref="tag"
        class="tags-view-item"
        :class="isActive(tag) ? 'active' : ''"
        v-for="(tag, index) in Array.from(visitedViews)"
        :to="{ path: tag.fullPath, query: tag.query, some: tag.path }"
        :key="index"
        @contextmenu.prevent.native="openMenu(tag, $event)"
      >
        <span
          :title="generateTitle(tag.title)"
          class="item"
          @click="changeTag(tag)"
          >{{ generateTitle(tag.title) }}</span
        >
        <!-- v-if="index == Array.from(visitedViews).length -1" -->
        <span
          class="el-icon-close icon"
          @click.prevent.stop="closeSelectedTag(tag)"
        ></span>
      </router-link>
    </scroll-pane>
    <ul
      class="contextmenu"
      v-show="visible"
      :style="{ left: left + 'px', top: top + 'px' }"
    >
      <li @click="closeSelectedTag(selectedTag)">关闭</li>
      <li @click="closeOthersTags">关闭其他</li>
      <li @click="closeAllTags">关闭所有</li>
      <li @click="refresh(selectedTag)">刷新</li>
    </ul>
  </div>
</template>

<script>
import ScrollPane from "@/components/ScrollPane";
import { generateTitle } from "@/utils/i18n";
import { Searchs } from "@/helpers";
let activeKey = "";
export default {
  name: "TagsView",
  components: { ScrollPane },
  data() {
    return {
      visible: false,
      top: 0,
      left: 0,
      activeKey: null,
      activeTag: null,
      selectedTag: {},
    };
  },
  inject: ["reloads"],
  computed: {
    visitedViews() {
      // console.log(this.$store.state.tagsView.visitedViews)
      return this.$store.state.tagsView.visitedViews;
    },
  },
  watch: {
    $route() {
      this.addViewTags();
      this.moveToCurrentTag();
      if (!activeKey && !this.$store.state.tagsView.isBack) {
        const s = new Searchs();
        const keys = [this.$route.path];
        for (const key in s.searchs) {
          if (Object.hasOwnProperty.call(s.searchs, key)) {
            const item = s.searchs[key];
            if (item.bind === this.$route.path) {
              keys.push(key);
            }
          }
        }
        for (const item of keys) {
          s.removeByKey(item);
        }
      }
      this.$store.commit("SET_IS_BACK", false);
      activeKey = "";
    },
    visible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
  },
  mounted() {
    this.addViewTags();
  },
  methods: {
    // generateTitle by vue-i18n
    generateTitle,
    generateRoute() {
      if (this.$route.path && this.$route.path != "/") {
        return this.$route;
      }
      return false;
    },
    // || route.name === this.$route.name
    isActive(route) {
      return route.path === this.$route.path;
    },
    syncTagViewAndSaveForm() {
      const keys = this.$store.state.tagsView.visitedViews.map(
        (item) => {
          // console.log(item)
          return item.path}
      );
      const searchs = new Searchs();
      const allSearch = searchs.getSearchs();

      const sks = Object.keys(allSearch);
      let route = this.$route;
      for (const item of sks) {
       if (!(keys.includes(item) || keys.includes(allSearch[item].bind))) {
          searchs.removeByKey(item);
        }

        let tempSaveKeyList = item.split("|");
        // 大于1说明的特殊标识编号
        if (tempSaveKeyList.length > 1) {
          if (
            allSearch[item] &&
            route.path == allSearch[item].bind &&
            route.query[tempSaveKeyList[1]] != tempSaveKeyList[2]
          ) {
            searchs.removeByKey(item);
          }
        }
      }
    },
    async addViewTags() {
      const route = this.generateRoute();
      if (!route) {
        return false;
      }
      // console.log(this.$route)
      await this.$store.dispatch("addVisitedViews", route);

      this.syncTagViewAndSaveForm();
    },
    moveToCurrentTag() {
      const tags = this.$refs["tag"] || [];
      this.$nextTick(() => {
        for (const tag of tags) {
          if (tag.path === this.$route.path) {
            this.$refs.scrollPane.moveToTarget(tag.$el);
            // const searchs = new Searchs();
            // const allSearch = searchs.getSearchs();
            // console.log(allSearch)
            break;
          }
        }
      });
    },
    closeSelectedTag(view) {
      activeKey = "1";

      const searchs = new Searchs();
      searchs.remove(this.$route.path);
      this.$store
        .dispatch("delVisitedViews", { ...view, dontNeedSave: true })
        .then((views) => {
          if (this.isActive(view)) {
            const latestView = views.slice(-1)[0];
            if (latestView) {
              this.$router.push(latestView.fullPath);
            } else {
              let firstMenuUrl = localStorage.getItem('firstMenuUrl')
              this.$router.push(firstMenuUrl || '/');
            }
          }
        });
    },
    closeOthersTags() {
      this.$router.push(this.selectedTag.path);
      this.$store.dispatch("delOthersViews", this.selectedTag).then(() => {
        this.moveToCurrentTag();
      });
    },
    closeAllTags() {
      this.$store.dispatch("delAllViews");
      this.$router.push("/");
    },
    openMenu(tag, e) {
      this.visible = true;
      this.selectedTag = tag;
      this.left = e.clientX - 165;
      this.top = e.clientY + 15;
    },
    closeMenu() {
      this.visible = false;
    },
    async changeTag(tag) {
      activeKey = await this.getSearchsByRealPath(tag);
    },
    getSearchsByRealPath(tag) {
      const searchs = new Searchs();
      let keyName = "";


      for (const key in searchs.searchs) {
        if (Object.hasOwnProperty.call(searchs.searchs, key)) {
          const item = searchs.searchs[key];

          if (tag.path === key || item.bind === tag.path) {
            keyName = item.bind || tag.path;
          }
        }
      }
      // this.activeKey = keyName
      return keyName;
    },
    async refresh(view) {
      await this.reloads();
    },
  },
};
</script>

<style lang="less" scoped>
.tags-view-container {
  .tags-view-wrapper {
    background: #edeef0;
    height: 34px;
    border-bottom: 1px solid #d8dce5;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
    .tags-view-item {
      min-width: 120px;
      display: inline-flex;
      .icon {
        font-size: 20px;
        position: relative;
        top: 3px;
        float: right;
        margin-right: 5px;
      }
      border-radius: 5px 5px 0 0;
      // display: inline-block;
      position: relative;
      height: 30px;
      line-height: 30px;
      // border: 1px solid #d8dce5;
      color: #495060;

      padding: 0 8px;
      font-size: 12px;
      // margin-left: 5px;
      margin-top: 4px;
      &:first-of-type {
        margin-left: 15px;
      }
      &.active {
        color: #495060;
        left: -1px;
        background-color: #fff;
        z-index: 2;

        &::before {
          border-right: 0;
        }
      }
      &::before {
        content: "";
        display: inline-block;
        position: absolute;
        right: 0;
        height: 20px;
        bottom: 6px;
        border-right: 1px solid #b5b5b5;
      }
    }
  }
  .contextmenu {
    margin: 0;
    background: #fff;
    z-index: 100;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    li {
      margin: 0;
      padding: 7px 16px;
      cursor: pointer;
      &:hover {
        background: #eee;
      }
    }
  }
}
//reset element css of el-icon-close
.tags-view-wrapper {
  .tags-view-item {
    .item {
      flex: 1;
      text-overflow: ellipsis;
      overflow: hidden;
      display: inline-block;
    }
    .el-icon-close {
      width: 16px;
      height: 16px;
      vertical-align: 2px;
      border-radius: 50%;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform-origin: 100% 50%;
      &:before {
        transform: scale(0.6);
        display: inline-block;
        vertical-align: -3px;
      }
      &:hover {
        // background-color: #fff;
        color: #b4bccc;
      }
    }
  }
}
</style>
