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

    <div class="fd-card-table-wrap" ref="fdSubscriptionTableTop">
        <lme-table
            :columns="subscriptionColumns"
            :data-source="subscriptionRows"
            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>

            <template slot="cell-history" scope="slotProps">
                <lme-button-ghost color="blue" size="sm" @click.native="onOpenPaymentHistory(slotProps.record)">
                    詳細
                </lme-button-ghost>
            </template>
        </lme-table>
    </div>

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

{{-- 決済履歴 modal --}}
<lme-modal
    v-if="selectedOption.value === 'subscription'"
    v-model="paymentHistoryModalOpen"
    :header="false"
    :width="840"
>
    <div class="fd-payment-history">
        <div class="fd-payment-history-header">
            <div class="fd-payment-history-title-wrap">
                <h2 class="fd-payment-history-title">決済履歴</h2>
                <lme-tag
                    v-if="currentSubscription.product_name"
                    :text="currentSubscription.product_name"
                    type="default"
                    size="md"
                ></lme-tag>
            </div>
            <lme-button-ghost type="secondary" size="sm" icon @click.native="onClosePaymentHistory">
                <lme-icon file-name="close-outlined"></lme-icon>
            </lme-button-ghost>
        </div>
        <div class="fd-payment-history-table">
            <div class="fd-payment-history-row fd-payment-history-row--head">
                <div class="fd-payment-history-col fd-payment-history-col--date">操作日時</div>
                <div class="fd-payment-history-col fd-payment-history-col--amount">金額</div>
                <div class="fd-payment-history-col fd-payment-history-col--method">決済方法</div>
                <div class="fd-payment-history-col fd-payment-history-col--status">ステータス</div>
            </div>
            <div
                v-for="row in paymentHistoryRows"
                :key="row.id"
                class="fd-payment-history-row"
            >
                <div class="fd-payment-history-col fd-payment-history-col--date">@{{ formatDate(row.operated_at, 'YYYY/MM/DD (ddd) HH:mm') }}</div>
                <div class="fd-payment-history-col fd-payment-history-col--amount">@{{ row.amount }}</div>
                <div class="fd-payment-history-col fd-payment-history-col--method">@{{ row.payment_method }}</div>
                <div class="fd-payment-history-col fd-payment-history-col--status">
                    <lme-status :text="row.status_label" :color="row.status_color || '#D9D9D9'" size="md"></lme-status>
                </div>
            </div>
        </div>
        <div class="fd-payment-history-footer">
            <lme-button-flat type="primary" size="md" @click.native="onClosePaymentHistory">閉じる</lme-button-flat>
        </div>
    </div>
</lme-modal>