import {
  defineComponent,
  computed,
  watch,
  reactive,
  onUnmounted,
  ref,
} from 'vue';
import { useI18n } from 'vue-i18n';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import './index.less';
dayjs.extend(duration);
export default defineComponent({
  props: {
    time: {
      type: Number,
      default: 0,
    },
  },
  emits: ['updateTime'],
  setup(props, { emit }) {
    let Interval: any = null;
    const { t } = useI18n();
    const RemainingTime = ref(0);
    const countDownList = reactive({
      list: [
        {
          label: t('raffle.day'),
          value: '00',
        },
        {
          label: t('raffle.hour'),
          value: '00',
        },
        {
          label: t('raffle.minute'),
          value: '00',
        },
        {
          label: t('raffle.second'),
          value: '00',
        },
      ],
    });
    // 获取倒计时
    const getCountDown = computed(() => {
      return countDownList.list;
    });
    const isMaxLength = (value: any) => {
      return (value + '').length < 2;
    };
    // 获取当前币倒计时
    const CountdownFun = (newTime: any) => {
      let diffTime: any = dayjs.duration(newTime);
      let day: any = diffTime.days(); //天
      let hours: any = diffTime.hours(); //小时
      let minutes: any = diffTime.minutes(); //分钟
      let seconds: any = diffTime.seconds(); //秒
      diffTime = null;
      if (day < 10 && isMaxLength(day)) {
        day = '0' + day + '';
      }
      if (hours < 10 && isMaxLength(hours)) {
        hours = '0' + hours + '';
      }
      if (minutes < 10 && isMaxLength(minutes)) {
        minutes = '0' + minutes + '';
      }
      if (seconds < 10 && isMaxLength(seconds)) {
        seconds = '0' + seconds + '';
      }
      countDownList.list[0].value = day;
      countDownList.list[1].value = hours;
      countDownList.list[2].value = minutes;
      countDownList.list[3].value = seconds;
    };
    // 关闭定时器
    const closeInterval = () => {
      if (Interval) {
        window.clearInterval(Interval);
      }
    };
    watch(
      () => props.time,
      (v) => {
        if (v) {
          // 开始倒计时
          closeInterval();
          RemainingTime.value = v;
          CountdownFun(RemainingTime.value);
          Interval = window.setInterval(() => {
            if (RemainingTime.value <= 0) {
              closeInterval();
              return;
            }
            CountdownFun(RemainingTime.value);
            RemainingTime.value -= 1000;
            // 提交最新的倒计时
            if (RemainingTime.value > 0) {
              emit('updateTime', RemainingTime.value);
            } else {
              emit('updateTime', 0);
            }
          }, 1000);
        }
      },
      {
        immediate: true,
      }
    );
    onUnmounted(() => {
      closeInterval();
    });
    return () => (
      <div class="custom-countdown-box">
        {getCountDown.value.map((item: any, index: number) => (
          <div class="custom-count-time">
            <div class="time-child">
              <div class="time-value">{item.value}</div>
              {index != getCountDown.value.length - 1 ? (
                <div class="dot-box">
                  <div></div>
                  <div></div>
                </div>
              ) : (
                ''
              )}
            </div>
            <div class="time-label">{item.label}</div>
          </div>
        ))}
      </div>
    );
  },
});
