<!-- Created by henian.xu on 2022/3/14. -->

<template>
    <div
        v-if="countdownData"
        :class="classes"
        :style="styles">
        <div class="label">{{ statusName }}</div>
        <div class="inner">
            <div class="item">
                <CountdownItem
                    v-if="countdownData.years"
                    :value="countdownData.years"
                    :label="$$t('vmf_year', '年')"
                ></CountdownItem>
            </div>
            <div class="item">
                <CountdownItem
                    v-if="countdownData.days"
                    :value="countdownData.days"
                    :label="$$t('vmf_day', '天')"
                ></CountdownItem>
            </div>
            <div class="item">
                <CountdownItem
                    :value="countdownData.hours"
                    label=":"></CountdownItem>
            </div>
            <div class="item">
                <CountdownItem
                    :value="countdownData.minutes"
                    label=":"></CountdownItem>
            </div>
            <div class="item">
                <CountdownItem :value="countdownData.seconds"></CountdownItem>
            </div>
        </div>
    </div>
</template>

<script>
import { Utils } from 'vmf';
import dayjs from 'dayjs';
import CountdownItem from './_CountdownItem';

export default {
    name: 'Countdown',
    components: { CountdownItem },
    data() {
        return {
            nowDate: Date.now(),
            countdownData: null,
        };
    },
    props: {
        startTime: {
            type: Number,
            default: 0,
            // default: Date.now() + 5 * 1000,
        },
        endTime: {
            type: Number,
            default: 0,
            // default: Date.now() + 10 * 1000,
        },
        direction: {
            type: String,
            default: null, // row;column
        },
        backgroundColor: {
            type: String,
            default: '#f61010', // row;column
        },
        color: {
            type: String,
            default: '#fff', // row;column
        },
    },
    computed: {
        classes() {
            const { direction } = this;
            return ['countdown', direction];
        },
        styles() {
            const { status } = this;
            const res = {};
            if (status === 2) {
                res['--countdown-item-bgc'] = this.backgroundColor;
                res['--countdown-item-color'] = this.color;
            }
            return res;
        },
        status() {
            const { nowDate, startTime, endTime } = this;
            // 1：未开始; 2：进行中; 3：已结束
            if (nowDate < startTime) return 1;
            if (nowDate >= startTime && nowDate < endTime) return 2;
            return 3;
        },
        statusName() {
            const { status } = this;
            const statusMap = {
                1: this.$$t('vmf_start_of_distance', '距开始'),
                2: this.$$t('vmf_end_of_distance', '离结束'),
                3: this.$$t('vmf_finished', '已结束'),
            };
            return statusMap[status] || '';
        },
    },
    methods: {
        startCountDown() {
            this.nowDate = Date.now();
            const { status, startTime, endTime, nowDate } = this;
            const timestamp = Math.max(status === 1 ? startTime - nowDate : endTime - nowDate, 0);
            let duration = dayjs.duration(timestamp, 'ms');
            this.countdownData = { ...duration.$d };
            Utils.startCountdown(
                timestamp,
                (str, time) => {
                    duration = dayjs.duration(time, 'ms');
                    this.countdownData = { ...duration.$d };
                },
                () => {
                    this.startCountDown();
                },
            );
        },
    },
    mounted() {
        this.startCountDown();
    },
};
</script>

<style lang="scss">
.countdown {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    > .label {
        line-height: 1;
    }

    > .inner {
        display: inline-flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;

        > .item {
            margin-left: $margin-small;
        }
    }

    &.column {
        flex-direction: column;
        > .label {
            margin-bottom: $margin-small;
        }
    }
}
</style>
