<template>
  <transition
    :enter-active-class="enterAnimateClass"
    :leave-active-class="leaveAnimateClass"
  >
    <slot></slot>
  </transition>
  <!-- <div>
    <transition
      :enter-active-class="enterAnimateClass"
      :leave-active-class="leaveAnimateClass"
    >
      <slot></slot>
    </transition>
    <div
      v-if="hasAuth('EPMS:EQP_TYPE:EPMS:EQP_TYPE:VIEW_ALL_COMPONENT')"
      :class="{ active: showRedBorder === true }"
      class="developer-box flex justify-center items-center cursor-pointer"
      @click="handleShowComponent()"
    >
      <i class="iconfont icon-zhucekaifazhe"></i>
    </div>
  </div> -->
</template>

<script>
import { mapState } from "vuex";
import { preset as animates } from "@/config/theme/default/animate.config";

export default {
  name: "PageTransition",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    animate: {
      type: String,
      validator(value) {
        return animates.findIndex((item) => item.name === value) !== -1;
      },
      default: "bounce",
    },
    direction: {
      type: String,
      validator(value) {
        return [
          "x",
          "y",
          "left",
          "right",
          "up",
          "down",
          "downLeft",
          "upRight",
          "downRight",
          "upLeft",
          "downBig",
          "upBig",
          "downLeft",
          "downRight",
          "topRight",
          "bottomLeft",
          "topLeft",
          "bottomRight",
          "default",
        ].includes(value);
      },
      default: "",
    },
    reverse: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ...mapState({
      showRedBorder: (state) => state.pagination.showRedBorder,
    }),
    enterAnimateClass() {
      if (!this.disabled) {
        return `animate__animated animate__${this.activeClass(
          false
        )} page-toggle-enter-active`;
      }
      return "";
    },
    leaveAnimateClass() {
      if (!this.disabled) {
        return `animate__animated animate__${this.activeClass(
          true
        )} page-toggle-enter-active`;
      }
      return "";
    },
  },
  methods: {
    // 查看当前页面组件
    handleShowComponent() {
      this.$store.commit("pagination/SET_RED_BORDER", !this.showRedBorder);
    },
    activeClass(isLeave) {
      const animate = animates.find((item) => this.animate === item.name);
      if (animate === undefined) {
        return "";
      }
      let direction = "";
      if (this.direction === undefined) {
        [direction] = animate.directions;
      } else {
        direction = animate.directions.find((item) => item === this.direction);
      }
      direction =
        direction === undefined || direction === "default" ? "" : direction;
      if (direction !== "") {
        direction =
          isLeave && this.reverse
            ? this.reversePosition(direction, animate.directions)
            : direction;
        direction = direction[0].toUpperCase() + direction.substring(1);
      }
      const t = isLeave ? "Out" : "In";
      return animate.name + t + direction;
    },
    reversePosition(direction, directions) {
      if (direction.length === 0 || direction === "x" || direction === "y") {
        return direction;
      }
      let index = directions.indexOf(direction);
      index = index % 2 === 1 ? index - 1 : index + 1;
      return directions[index];
    },
  },
};
</script>

<style lang="less">
.page-toggle-enter-active {
  position: absolute !important;
  animation-duration: 0.8s !important;
  width: calc(100%) !important;
}
.page-toggle-leave-active {
  position: absolute !important;
  animation-duration: 0.8s !important;
  width: calc(100%) !important;
}
.developer-box {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(122, 122, 122, 0.3);
  position: fixed;
  bottom: 70px;
  right: 30px;
  background: #fff;
  z-index: 100;
}

.developer-box .iconfont {
  color: #1296db;
}

.developer-box.active .iconfont {
  color: #d81e06;
}
</style>
