<template>
    <view class="date-strip__item">
        <view
            class="date-strip__grid"
            v-for="(item, index) in dates"
            @click="onClick(item, index)"
            :key="item.key"
        >
            <text>
                {{ item.prefix }}
            </text>
            <view
                class="date-strip__grid-info"
                :style="[
                    curIndex == index ? { background: '#0E66FB', 'border-radius': '99px' } : {}
                ]"
            >
                <text
                    class="date-strip__grid-day"
                    :class="{
                        'date-strip__grid--active-text': curIndex == index
                    }"
                >
                    {{ item.text }}
                </text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import dateStripItemProps from './stripItemProps'

const props = defineProps({
    ...dateStripItemProps
})
const emit = defineEmits(['click'])

const date = new Date()
const day = date.getDate()
const curIndex = ref(props.dates.findIndex(item => item.day == day))
const onClick = (day, index: number) => {
    emit('click', day)
    curIndex.value = index
}
</script>

<style lang="scss">
@import './index.scss';
</style>
