<template>
    <div class="sign-info w-[28px]" :class="{ isSigned: info.isSigned }">
        <div class="sign-content animate__animated" :class="{ animate__flipInX: info.isSigned }">
            <div class="val text-xs text-black">+10</div>

            <div v-if="info.isSigned" class="w-[18px] h-[18px] flex items-center justify-center">
                <van-icon name="success" size="16" class="mt-[3px]" color="#706557" />
            </div>
            <img src="@/assets/icon_jindou.png" v-else class="w-[18px] h-[18px]" alt="" />
        </div>
        <div class="time text-[10px] text-[#130D00] text-center">{{ time }}</div>
    </div>
</template>

<script setup>
import '@/styles/animate.css'
import { format, isToday, isTomorrow } from 'date-fns'
import { ref, computed } from 'vue'

const props = defineProps({
    info: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

const time = computed(() => {
    if (props.info.date) {
        if (props.info.isSigned) {
            return '已签'
        }
        if (isToday(new Date(props.info.date))) {
            return '今天'
        } else if (isTomorrow(new Date(props.info.date))) {
            return '明天'
        } else {
            return format(new Date(props.info.date), 'MM.dd', new Date())
        }
    }
    return ''
})
</script>

<style lang="less" scoped>
.sign-info {
    display: inline-block;
}
.sign-content {
    width: 28px;
    height: 50px;
    background: linear-gradient(180deg, #fa9f04 0%, #fee52a 74%, #ffac44 100%);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.isSigned {
    .sign-content {
        background: #e1ccb0;

        .val {
            opacity: 0.5;
        }
    }

    .time {
        color: #00000080;
    }
}
</style>
