<script setup lang="ts">
import dayjs from 'dayjs'

const props = defineProps<{ startAt?: string | number; endAt?: string | number }>()
const status = computed(() => {
  // 如果当前时间小于开始时间返回等待中，如果当前时间大于等于开始时间小于等于结束时间返回进行中，当前时间大于结束时间返回已结束
  const now = new Date()
  if (dayjs(now).isBefore(dayjs(props.startAt))) {
    return 'waiting'
  } else if (dayjs(now).isAfter(dayjs(props.startAt)) && dayjs(now).isBefore(dayjs(props.endAt))) {
    return 'running'
  } else {
    return 'overdue'
  }
})
</script>
<template>
  <div>
    <wd-count-down
      :time="dayjs({ waiting: startAt, running: endAt }[status]).diff(new Date(), 'millisecond')"
    >
      <template #default="{ current }">
        <div class="flex items-center gap-1.25 text-black/40 text-sm">
          <div>距{{ { waiting: '开始', running: '结束' }[status] }}还剩</div>
          <div
            class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
          >
            {{ current.days }}
          </div>
          <span class="custom-count-down-colon">天</span>
          <div
            class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
          >
            {{ current.hours }}
          </div>
          <span class="custom-count-down-colon">时</span>
          <div
            class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
          >
            {{ current.minutes }}
          </div>
          <span class="custom-count-down-colon">分</span>
        </div>
      </template>
    </wd-count-down>
  </div>
</template>
