<template>
  <view class="yi-flash-polling">
    <view class="polling-status-wrap" v-if="status === 3">
      <view class="spinner"></view>
      <view v-if="status === 3"> 正在排队 </view>
    </view>
    <view v-if="status === 4" class="polling-status-wrap">
      <u-icon name="close-circle" color="#2979ff" size="68"></u-icon>
      <view>秒杀失败</view>
    </view>
    <view v-if="status === 2" class="polling-status-wrap">
      <u-icon name="checkmark-circle" color="#2979ff" size="68"></u-icon>
      <view>秒杀成功</view>
      <button @click="gotoPayOrder">去付款</button>
    </view>
  </view>
</template>

<script>
import { userActivity } from '../../mall/api';
let timer;
export default {
  name: 'yi-flash-polling',
  props: {
    activityId: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      status: null,
      xid: null,
    };
  },
  watch: {
    activityId: {
      immediate: true,
      handler: function (v) {
        console.log('%c [watch id]: ', 'color:#1989fa;', v);
      },
    },
  },
  mounted() {
    console.log('%c [mounted yi-flash-polling]: ', 'color:#1989fa;', this.activityId);
    timer = setInterval(() => {
      this.getUserActivity();
    }, 1000);
  },
  methods: {
    async getUserActivity() {
      if (!this.activityId) return;
      try {
        const res = await userActivity({ id: this.activityId });
        // status 状态 0: 支付成功; 1: 预留; 2: 下单成功; 3: 排队中; 4: 排不上队|名额用完|规格库存不足|主动取消排队; 5: 已删除
        console.log('%c [getUserActivity res]: ', 'color:#1989fa;', res);
        const { status, xid } = res;
        this.status = status;
        this.xid = xid;
        if (res.status !== 3) {
          clearInterval(timer);
        }
      } catch (e) {
        clearInterval(timer);
      }
    },
    gotoPayOrder() {
      this.$emit('payOrder', this.xid);
    },
  },
};
</script>

<style scoped lang="scss">
$primary-color: #ee0a24;
.yi-flash-polling {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .polling-status-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
  }
  .spinner {
    width: 60px;
    height: 60px;
    background-color: $primary-color;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
  }

  @-webkit-keyframes rotateplane {
    0% {
      -webkit-transform: perspective(120px);
    }
    50% {
      -webkit-transform: perspective(120px) rotateY(180deg);
    }
    100% {
      -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
    }
  }

  @keyframes rotateplane {
    0% {
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50% {
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }
    100% {
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }

  button {
    width: 240rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 100rpx;
    background: linear-gradient(to right, #ffac30, #fc3d42);
    font-size: 30rpx;
    color: #fff;
    margin: 30rpx auto 20rpx;
    &:after {
      border: none;
    }
  }
}
</style>
