<template>
  <div class="time-box">
    <!-- 底层基础div -->
    <div class="base">
      {{ item }}
      <div class="base-b">{{ itemT }}</div>
    </div>
    <!-- 翻页动画div -->
    <div class="face" :class="[{ anime: isAnimate }]" @animationend="onAnimateEnd">
      {{ itemT }}
    </div>
    <div class="back" :class="[{ anime: isAnimate }]">{{ item }}</div>
  </div>
</template>

<script setup lang="ts">
  interface Props {
    /** 当前项的值 */
    item: string;
    /** 当前项的临时值 */
    itemT?: string;
    /** 是否正在执行动画 */
    isAnimate: boolean;
  }

  const { item, itemT = '', isAnimate } = defineProps<Props>();

  const emit = defineEmits<{
    /** 动画结束时触发的事件 */
    (e: 'animateEnd'): void;
  }>();

  /**
   * 动画完毕后，触发事件通知父组件
   */
  const onAnimateEnd = () => {
    emit('animateEnd');
  };
</script>

<style lang="scss" scoped>
  .time-box {
    --t-bg: var(--bg, rgb(3, 152, 252));
    --t-bg2: var(--bg2, rgba(93, 166, 250, 0.8));
    --t-color: var(--color, #ffffff);
    --t-height: var(--height, 26px);
    --t-font-size: var(--font-size, 20px);
    position: relative;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
    // stylelint-disable-next-line unit-allowed-list
    width: 1.2ch;
    height: var(--t-height);
    padding: 0 3px;
    overflow: hidden;
    font-size: var(--t-font-size);
    line-height: var(--t-height);
    color: var(--t-color);
    text-align: center;
    background-color: var(--t-bg);
    border-radius: 4px;
    perspective: 60px;

    &:before {
      position: absolute;
      top: 50%;
      left: -1px;
      z-index: -1;
      width: 1px;
      height: 6px;
      margin-top: -3px;
      content: '';
      background: var(--t-bg2);
    }

    &:after {
      position: absolute;
      top: 50%;
      right: -1px;
      z-index: -1;
      width: 1px;
      height: 6px;
      margin-top: -3px;
      content: '';
      background: var(--t-bg2);
    }

    + .time-box {
      margin-left: 8px;
    }

    > div {
      overflow: hidden;
      border-radius: 3px;
      transform: rotateX(-0.01deg);
      animation-duration: 0.4s;
      animation-timing-function: linear;

      &.base {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        .base-b {
          position: absolute;
          bottom: 0;
          left: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
          background-color: var(--t-bg); // a1比base浅一点点，为了模拟翻页的阴影效果
          border-radius: 0 0 3px 3px;
        }
      }

      &.face {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
        background-color: var(--t-bg);
        backface-visibility: visible;

        &.anime {
          animation-name: animate-flip-face;
        }
      }

      &.back {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
        background-color: var(--t-bg); // b0和a1一致
        transform: rotateX(-180deg);
        backface-visibility: visible;

        &.anime {
          animation-name: animate-flip-back;
        }
      }
    }
  }

  @keyframes animate-flip-face {
    0% {
      opacity: 1; // 改变opacity 为了QQ浏览器和safari(不支持z-index animate)
      transform: rotateX(-0.01deg);
    }

    50% {
      opacity: 1;
    }

    51% {
      opacity: 0;
    }

    100% {
      opacity: 0;
      transform: rotateX(-180deg);
    }
  }
  @keyframes animate-flip-back {
    0% {
      transform: rotateX(180deg);
    }

    100% {
      transform: rotateX(-0.01deg);
    }
  }
</style>
