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

<template>
    <div class="countdown-item">
        <div class="value">{{ currentValue }}</div>
        <div
            v-if="label"
            class="label">{{ label }}</div>
    </div>
</template>

<script>
export default {
    name: 'CountdownItem',
    data() {
        return {};
    },
    props: {
        value: {
            type: [Number, String],
            default: '00',
        },
        label: {
            type: String,
            default: '',
        },
    },
    computed: {
        currentValue() {
            const { value } = this;
            const res = `${value}`;
            if (Number.isNaN(value)) return res;
            return res.padStart(2, '0');
        },
    },
};
</script>

<style lang="scss">
.countdown-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    > .value {
        position: relative;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: $padding-small;
        background-color: var(--countdown-item-bgc, $gray6);
        color: var(--countdown-item-color, #fff);
        font-size: 15px;
        font-weight: bold;
        box-shadow: 0 2px 5px -3px mix(#000, $gray3, 20);
        &:after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: rgba(#fff, 0.5);
        }
    }

    > .label {
        margin-left: $margin-small;
    }
}
</style>
