{{-- リッチメニュー表示履歴 --}}
<div class="fd-card" v-if="selectedOption.value === 'richmenu'" style="padding: 24px 24px 0;">
    <div class="fd-card-table-header">
        <h2 class="fd-card-title">リッチメニュー表示履歴</h2>
        <lme-button-default type="secondary" size="md" @click="onOpenRichmenuFilter">
            <lme-icon file-name="filter-outlined" size="12"></lme-icon>
            <span>絞り込み</span>
        </lme-button-default>
    </div>
    <div class="fd-card-table-wrap" ref="fdRichmenuTableTop">
        <lme-table
            :columns="richmenuColumns"
            :data-source="richmenuRows"
            row-key="id"
            empty-text="まだデータがありません"
            max-height="540px"
        ></lme-table>
    </div>
    <div class="fd-card-pagination">
        <pagination
            :pagination="richmenuPagination"
            :is_limit="true"
            :arr_limit="[10, 50, 100]"
            end_text_limit="件表示"
            @change_page="onRichmenuPageChange"
            @change_limit="onRichmenuLimitChange"
        ></pagination>
    </div>
</div>

{{-- リッチメニュー表示履歴 絞り込み modal --}}
<lme-modal
    v-if="selectedOption.value === 'richmenu'"
    v-model="richmenuFilterModalOpen"
    :header="false"
    :width="732"
>
    <div class="fd-rm-filter">
        <div class="fd-rm-filter-header">
            <h2 class="fd-rm-filter-title">絞り込み</h2>
            <lme-button-ghost type="secondary" size="sm" icon @click="onCloseRichmenuFilterModal">
                <lme-icon>
                    <svg preserveAspectRatio="none" overflow="visible" style="display: block;" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g id="close-outlined">
                            <rect opacity="0" width="16" height="16" fill="var(--fill-0, #1F1F1F)"/>
                            <path d="M12.4978 2.59872C12.4982 2.59883 12.4985 2.599 12.4991 2.59964L13.4005 3.50104C13.4012 3.50168 13.4014 3.50198 13.4015 3.50236C13.4016 3.50271 13.4016 3.50308 13.4015 3.50343C13.4014 3.50379 13.4012 3.50409 13.4005 3.50473L8.90518 8.00009L13.4005 12.4955C13.4012 12.4961 13.4014 12.4964 13.4015 12.4967C13.4016 12.4971 13.4016 12.4975 13.4015 12.4978C13.4014 12.4982 13.4012 12.4985 13.4005 12.4991L12.4991 13.4005C12.4985 13.4012 12.4982 13.4014 12.4978 13.4015C12.4975 13.4016 12.4971 13.4016 12.4967 13.4015C12.4964 13.4014 12.4961 13.4012 12.4955 13.4005L8.00009 8.90518L3.50473 13.4005C3.50411 13.4012 3.50379 13.4014 3.50343 13.4015C3.50308 13.4016 3.5027 13.4016 3.50234 13.4015C3.502 13.4014 3.50168 13.4012 3.50104 13.4005L2.59964 12.4991C2.599 12.4985 2.59883 12.4982 2.59872 12.4978C2.59861 12.4975 2.59861 12.4971 2.59872 12.4967C2.59883 12.4964 2.599 12.4961 2.59964 12.4955L7.09498 8.00009L2.59964 3.50473C2.599 3.50411 2.59883 3.50379 2.59872 3.50343C2.59861 3.50308 2.59861 3.5027 2.59872 3.50234C2.59883 3.502 2.599 3.50168 2.59964 3.50104L3.50104 2.59964C3.50168 2.599 3.50198 2.59883 3.50236 2.59872C3.50271 2.59861 3.50308 2.59861 3.50343 2.59872C3.50379 2.59883 3.50409 2.599 3.50473 2.59964L8.00009 7.09498L12.4955 2.59964C12.4961 2.599 12.4964 2.59883 12.4967 2.59872C12.4971 2.59861 12.4975 2.59861 12.4978 2.59872Z" fill="var(--fill-0, #1F1F1F)"/>
                        </g>
                    </svg>
                </lme-icon>
            </lme-button-ghost>
        </div>

        <div class="fd-rm-filter-body">
            {{-- 該当期間を選択 --}}
            <div class="fd-rm-filter-section">
                <div class="fd-rm-filter-section-title">該当期間を選択</div>
                <lme-range-picker
                    v-model="richmenuFilterDateRange"
                    size="md"
                    placeholder="日付を選択"
                    placeholder-end="日付を選択"
                    width="100%"
                ></lme-range-picker>
            </div>

            {{-- フォルダ / アイテム --}}
            <div class="fd-rm-filter-picker">
                <div class="fd-rm-filter-picker-left">
                    <div class="fd-rm-filter-section-title">フォルダ</div>
                    <div class="fd-rm-filter-folder-list">
                        <div
                            v-for="folder in richmenuFilterFolders"
                            :key="'rm-filter-folder-' + folder.id"
                            class="fd-rm-filter-folder"
                            :class="{ 'is-selected': richmenuFilterSelectedFolderId === folder.id }"
                            @click="richmenuFilterSelectedFolderId = folder.id"
                        >
                            @{{ folder.name }}
                        </div>
                    </div>
                </div>
                <div class="fd-rm-filter-picker-right">
                    <div class="fd-rm-filter-section-title">アイテム</div>
                    <div class="fd-rm-filter-item-box">
                        <div v-if="!richmenuFilterCurrentItems.length" class="fd-rm-filter-item-empty">
                            まだデータがありません
                        </div>
                        <div
                            v-for="item in richmenuFilterCurrentItems"
                            :key="'rm-filter-item-' + item.id"
                            class="fd-rm-filter-item"
                        >
                            <lme-checkbox
                                :value="richmenuFilterSelectedIds.indexOf(item.id) >= 0"
                                :label="richmenuTruncateName(item.name)"
                                @input="onRichmenuFilterToggleItem(item, $event)"
                            ></lme-checkbox>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 追加する項目 (chips) --}}
            <div v-if="richmenuFilterSelectedItems.length" class="fd-rm-filter-chips-card">
                <div class="fd-rm-filter-section-title">追加する項目</div>
                <div class="fd-rm-filter-chips">
                    <lme-tag
                        v-for="chip in richmenuFilterSelectedItems"
                        :key="'rm-filter-chip-' + chip.id"
                        :text="chip.name"
                        size="md"
                        closeable
                        @close="onRichmenuFilterRemoveChip(chip)"
                    ></lme-tag>
                </div>
            </div>
        </div>

        {{-- Footer --}}
        <div class="fd-rm-filter-footer">
            <div class="fd-rm-filter-count">@{{ richmenuFilterSelectedIds.length }}件　選択中</div>
            <div class="fd-rm-filter-actions">
                <lme-button-ghost size="md" @click="onCloseRichmenuFilterModal">キャンセル</lme-button-ghost>
                <lme-button-default type="primary" size="md" @click="onSubmitRichmenuFilter">
                    @{{ richmenuFilterSelectedIds.length ? '表示' : '保存' }}
                </lme-button-default>
            </div>
        </div>
    </div>
</lme-modal>