<template>
  <div class="tags-view-container" :class="[isFloor && 'tabs-box']">
    <!-- <el-dropdown trigger="hover" @command="dropdownEvent">
      <i class="el-icon-arrow-down dropdown-btn"></i>

      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="refresh">刷新</el-dropdown-item>
        <el-dropdown-item command="closeOthers">关闭其它</el-dropdown-item>
        <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown> -->
    <scroll-pane class="tags-view-wrapper" ref="scrollPane">
      <router-link
        ref="tag"
        class="tags-view-item"
        :class="isActive(tag) ? 'active' : ''"
        v-for="tag in lastTenVisitedViews"
        :to="{ path: tag.path, replace: isActive(tag) }"
        :key="tag.path"
        @contextmenu.prevent.native="openMenu(tag, $event)"
      >
        {{ generateTitle(tag.title) }}
        <span
          v-if="tag.name !== 'dashboard'"
          class="el-icon-close"
          @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>
    </ul> -->
  </div>
</template>

<script>
import ScrollPane from "@/components/ScrollPane";
import { generateTitle } from "@/utils/i18n";

export default {
  components: { ScrollPane },
  data() {
    return {
      visible: false,
      top: 0,
      left: 0,
      selectedTag: {},
      isFloor: false,
    };
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews;
    },
    lastTenVisitedViews() {
      const views = this.$store.state.tagsView.visitedViews;
      return views.slice(Math.max(views.length - 10, 0)); // 获取最后十条数据
    },
  },
  watch: {
    $route(value) {
      this.selectedTag = value;
      this.addViewTags();
      this.moveToCurrentTag();
      if (this.$route.path === "/page/pc-decoration/floor") {
        this.isFloor = true;
      } else {
        this.isFloor = false;
      }
    },
    visible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
  },
  mounted() {
    this.addViewTags();
    /*  this.getNowTime(); //进入页面调用该方法获取当前时间
    clearInterval(myTimeDisplay); //销毁之前定时器
    var myTimeDisplay = setInterval(() => {
      this.getNowTime(); //每秒更新一次时间
    }, 1000);
    this.getNowTime(); // 初始化时间
    setInterval(() => {
      this.getNowTime(); // 每秒更新时间
    }, 1000);*/
  },
  methods: {
    /* getNowTime() {
      var date = new Date();
      var weekdays = [
        "星期天",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let weekday = weekdays[date.getDay()]; // 获取星期几
      var time =
        date.getFullYear() +
        "-" +
        this.addZero(date.getMonth() + 1) + // 月份
        "-" +
        this.addZero(date.getDate()) + // 日期
        " " +
        this.addZero(date.getHours()) + // 小时
        ":" +
        this.addZero(date.getMinutes()) + // 分钟
        ":" +
        this.addZero(date.getSeconds()) +
        " " +
        weekday; // 在时间字符串中包括星期几
        console.log(weekday,time);
      this.newTime = time;
    },
    //根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。
    //小于10的拼接上0字符串
    addZero(s) {
      return s < 10 ? "0" + s : s;
    }, */
    generateTitle, // generateTitle by vue-i18n
    generateRoute() {
      if (this.$route.name) {
        return this.$route;
      }
      return false;
    },
    isActive(route) {
      return route.path === this.$route.path; // || route.name === this.$route.name
    },
    addViewTags() {
      const route = this.generateRoute();
      if (!route) {
        return false;
      }
      this.$store.dispatch("addVisitedViews", route);
    },
    moveToCurrentTag() {
      const tags = this.$refs.tag;
      this.$nextTick(() => {
        for (const tag of tags) {
          if (tag.to.path === this.$route.path) {
            this.$refs.scrollPane.moveToTarget(tag.$el);
            break;
          }
        }
      });
    },
    /** 快捷操作分发 */
    dropdownEvent(command) {
      if (command === "closeOthers") {
        this.closeOthersTags();
      } else if (command === "closeAll") {
        this.closeAllTags();
      } else {
        this.$store.dispatch("reloadViews");
      }
    },
    closeSelectedTag(view) {
      this.$store.dispatch("delVisitedViews", view).then((views) => {
        if (this.isActive(view)) {
          const latestView = views.slice(-1)[0];
          if (latestView) {
            this.$router.push(latestView);
          } else {
            this.$router.push("/");
          }
        }
      });
    },
    closeOthersTags() {
      this.$router.push(this.selectedTag);
      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;
      this.top = e.clientY;
    },
    closeMenu() {
      this.visible = false;
    },
  },
};
</script>

<style type="text/scss" lang="scss" scoped>
@import "../../../styles/variables";

.tags-view-container {
  // background: rgb(250, 250, 250);
  width: 100%;
  // box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
  display: flex;
  align-items: center;
  // justify-content: space-between;
  // border-bottom: 1px solid #d8dce5;
  margin-left: 20px;
  margin-top: 5px;
  &.tabs-box {
    min-width: 1260px;
  }
  .dropdown-btn {
    margin: 0 20px;
    width: 20px;
    height: 30px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    // border-radius: 50%;
    // background: rgba(215,215,215, 1);
    cursor: pointer;
    &:hover {
      filter: brightness(1.1);
      transform: rotate(180deg);
      transition: 0.15s;
    }
    .el-icon-arrow-down {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }
  }
  .tags-view-wrapper {
    width: calc(100% - 120px);
    height: 40px;
    .tags-view-item {
      display: inline-block;
      position: relative;
      height: 36px;
      line-height: 36px;
      color: #495060;
      padding: 0 8px;
      margin-right: 9px;
      margin-top: 4px;
      background-color: #f5f7fa;
      border-radius: 7px 7px 0 0;
      &:first-of-type {
        // margin-left: 15px;
      }
      &.active {
        background-color: #fff;
        // color: #fff;
        // border-color: #409EFF;
        color: #409eff;
        &::before {
          // content: '';
          // background: #fff;
          // display: inline-block;
          // width: 8px;
          // height: 8px;
          // border-radius: 50%;
          // position: relative;
          // margin-right: 2px;
        }
      }
    }
  }
  .contextmenu {
    margin: 0;
    background: #fff;
    z-index: 999;
    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;
      }
    }
  }
  .tags-view-item {
    padding: 0 10px;
    min-width: 80px;
    border-radius: 4px;
    text-align: center;
    user-select: none;
    .el-icon-close {
      width: 16px;
      height: 16px;

      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;
      }
      &:hover {
        background-color: #b4bccc;
        color: #fff;
      }
    }
  }
}
</style>
