<template>
    <view class="checkin-section">
        <view class="checkin-section__inner">
            <view class="checkin-section__header">
                <view class="checkin-section__header-inner">
                    <text class="checkin-section__title">签到记录</text>
                    <view
                        class="checkin-section__link"
                        hover-class="mi-tap--hover"
                        :hover-stay-time="150"
                        @tap="$emit('view-all')"
                    >
                        <text class="checkin-section__view-all">查看全部</text>
                        <image
                            class="checkin-section__link-arrow"
                            src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright2.png"
                            mode="aspectFit"
                        />
                    </view>
                </view>
            </view>
            <view class="checkin-section__list">
                <view class="checkin-section__list-inner">
                    <view
                        v-for="(item, index) in items"
                        :key="item.id"
                        class="checkin-section__row"
                    >
                        <view v-if="index > 0" class="checkin-section__divider"></view>
                        <view
                            class="checkin-section__item"
                            hover-class="mi-tap-row--hover"
                            :hover-stay-time="150"
                            @tap="$emit('item-tap', item)"
                        >
                            <view class="checkin-section__item-inner">
                                <view
                                    class="checkin-section__dot"
                                    :class="'checkin-section__dot--' + item.tagTheme"
                                ></view>
                                <view class="checkin-section__content">
                                    <view class="checkin-section__content-inner">
                                        <text class="checkin-section__desc">{{ item.title }}</text>
                                        <text class="checkin-section__text">{{ item.time }}</text>
                                    </view>
                                </view>
                                <view
                                    class="checkin-section__tag-badge"
                                    :class="'checkin-section__tag-badge--' + item.tagTheme"
                                >
                                    <text
                                        class="checkin-section__tag-text"
                                        :class="'checkin-section__tag-text--' + item.tagTheme"
                                    >
                                        {{ item.tag }}
                                    </text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    options: {
        virtualHost: false,
        styleIsolation: 'apply-shared'
    },
    props: {
        items: {
            type: Array,
            default: () => []
        }
    },
    emits: ['view-all', 'item-tap']
}
</script>

<style>
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-check-in-list.css';
@import '@/common/style/memberInfo/member-info-tap.css';
</style>
