{{-- 単品商品 --}}
<div class="fd-card" v-if="selectedOption.value === 'single'" style="padding: 24px 24px 0;">
    <h2 class="fd-card-title">単品商品購入履歴</h2>

    <div class="fd-card-table-wrap" ref="fdSingleTableTop">
        <lme-table
            :columns="singleColumns"
            :data-source="singleRows"
            row-key="id"
            empty-text="まだデータがありません"
            class="table-product"
        >
            <template slot="cell-purchase_date" scope="slotProps">
                @{{ formatDate(slotProps.record.purchase_date, 'YYYY/MM/DD (ddd) HH:mm') }}
            </template>

            <template slot="cell-product_name" scope="slotProps">
                <div class="fd-product-cell">
                    <div class="fd-product-thumb" :class="{ 'fd-product-thumb--letter': !slotProps.record.thumbnail_url }">
                        <img :src="slotProps.record?.thumbnail_url ? slotProps.record?.thumbnail_url : '/images/asp-default-project.png'" @error="altImageProductItem($event)" alt="">
                    </div>
                    <span>@{{ slotProps.record.product_name }}</span>
                </div>
            </template>

            <template slot="cell-status_label" scope="slotProps">
                <lme-status
                    :text="slotProps.record.status_label"
                    :color="slotProps.record.status_color || '#D9D9D9'"
                    size="md"
                ></lme-status>
            </template>
        </lme-table>
    </div>

    <div class="fd-card-pagination">
        <pagination
            :pagination="singlePagination"
            :is_limit="true"
            :arr_limit="[10, 20, 30, 50, 100]"
            end_text_limit="件表示"
            @change_page="onSinglePageChange"
            @change_limit="onSingleLimitChange"
        ></pagination>
    </div>
</div>