{{-- アクションキャプチャ プレビュー drawer --}}
<lme-drawer
    v-model="actionCapturePreviewOpen"
    width="420px"
    title="プレビュー"
>
    <div class="lme-drawer-content fd-action-capture-preview">
        <lme-tab-horizontal
            v-model="actionCapturePreviewTabId"
            :tabs="actionCapturePreviewTabs"
            size="md"
        ></lme-tab-horizontal>

        {{-- メッセージ tab --}}
        <div v-if="actionCapturePreviewTabId === 1"
             class="fd-action-capture-preview-pane fd-acp-messages scrollable">
            <template v-if="actionCapturePreviewMessages.length">
                <template v-for="(msg, mIdx) in actionCapturePreviewMessages">
                    {{-- text --}}
                    <div v-if="msg.type == 1"
                         :key="'msg-' + mIdx"
                         class="fd-acp-bubble">
                        <span style="white-space: pre-wrap; word-break: break-word;">@{{ msg.content }}</span>
                    </div>
                    {{-- image / image_map --}}
                    <div v-else-if="msg.type == 3 || msg.type == 7"
                         :key="'msg-' + mIdx"
                         class="fd-acp-image">
                        <img :src="(typeof msg.content === 'string' && msg.content.startsWith('http')) ? msg.content : ('{{ env('URL_SERVER_MEDIA') }}' + msg.content)"
                             alt=""/>
                    </div>
                    {{-- sticker --}}
                    <div v-else-if="msg.type == 6"
                         :key="'msg-' + mIdx"
                         class="fd-acp-sticker">
                        <img v-if="msg.content && msg.content.stickerId"
                             :src="'https://stickershop.line-scdn.net/stickershop/v1/sticker/' + msg.content.stickerId + '/ANDROID/sticker.png'"
                             alt=""/>
                    </div>
                    {{-- video --}}
                    <div v-else-if="msg.type == 4"
                         :key="'msg-' + mIdx"
                         class="fd-acp-video">
                        <video controls preload="metadata">
                            <source :src="(typeof msg.content === 'string' && msg.content.startsWith('http')) ? msg.content : ('{{ env('URL_SERVER_MEDIA_B2', env('URL_SERVER_MEDIA')) }}' + msg.content)">
                        </video>
                    </div>
                    {{-- audio --}}
                    <div v-else-if="msg.type == 5"
                         :key="'msg-' + mIdx"
                         class="fd-acp-audio">
                        <audio controls preload="metadata"
                               v-if="msg.content && msg.content.filePath">
                            <source :src="msg.content.filePath.startsWith('http') ? msg.content.filePath : ('{{ env('URL_SERVER_MEDIA') }}' + msg.content.filePath)">
                        </audio>
                    </div>
                    {{-- buttons (carousel) --}}
                    <div v-else-if="msg.type == 2"
                         :key="'msg-' + mIdx"
                         class="fd-acp-buttons mess-button">
                        <div class="box-scl-button">
                            {{-- type 1 --}}
                            <div v-if="msg.content && msg.content.type_button == 1"
                                 v-for="(carousel, k) in msg.content.data"
                                 :key="'b1-' + mIdx + '-' + k"
                                 class="carousel">
                                <div class="question_wap">
                                    <div class="head_buttons">
                                        <p v-if="carousel.thumbnail_path">
                                            <img :src="carousel.thumbnail_path.startsWith('http') ? carousel.thumbnail_path : ((carousel.image_server || '{{ env('URL_SERVER_MEDIA') }}') + carousel.thumbnail_path)" alt=""/>
                                        </p>
                                        <p class="buttons_title text-left" style="white-space: pre-wrap; font-weight: 300;">@{{ carousel.title }}</p>
                                        <p class="buttons_content text-left" style="white-space: pre-wrap; font-weight: bold;">@{{ carousel.text }}</p>
                                    </div>
                                    <div class="answer_button">
                                        <p v-for="(btn, bi) in carousel.buttons" :key="'b1b-' + bi"
                                           class="btn_modal_preview">@{{ btn.label }}</p>
                                    </div>
                                </div>
                            </div>
                            {{-- type 2 --}}
                            <div v-if="msg.content && msg.content.type_button == 2"
                                 v-for="(carousel, k) in msg.content.data"
                                 :key="'b2-' + mIdx + '-' + k"
                                 class="carousel">
                                <div class="question_wap btn-type2-preview">
                                    <div class="head_buttons" style="padding: 10px 10px 0 10px; border: 0;">
                                        <p v-if="carousel.thumbnail_path"
                                           style="width: 100%; margin-bottom: 10px; overflow: hidden; border: 1px solid #dddddd; border-radius: 5px;">
                                            <img :src="carousel.thumbnail_path.startsWith('http') ? carousel.thumbnail_path : ((carousel.image_server || '{{ env('URL_SERVER_MEDIA') }}') + carousel.thumbnail_path)" alt="" style="width: 100%;"/>
                                        </p>
                                        <div v-if="carousel.title || carousel.text"
                                             style="border: 1px solid #E0E0E0; border-radius: 5px; padding: 10px; text-align: center;">
                                            <p v-if="carousel.title" style="white-space: pre-wrap;"
                                               :style="[{ color: carousel.title_color }, carousel.is_title_bold == 1 ? {'font-weight':'bold'} : {'font-weight':'normal'}]">@{{ carousel.title }}</p>
                                            <div v-if="carousel.title && carousel.text" style="border-bottom: 1px solid #707070; margin: 8px 0; height: 1px;"></div>
                                            <p v-if="carousel.text" style="white-space: pre-wrap;"
                                               :style="[{ color: carousel.text_color }, carousel.is_text_bold == 1 ? {'font-weight':'bold'} : {'font-weight':'normal'}]">@{{ carousel.text }}</p>
                                        </div>
                                    </div>
                                    <div class="answer_button" style="padding: 0 10px 10px 10px; text-align: center;">
                                        <p v-for="(btn, bi) in carousel.buttons" :key="'b2b-' + bi"
                                           class="btn_modal_preview"
                                           style="border-radius: 3px; font-weight: bold; margin-top: 10px;"
                                           :style="{ color: btn.label_color, backgroundColor: btn.label_bg }">@{{ btn.label }}</p>
                                    </div>
                                </div>
                            </div>
                            {{-- type 3 (image-only buttons) --}}
                            <div v-if="msg.content && msg.content.type_button == 3"
                                 v-for="(carousel, k) in msg.content.data"
                                 :key="'b3-' + mIdx + '-' + k"
                                 class="carousel">
                                <div class="question_wap" style="width: 100%; background: #FFFFFF; box-shadow: 0 0 5px #0000001A; border-radius: 10px;">
                                    <div v-if="carousel.thumbnail_path"
                                         style="margin: auto; width: 100%; overflow: hidden; position: relative;">
                                        <img :src="carousel.thumbnail_path.startsWith('http') ? carousel.thumbnail_path : ((carousel.image_server || '{{ env('URL_SERVER_MEDIA') }}') + carousel.thumbnail_path)" alt="" style="width: 100%;"/>
                                    </div>
                                </div>
                            </div>
                            {{-- type 4 (quick reply) --}}
                            <div v-if="msg.content && msg.content.type_button == 4"
                                 :key="'b4-' + mIdx"
                                 class="carousel">
                                <div class="question_wap" style="width: 100%; box-shadow: 0 0 5px #0000001A; border-radius: 10px; background: #D9DBE7; padding: 3px;">
                                    <div style="background: #FFFFFF; border-radius: 5px; margin: 7px;">
                                        <div v-if="msg.content.flag_type_content_quick_reply == 1"
                                             style="margin: 0 auto; overflow: auto; border-radius: 5px;">
                                            <div class="text-left" style="white-space: pre-line; word-wrap: break-word;">@{{ msg.content.text }}</div>
                                        </div>
                                        <div v-if="msg.content.flag_type_content_quick_reply == 2">
                                            <img class="w-full"
                                                 :src="(msg.content.content && msg.content.content.startsWith('http')) ? msg.content.content : ((msg.content.image_server || '{{ env('URL_SERVER_MEDIA') }}') + msg.content.content)" alt=""/>
                                        </div>
                                    </div>
                                    <div class="container-btn-quick-reply">
                                        <div v-for="(btn, bi) in msg.content.buttons" :key="'b4b-' + bi">@{{ btn.label.length > 8 ? btn.label.substring(0, 5) + '...' : btn.label }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- location --}}
                    <div v-else-if="msg.type == 8"
                         :key="'msg-' + mIdx"
                         class="fd-acp-bubble fd-acp-location">
                        <p class="temp_name"><i class="fas fa-flag"></i> @{{ msg.content.title }}</p>
                        <p class="location_address">@{{ msg.content.address }}</p>
                    </div>

                    {{-- introduction --}}
                    <div v-else-if="msg.type == 9"
                         :key="'msg-' + mIdx"
                         class="fd-acp-introduction">
                        <div class="message-intro">
                            <div class="content-btn font-semibold">@{{ msg.content && msg.content.content }}</div>
                            <div class="text-center p-3" style="background: #F8F8F8;">
                                <a class="text-[14px] text-[#5799DB] font-light"
                                   :href="msg.content && msg.content.url_addfriend" target="_blank">友だちに追加する</a>
                            </div>
                        </div>
                    </div>

                    {{-- unknown --}}
                    <div v-else
                         :key="'msg-' + mIdx"
                         class="fd-acp-bubble fd-acp-bubble-other">
                        <span>[その他のメッセージ]</span>
                    </div>
                </template>
            </template>
            <div v-else class="fd-acp-empty">メッセージなし</div>
        </div>

        {{-- アクション tab --}}
        <div v-if="actionCapturePreviewTabId === 2"
             class="fd-action-capture-preview-pane fd-acp-actions scrollable">
            <template v-if="actionCapturePreviewActions.length">
                <template v-if="item.type != 'text' && item.type != 'template'" v-for="(item, aIdx) in actionCapturePreviewActions">
                    <div :key="'act-' + aIdx" class="wrap-item-action-herme">
                        {{-- template --}}
{{--                        <template v-if="item.type === 'template'">--}}
{{--                            <div class="type"><div>テンプレート</div></div>--}}
{{--                            <div class="content-preview-action">--}}
{{--                                <div>@{{ item.display_name }}</div>--}}
{{--                                <div>を送信</div>--}}
{{--                            </div>--}}
{{--                        </template>--}}

                        {{-- richmenu --}}
                        <template v-if="item.type === 'richmenu'">
                            <div class="type"><div>リッチメニュー</div></div>
                            <div class="content-preview-action">
                                <div>
                                    <span v-if="item.data.action != 1">@{{ item.display_name }}</span>
                                    <span v-else>表示を停止</span>
                                </div>
                                <div><span v-if="item.data.action != 1">を表示</span></div>
                            </div>
                        </template>

                        {{-- scenario --}}
                        <template v-else-if="item.type === 'scenario'">
                            <div class="type"><div>ステップ</div></div>
                            <div class="content-preview-action">
                                <div>
                                    <span v-if="item.data.action == 1">停止</span>
                                    <span v-else>@{{ item.display_name }}</span>
                                </div>
                                <div>
                                    <span v-if="item.data.action == 2">を開始</span>
                                    <span v-else-if="item.data.action == 3">を@{{ item.data.start_day }}日目から再開</span>
                                </div>
                            </div>
                        </template>

                        {{-- text --}}
{{--                        <template v-else-if="item.type === 'text'">--}}
{{--                            <div class="type"><div>テキスト</div></div>--}}
{{--                            <div class="content-preview-action">--}}
{{--                                <div>@{{ item.data.content }}</div>--}}
{{--                                <div>を送信</div>--}}
{{--                            </div>--}}
{{--                        </template>--}}

                        {{-- remind --}}
                        <template v-else-if="item.type === 'remind'">
                            <div class="type"><div>リマインド</div></div>
                            <div class="content-preview-action">
                                <div>@{{ item.data.remind_name }}</div>
                                <div>
                                    <span v-if="item.data.type == 1">を開始</span>
                                    <span v-else>を停止</span>
                                </div>
                            </div>
                        </template>

                        {{-- tag --}}
                        <template v-else-if="item.type === 'tag'">
                            <div class="type"><div>タグ</div></div>
                            <div class="content-preview-action">
                                <div>
                                    <span v-for="(t, tIdx) in item.name_list" :key="'t-' + aIdx + '-' + tIdx">
                                        @{{ tIdx == 0 ? '' : '・' }}@{{ t.name }}
                                    </span>
                                </div>
                                <div>
                                    <span v-if="item.data.action == 1">をつける</span>
                                    <span v-else>をはずす</span>
                                </div>
                            </div>
                        </template>

                        {{-- bookmark --}}
                        <template v-else-if="item.type === 'bookmark'">
                            <div class="type"><div>ブックマーク</div></div>
                            <div class="content-preview-action">
                                <div>
                                    <span v-if="item.data.action == 1">つける</span>
                                    <span v-else>外す</span>
                                </div>
                                <div></div>
                            </div>
                        </template>

                        {{-- friend_info --}}
                        <template v-else-if="item.type === 'friend_info'">
                            <div class="type">
                                <div>
                                    友だち情報
                                    <span v-if="item.data.type == 1">（選択肢）</span>
                                    <span v-else-if="item.data.type == 2">（記述）</span>
                                    <span v-else-if="item.data.type == 3">（年月日）</span>
                                    <span v-else-if="item.data.type == 6">（ポイント）</span>
                                </div>
                            </div>
                            <div class="content-preview-action">
                                <div>@{{ item.display_name }}</div>
                                <div>
                                    <span v-if="item.data.type == 2 || item.data.type == 1">
                                        <span v-if="item.data.action == 1">の登録情報を削除</span>
                                        <span v-else>に@{{ item.data.content }}を登録</span>
                                    </span>
                                    <span v-else-if="item.data.type == 3">
                                        <span v-if="item.data.action == 1">の登録情報を削除</span>
                                        <span v-else-if="item.data.action == 2">に@{{ item.data.content }}を登録</span>
                                        <span v-else>に当日日付を登録</span>
                                    </span>
                                    <span v-else-if="item.data.type == 6">
                                        <span v-if="item.data.action == 0">の登録情報を削除</span>
                                        <span v-else-if="item.data.action == 1">
                                            <span v-if="item.data.is_random == 1">に@{{ item.data.from }}~@{{ item.data.to }}(ランダム)を登録</span>
                                            <span v-else>に@{{ item.data.content }}を登録</span>
                                        </span>
                                        <span v-else-if="item.data.action == 2">
                                            <span v-if="item.data.is_random == 1">に@{{ item.data.from }}~@{{ item.data.to }}(ランダム)をプラス</span>
                                            <span v-else>に@{{ item.data.content }}をプラス</span>
                                        </span>
                                        <span v-else-if="item.data.action == 3">
                                            <span v-if="item.data.is_random == 1">に@{{ item.data.from }}~@{{ item.data.to }}(ランダム)をマイナス</span>
                                            <span v-else>に@{{ item.data.content }}をマイナス</span>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </template>

                        {{-- compliant_status --}}
                        <template v-else-if="item.type === 'compliant_status'">
                            <div class="type"><div>対応ステータス</div></div>
                            <div class="content-preview-action">
                                <div>@{{ item.data.action == 1 ? item.data.content : '外す' }}</div>
                                <div><span v-if="item.data.action == 1">をつける</span></div>
                            </div>
                        </template>

                        {{-- block --}}
                        <template v-else-if="item.type === 'block'">
                            <div class="type"><div>ブロック・非表示</div></div>
                            <div class="content-preview-action">
                                <div>
                                    <span v-if="item.data.action == 1">ブロックする</span>
                                    <span v-else-if="item.data.action == 2">ブロック解除</span>
                                    <span v-else-if="item.data.action == 3">再表示する</span>
                                    <span v-else-if="item.data.action == 4">非表示にする</span>
                                </div>
                                <div></div>
                            </div>
                        </template>
                    </div>
                </template>
            </template>
            <div v-else class="fd-acp-empty">アクションなし</div>
        </div>

        <div class="fd-action-capture-preview-footer">
            <lme-button-flat size="md" @click="closeActionCapturePreview">閉じる</lme-button-flat>
        </div>
    </div>
</lme-drawer>