<template>
  <!-- 倒计时栏 -->
  <view
    v-if="countDownInfo || preSellTime"
    class="Mall4j component-countdown-bar"
  >
    <!-- 拼团 / 秒杀 -->
    <view
      v-if="activityInfo.activityStatus && (prodType === 1 || prodType === 2||prodType === 3)"
      class="countdown-box"
    >
      <text class="second-kill">
        {{ ['拼团', '秒杀','预售'][prodType-1] }}
      </text>
      <view class="countdown-content">
        <template v-if="activityInfo.activityStatus !== 1&&countDownInfo.signs===0">
          已结束
        </template>
        <template v-else>
          <text
            v-if="activityInfo.activityStatus === 1"
            class="countdown-tips"
          >
            距开始还有
          </text>
          <text
            v-else
            class="countdown-tips"
          >
            距结束仅剩
          </text>
          <text class="countdown-time">
            {{ countDownInfo.day }}
            <text class="countdown-tips">
              天
            </text>
            {{ countDownInfo.hou }}:{{ countDownInfo.min }}:{{ countDownInfo.sec }}
          </text>
        </template>
      </view>
    </view>
    <!-- 拼团 / 秒杀 -->

    <!-- 预售 -->
    <view
      v-else-if="preSellTime"
      class="pre-sale"
    >
      <view class="pre-sale-text">
        预售
      </view>
      <view class="send-time">
        <text class="countdown-tips">
          预计
        </text>
        {{ preSellTime }}
        <text class="countdown-tips">
          开始发货
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
import util from '@/utils/util'
import { onMounted } from 'vue'
const props = defineProps({
  // 预售时间
  preSellTime: {
    type: String,
    default: ''
  },
  // 活动结束时间
  endTime: {
    type: String,
    default: ''
  },
  // 活动开始时间
  startTime: {
    type: String,
    default: ''
  },
  // 商品类型 1团购 2秒杀
  prodType: {
    type: Number,
    default: 0
  },
  activityInfo: {
    type: Object,
    default: function () {
      return {}
    }
  },
  prodId: {
    type: Number,
    default: 0
  },
  isRefreshPage: {
    type: Boolean,
    default: true
  }
})

const countDownInfo = ref('')
let endOfGroupTimer = ''

onMounted(() => {
  if (JSON.stringify(props.activityInfo) !== '{}' && JSON.stringify(props.activityInfo) !== null) {
    activityCountdown()
  }
})

/**
 * 倒计时
 */
let isCountDownInfo = {}
const activityCountdown = () => {
  const isActivityInfo = props.activityInfo
  const nowTime = new Date().getTime()
  // 团购
  isCountDownInfo = util.endOfStartTime(nowTime, util.dateToTimestamp((isActivityInfo.activityStatus === 1) ? isActivityInfo.startTime : isActivityInfo.endTime))
  if (isCountDownInfo.signs === 0 && props.isRefreshPage) {
    clearTimeout(endOfGroupTimer)
    // 拼团结束，刷新当前页面
    setTimeout(() => {
      uni.redirectTo({
        url: '/pages/detail/detail?spuId=' + props.prodId
      })
    }, 100)
    return
  }

  countDownInfo.value = isCountDownInfo
  endOfGroupTimer = setTimeout(() => activityCountdown(isActivityInfo), 1000)
}

</script>

<style lang="scss" scoped>
.component-countdown-bar{
/* 倒计时栏 */
.countdown-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #e43130;
  color: #fff;
  padding: 20rpx;
  box-sizing: border-box;
}
.second-kill {
  font-size: 32rpx;
}
.countdown-content {
  font-size: 30rpx;
}
.countdown-tips {
  font-size: 26rpx;
  margin-right: 10rpx;
}
/* 预售 */
.pre-sale {
  background: #e43130;
  padding: 20rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  color: #fff;
}
}

</style>
