<template>
    <view class="booking-section">
        <view class="booking-section__inner">
            <view class="booking-section__header">
                <view class="booking-section__header-inner">
                    <text class="booking-section__title">我的预约</text>
                    <view
                        class="booking-section__link"
                        hover-class="mi-tap--hover"
                        :hover-stay-time="150"
                        @tap="$emit('view-all')"
                    >
                                <text class="booking-section__view-all">预约记录</text>
                        <image
                            class="booking-section__link-arrow"
                            src="/static/images/chevronright4.png"
                            mode="aspectFit"
                        />
                    </view>
                </view>
            </view>
            <view
                v-for="item in previewItems"
                :key="item.id"
                class="booking-section__item"
                hover-class="mi-tap-row--hover"
                :hover-stay-time="150"
                @tap="$emit('item-tap', item)"
            >
                <view class="booking-section__item-inner">
                    <view class="booking-section__date">
                        <view class="booking-section__date-inner">
                            <text class="booking-section__num">{{ item.dateDay }}</text>
                            <text class="booking-section__date-sub">{{ item.dateMonth }}</text>
                        </view>
                    </view>
                    <view class="booking-section__content">
                        <view class="booking-section__content-inner">
                            <text class="booking-section__desc">{{ item.desc }}</text>
                            <view class="booking-section__meta">
                                <view class="booking-section__meta-inner">
                                    <image
                                        class="booking-section__icon-coach"
                                        src="/static/images/user2.png"
                                        mode="aspectFit"
                                    />
                                    <text class="booking-section__coach">教练：{{ item.coach }}</text>
                                    <image
                                        class="booking-section__icon-location"
                                        src="/static/images/mappin1.png"
                                        mode="aspectFit"
                                    />
                                    <text class="booking-section__text">{{ item.location }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="booking-section__status-wrap">
                        <view
                            class="booking-section__status-badge"
                            :class="'booking-section__status-badge--' + item.status"
                        >
                            <text
                                class="booking-section__status-text"
                                :class="{ 'booking-section__status-text--pending': item.status === 'pending' }"
                            >
                                {{ item.statusLabel }}
                            </text>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="!previewItems.length" class="booking-section__empty">
                <text class="booking-section__empty-text">暂无进行中的预约</text>
            </view>
        </view>
    </view>
</template>

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

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

.booking-section__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.booking-section__empty-text {
    font-size: 14px;
    color: #8A99B4;
}
</style>
