{{-- QRコードアクション履歴 --}}
<div class="fd-card" v-if="selectedOption.value === 'qr'" style="padding: 24px 24px 0;">
    <div class="fd-card-table-header">
        <h2 class="fd-card-title">QRコードアクション履歴</h2>
        <lme-button-default type="secondary" size="md" @click="onOpenQrFilter">
            <lme-icon file-name="filter-outlined" size="18"></lme-icon>
            <span>絞り込み</span>
        </lme-button-default>
    </div>

    <div class="fd-card-table-wrap" ref="fdQrTableTop">
        <lme-table
            :columns="qrColumns"
            :data-source="qrRows"
            row-key="id"
            empty-text="まだデータがありません"
        >
            <template slot="cell-scan_datetime" scope="slotProps">
                @{{ formatDate(slotProps.record.scan_datetime, 'YYYY/MM/DD (ddd) HH:mm') }}
            </template>
            <template slot="cell-action_type" scope="slotProps">
                <span class="fd-tag-history-action">
                    <span
                        class="fd-status-dot"
                        :style="{ background: slotProps.record.action_type_color }"
                    ></span>
                    <span style="color: #1f1f1f">@{{ slotProps.record.action_type }}</span>
                </span>
            </template>
            <template slot="cell-action_capture" scope="slotProps">
               <span v-if="slotProps.record.action_capture || slotProps.record.message_id"
                     class="has_action"
                     @click="openActionCapturePreview(slotProps.record.action_capture, [slotProps.record.message_id])">プレビュー</span>
                <span v-else>設定なし</span>
            </template>
        </lme-table>
    </div>

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

{{-- QRコードアクション履歴 絞り込み modal --}}
<lme-modal
    v-if="selectedOption.value === 'qr'"
    v-model="qrFilterModalOpen"
    :header="false"
    :width="736"
>
    <div class="fd-tag-edit">
        {{-- Header: title + close --}}
        <div class="fd-tag-edit-header">
            <h2 class="fd-tag-edit-title">絞り込み</h2>
            <span class="fd-tag-edit-close" @click="onCloseQrFilterModal" role="button" aria-label="close">
                <lme-icon size="20">
                    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5 5l10 10M15 5L5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                    </svg>
                </lme-icon>
            </span>
        </div>

        {{-- Body --}}
        <div class="fd-tag-edit-body">
            {{-- Date range --}}
            <div>
                <div class="fd-tag-edit-section-title">該当期間を選択</div>
                <lme-range-picker
                    v-model="qrFilterDateRange"
                    placeholder="日付を選択"
                    placeholder-end="日付を選択"
                    size="lg"
                ></lme-range-picker>
            </div>

            {{-- Picker: folders + items --}}
            <div class="fd-tag-edit-picker">
                <div class="fd-tag-edit-picker-left">
                    <div class="fd-tag-edit-section-title">フォルダ</div>
                    <div class="fd-tag-edit-folder-list">
                        <div
                            v-for="folder in qrFilterFolders"
                            :key="'qr-filter-folder-' + folder.folder_id"
                            class="fd-tag-edit-folder"
                            :class="{ 'is-selected': qrFilterSelectedFolderId === folder.folder_id }"
                            @click="qrFilterSelectedFolderId = folder.folder_id"
                        >
                            @{{ folder.folder_name }}
                        </div>
                    </div>
                </div>

                <div class="fd-tag-edit-picker-right">
                    <div class="fd-tag-edit-section-title">アイテム</div>
                    <div class="fd-tag-edit-item-box">
                        <div
                            v-for="item in qrFilterCurrentItems"
                            :key="'qr-filter-item-' + item.id"
                            class="fd-tag-edit-item"
                        >
                            <lme-checkbox
                                :value="qrFilterSelectedIds.includes(item.id)"
                                @change="onQrFilterToggleItem(item)"
                                :label="item.name"
                            ></lme-checkbox>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Selected chips --}}
            <div class="fd-tag-edit-chips-card">
                <div class="fd-tag-edit-section-title">追加する項目</div>
                <div class="fd-tag-edit-chips">
                    <lme-tag
                        v-for="item in qrFilterSelectedItems"
                        :key="'qr-filter-chip-' + item.id"
                        :text="item.name"
                        type="default"
                        size="md"
                        closeable
                        @close="onQrFilterRemoveChip(item)"
                    ></lme-tag>
                </div>
            </div>
        </div>

        {{-- Footer --}}
        <div class="fd-tag-edit-footer">
            <span class="fd-tag-edit-count">@{{ qrFilterSelectedItems.length }}件　選択中</span>
            <div class="fd-tag-edit-footer-actions">
                <lme-button-flat type="primary" size="lg" @click="onCloseQrFilterModal">キャンセル</lme-button-flat>
                <lme-button-default type="primary" size="lg" @click="onSubmitQrFilter">表示</lme-button-default>
            </div>
        </div>
    </div>
</lme-modal>