<template>
  <div class="count-down flex-ac">
    <div v-for="(item, index) in formTimeArr" :key="index" class="flex-ac item">
      <div class="flex-ac time-unit" :class="{ 'has-split': index !== 3 }">
        <div class="time text-36 tc-1B2330 fw-5">{{ item.text }}</div>
        <div class="text-24 tc-9AA4B6">{{ item.unit }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";
import useCountDown from "@/hooks/useCountDown";

const props = defineProps({
  deadline: {
    type: String,
    default: "",
  },
});

const { formTimeArr, startDownTime } = useCountDown();

startDownTime(props.deadline);
</script>
<style lang="scss" scoped>
.text-24 {
  font-size: 24px;
}
.tc-9AA4B6 {
  color: #9aa4b6;
}
.text-36 {
  font-size: 36px;
}
.tc-1B2330 {
  color: #1b2330;
}
.count-down {
  justify-content: center;
  .item {
    justify-content: center;
    .time-unit {
      justify-content: center;
      flex-direction: column;
      .time {
        margin-bottom: 8px;
        padding: 20px 14px;
        background: #f5f5f5;
        border-radius: 12px;
      }
    }
    .has-split {
      position: relative;
      margin-right: 34px;
      &::after {
        content: ":";
        position: absolute;
        font-weight: 600;
        font-size: 36px;
        line-height: 36px;
        color: #9aa4b6;
        top: 16px;
        right: -22px;
      }
    }
  }
}
</style>
