<template>
  <view class="box" id="box_minute">
    <view class="top child text" id="top">{{ topTime }}</view>
    <view class="flip child" id="flip" :style="{ transform: transformInfo }">
      <view
        class="flip_face child text"
        :style="{ zIndex: faceZindex || 0 }"
        id="flip_face"
      >
        {{ bottomTime }}
      </view>
      <view
        class="flip_back child text"
        :style="backZindex ? { zIndex: backZindex } : {}"
        id="flip_back"
      >
        {{ topTime }}
      </view>
    </view>
    <view class="bottom child text" id="bottom">{{ bottomTime }}</view>
  </view>
</template>

<script>
export default {
  props: {
    initTime: {
      // 初始时间
      type: Number,
      default: 60,
    },
    isDown: {
      // 是否是倒计时
      type: Boolean,
      default: true,
    },
    threshold: {
      // 阈值
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      topTime: this.initTime,
      bottomTime: this.initTime,
      faceZindex: 1,
      backZindex: 0,
      transformInfo: "perspective(500rpx) rotateX(0deg)",
      timer: null,
      timerTwo: null,
    };
  },
  mounted() {
    this.cycle();
  },
  methods: {
    OneCycle(n) {
      // 一次翻页的周期
      let num = 0;
      this.transformInfo = "perspective(500rpx) rotateX(0deg)";
      this.faceZindex = 1;
      this.backZindex = 0;
      this.bottomTime = n;
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        num++;
        if (num > 50) {
          num = 0;
          clearInterval(this.timer);
          return;
        }

        if (num === 1) {
          if (this.isDown) {
            this.topTime = n - 1 < this.threshold ? n : n - 1; // 60 和 0 在时间里，其实是一样的
          } else {
            this.topTime = n + 1 > this.threshold ? n : n + 1; // 60 和 0 在时间里，其实是一样的
          }
        }

        this.faceZindex = num <= 25 ? 1 : 0;
        this.backZindex = num <= 25 ? 0 : 1;

        this.transformInfo = `perspective(500rpx) rotateX(-${(180 * num) /
          50}deg)`;
      }, 20); // 将一秒钟分成50份。
    },
    cycle() {
      let time = this.initTime;
      this.timerTwo = setInterval(() => {
        const flag = this.isDown ? time - 1 : time + 1;
        if (flag === this.threshold) {
          clearInterval(this.timerTwo);
          clearInterval(this.timer);
        }
        this.OneCycle(time);
        this.isDown ? time-- : time++;
      }, 1000);
    },
  },
};
</script>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#app {
  height: 100%;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: wrap-reverse;
}

.box {
  position: relative;
  box-sizing: border-box;
}

.box .child {
  width: 130rpx;
  height: 100rpx;
  overflow: hidden;
}

.box > .top {
  background-color: #333;
  line-height: 200rpx;
  border-bottom: 2rpx solid #fff;
  border-radius: 4rpx 4rpx 0 0;
}

.box .flip {
  position: absolute;
  top: 0rpx;
  z-index: 1;
  transform-origin: bottom;
  border-radius: 4rpx 4rpx 0 0;
}

.box .flip .flip_face {
  position: absolute;
  background-color: #333;
  line-height: 200rpx;
  z-index: 1;
  border-bottom: 2rpx solid #fff;
}

.box .flip .flip_back {
  position: absolute;
  background-color: #333;
  line-height: 0rpx;
  transform: perspective(500rpx) rotateX(0deg) rotateY(-180deg) rotate(180deg);
  border-top: 2rpx solid #fff;
}

.box .bottom {
  background-color: #333;
  line-height: 0rpx;
  border-top: 2rpx solid #fff;
  border-radius: 0 0 4rpx 4rpx;
}

.text {
  text-align: center;
  font-size: 100rpx;
  font-weight: 900;
  color: #fff;
}
</style>
