@push('css')
    <style>
        .has-filter-calendar {
            color: #5799DB;
            text-decoration: underline;
            cursor: pointer;
        }
    </style>
@endpush
<div v-show="showSettingMessageReservation">
    <div class="flex justify-between">
        <div>
            <label class="mb-[6px] text-[20px] font-semibold block">予約時の各種設定</label>
            <span class="text-[16px]">このページではお客様が予約をする時に関連する項目を設定します。</span>
        </div>
        <div class="mr-[19px]">
            <span class="text-[#888888] text-[16px] underline font-light cursor-pointer"
                  @click="backToSettingMessage">設定一覧</span>
            <span class="text-[#888888] text-[16px]"> > 予約時の各種設定</span>
        </div>
    </div>
    <div class="tab-header mt-[24px]">
        <ul class="configuration-success flex flex-wrap -mb-[17px] font-light border-solid border-b border-[#DDDDDD] -ml-[19px] pl-[19px]">
            <li class="active mr-[30px] pb-[11px] cursor-pointer">
                <span class="text-[16px] text-[#888888]" data-toggle="tab"
                      href="#setting-notification">基本設定・メッセージ</span>
            </li>
            <li class="mr-[30px] cursor-pointer">
                <span class="text-[16px] text-[#888888]" data-toggle="tab"
                      href="#setting-time-booking">予約の開始・締切</span>
            </li>
            <li class="mr-[30px] cursor-pointer">
                <span class="text-[16px] text-[#888888]" data-toggle="tab" href="#setting-option">オプション設定</span>
            </li>
        </ul>
    </div>
    <div class="tab-content">
        <div class="tab-pane fade in active mt-[37px]" id="setting-notification">
            <label class="text-[16px] font-semibold">予約の全承認・リクエスト</label>
            <div class="mt-[19px] mb-[23px] flex">
                <div class="mr-[25px] flex items-center">
                    <input type="radio" class="accent-[green] !m-0 !mr-[5px] w-[16px] h-[16px] !cursor-pointer" id="autoApprove"
                           value="1" name="reservationType"
                           @click="actionSettingMessageReservationType = ACTION_TYPE_END"
                           v-model="dataSettingMessageBooking.approve_type">
                    <label class="font-light text-[#888888] !cursor-pointer" for="autoApprove">全承認制にする</label>
                </div>
                <div class="flex items-center">
                    <input type="radio" class="accent-[green] !m-0 !mr-[5px] w-[16px] h-[16px] !cursor-pointer" id="adminApprove"
                           value="2" name="reservationType"
                           @click="actionSettingMessageReservationType = ACTION_TYPE_REQUEST"
                           v-model="dataSettingMessageBooking.approve_type">
                    <label class="font-light text-[#888888] !cursor-pointer" for="adminApprove">リクエスト制にする</label>
                </div>
            </div>
            <label class="text-[16px] font-semibold">お客様に送信するメッセージ・アクション</label>
            <div class="mt-[18px] mb-[23px] w-[600px] h-[60px] bg-[#EDF4FB] flex align-items-center rounded-[3px]">
                <i class="fas fa-info-circle text-[#5799DB] mx-[10px] rounded-[3px] text-[20px]"></i>
                <div class="tracking-[-1px]">
                    <span class="block">コースごとにメッセージ・アクションを設定する場合は</span>
                    <a href="javascript:void(0)" class="text-[#5799DB] underline"
                       @click="redirectTab('#calendar-course-tab', 'setting_course')">コース設定</a>
                    <span> > コース詳細 > 予約完了・リクエスト承認時アクション を利用してください</span>
                </div>
            </div>
            <div class="mb-[21px]" v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_AUTO">
                <button class="bg-[#F4FBF2] border border-solid border-[#08BF5A] text-[16px] rounded-[4px] w-[150px] h-[40px] text-[#08BF5A] font-semibold">
                    予約完了時
                </button>
            </div>
            <div class="mb-[21px]" v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN">
                <button class="border border-solid text-[16px] rounded-[4px] w-[190px] h-[40px] mr-[11px]"
                        :class="actionSettingMessageReservationType == ACTION_TYPE_REQUEST ? 'border-[#08BF5A] text-[#08BF5A] bg-[#F4FBF2] font-semibold' : 'border-[#DDDDDD] text-[#888888]'"
                        @click="actionSettingMessageReservationType = ACTION_TYPE_REQUEST">予約リクエスト受付時
                </button>
                <button class="border border-solid text-[16px] rounded-[4px] w-[190px] h-[40px] mr-[11px]"
                        :class="actionSettingMessageReservationType == ACTION_TYPE_APPROVE ? 'border-[#08BF5A] text-[#08BF5A] bg-[#F4FBF2] font-semibold' : 'border-[#DDDDDD] text-[#888888]'"
                        @click="actionSettingMessageReservationType = ACTION_TYPE_APPROVE">予約リクエスト承認時
                </button>
                <button class="border border-solid text-[16px] rounded-[4px] w-[190px] h-[40px]"
                        :class="actionSettingMessageReservationType == ACTION_TYPE_DENY ? 'border-[#08BF5A] text-[#08BF5A] bg-[#F4FBF2] font-semibold' : 'border-[#DDDDDD] text-[#888888]'"
                        @click="actionSettingMessageReservationType = ACTION_TYPE_DENY">予約リクエスト否認時
                </button>
            </div>
            <div class="w-[600px] mb-[33px]">
                <div class="flex items-center h-[50px] px-[16px] py-[10px] bg-[#F8F8F8] border-t border-r border-l border-solid border-[#DDDDDD]">
                    <button :disabled="disabledButtonAddCode('booking')" class="w-[100px] h-[30px] bg-[#FFFFFF] rounded-[3px] border border-solid border-[#DDDDDD] font-normal mr-[9px] hover:opacity-70"
                            @click="appendTextInformation('{name}')">
                        ＋ LINE名
                    </button>
                    <button :disabled="disabledButtonAddCode('booking')" class="w-[100px] h-[30px] bg-[#FFFFFF] rounded-[3px] border border-solid border-[#DDDDDD] font-normal mr-[7px] hover:opacity-70"
                            @click="showReservationInformationModal = true, insertReservationInformation = '[LESSON_CALENDAR_date_time]'">
                        予約情報
                    </button>
                    <button :disabled="disabledButtonAddCode('booking')" class="w-[100px] h-[30px] bg-[#FFFFFF] rounded-[3px] border border-solid border-[#DDDDDD] font-normal mr-[16px] hover:opacity-70"
                            @click="showFriendInformation">
                        友だち情報
                    </button>
                    <a href="javascript:void(0)" @click="insertExampleSentence('booking')"
                       class="text-[#5799DB] underline font-normal mr-[29px]">例文を挿入する</a>
                    <div class="flex items-center"
                         v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_AUTO">
                        <label class="custom-checkbox">
                            <input type="checkbox" hidden v-model="dataSettingMessageBooking.is_send_message"/>
                            <span></span>
                        </label>
                        <span class="font-normal"
                              :class="dataSettingMessageBooking.is_send_message ? 'text-[#08BF5A] !font-semibold' : ''">利用しない</span>
                    </div>
                    <div class="flex items-center"
                         v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageReservationType == ACTION_TYPE_REQUEST">
                        <label class="custom-checkbox">
                            <input type="checkbox" hidden v-model="dataSettingMessageBooking.is_send_message_request"/>
                            <span></span>
                        </label>
                        <span class="font-normal"
                              :class="dataSettingMessageBooking.is_send_message_request ? 'text-[#08BF5A] !font-semibold' : ''">利用しない</span>
                    </div>
                    <div class="flex items-center"
                         v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageReservationType == ACTION_TYPE_APPROVE">
                        <label class="custom-checkbox">
                            <input type="checkbox" hidden v-model="dataSettingMessageBooking.is_send_message_approve"/>
                            <span></span>
                        </label>
                        <span class="font-normal"
                              :class="dataSettingMessageBooking.is_send_message_approve ? 'text-[#08BF5A] !font-semibold' : ''">利用しない</span>
                    </div>
                    <div class="flex items-center"
                         v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageReservationType == ACTION_TYPE_DENY">
                        <label class="custom-checkbox">
                            <input type="checkbox" hidden v-model="dataSettingMessageBooking.is_send_message_reject"/>
                            <span></span>
                        </label>
                        <span class="font-normal"
                              :class="dataSettingMessageBooking.is_send_message_reject ? 'text-[#08BF5A] !font-semibold' : ''">利用しない</span>
                    </div>
                </div>
                <textarea class="focus:outline-none h-[400px] px-[16px] py-[12px] mb-[11px] border border-solid border-[#DDDDDD]"
                          :disabled="dataSettingMessageBooking.is_send_message == 1"
                          v-model="dataSettingMessageBooking.message_send_end" @focus="saveCursorPosition"
                          @click="saveCursorPosition" @keyup="saveCursorPosition"
                          v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_AUTO"></textarea>
                <textarea class="focus:outline-none h-[400px] px-[16px] py-[12px] mb-[11px] border border-solid border-[#DDDDDD]"
                          :disabled="dataSettingMessageBooking.is_send_message_request == 1"
                          v-model="dataSettingMessageBooking.message_send_booking" @focus="saveCursorPosition"
                          @click="saveCursorPosition" @keyup="saveCursorPosition"
                          v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageReservationType == ACTION_TYPE_REQUEST"></textarea>
                <textarea class="focus:outline-none h-[400px] px-[16px] py-[12px] mb-[11px] border border-solid border-[#DDDDDD]"
                          :disabled="dataSettingMessageBooking.is_send_message_approve == 1"
                          v-model="dataSettingMessageBooking.message_send_approve" @focus="saveCursorPosition"
                          @click="saveCursorPosition" @keyup="saveCursorPosition"
                          v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageReservationType == ACTION_TYPE_APPROVE"></textarea>
                <textarea class="focus:outline-none h-[400px] px-[16px] py-[12px] mb-[11px] border border-solid border-[#DDDDDD]"
                          :disabled="dataSettingMessageBooking.is_send_message_reject == 1"
                          v-model="dataSettingMessageBooking.message_send_deny" @focus="saveCursorPosition"
                          @click="saveCursorPosition" @keyup="saveCursorPosition"
                          v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageReservationType == ACTION_TYPE_DENY"></textarea>
                <span class="text-right block text-[#888888] mr-[5px]"
                      v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_AUTO">@{{ dataSettingMessageBooking.message_send_end ? countMessageSendEndLength : 0 }}/5,000</span>
                <span class="text-right block text-[#888888] mr-[5px]"
                      v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageReservationType == ACTION_TYPE_REQUEST">@{{ dataSettingMessageBooking.message_send_booking ? countMessageSendRequestLength : 0 }}/5,000</span>
                <span class="text-right block text-[#888888] mr-[5px]"
                      v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageReservationType == ACTION_TYPE_APPROVE">@{{ dataSettingMessageBooking.message_send_approve ? countMessageSendApproveLength : 0 }}/5,000</span>
                <span class="text-right block text-[#888888] mr-[5px]"
                      v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageReservationType == ACTION_TYPE_DENY">@{{ dataSettingMessageBooking.message_send_deny ? countMessageSendDenyLength : 0 }}/5,000</span>
            </div>
            <p class="text-[16px] mb-[18px]">上記メッセージ送信以外に、タグ付け等のアクションを設定する場合はこちら↓</p>
            <div v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_AUTO"
                 class="w-[600px] border border-solid border-[#E0E0E0] rounded-[3px] mb-[23px]">
                <div class="flex items-end relative h-[63px] border-b border-solid border-[#E0E0E0]">
                    <button @click="openModalActionNotifyFull('setting_message_booking', dataSettingMessageBooking.setting_action_id)"
                            class="absolute right-[29px] top-[11px] w-[180px] h-[40px] border border-solid border-[#08BF5A] text-[#08BF5A] rounded-[4px]">
                        アクション登録・編集
                    </button>
                    <label class="text-[#08BF5A] font-semibold ml-[15px] border-b-[2px] border-solid border-[#08BF5A] !text-[14px]">エルメアクション</label>
                </div>
                <div class="pl-[21px] pb-[27px] pr-[29px] pt-[20px] min-h-[40px] wrap-preview-action">
                    <div v-if="!dataSettingMessageBooking || !dataSettingMessageBooking.setting_action_id || !dataSettingMessageBooking.detail_action || dataSettingMessageBooking.detail_action.length == 0"
                         class="flex items-center justify-center h-[40px] !bg-[#F8F8F8] rounded-[3px]">
                        <span class="text-[#535657]">エルメアクションが登録されていません</span>
                    </div>
                    <div v-else class="frame-preview-action">
                        <template v-for="(item, indexAction) in dataSettingMessageBooking.detail_action">
                            <div class="wrap-action-broadcast-new !bg-[#FFFFFF]">
                                {{-- template--}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'template'">
                                    <div class="type">
                                        <div>テンプレート</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction,  dataSettingMessageBooking.setting_action_id, item, 'setting_message_booking')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div v-html="item.data.template_name"></div>
                                        <div>を送信</div>
                                    </div>
                                </div>
                                {{-- richmenu	--}}
                                <div class="wrap-item-action-herme" v-else-if="item.type == 'richmenu'">
                                    <div class="type">
                                        <div>リッチメニュー</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction,  dataSettingMessageBooking.setting_action_id, item, 'setting_message_booking')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}</span>
                                            <span v-else>表示を停止</span>
                                        </div>
                                        <div>
                                            <span v-if="item.data.action != 1">を表示</span>
                                        </div>
                                    </div>
                                </div>
                                {{-- scenario	--}}
                                <div class="wrap-item-action-herme" v-else-if="item.type == 'scenario'">
                                    <div class="type">
                                        <div>ステップ</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction,  dataSettingMessageBooking.setting_action_id, item, 'setting_message_booking')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action == 1">停止</span>
                                            <span v-else>
                                                @{{ item.data.scenario_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>
                                </div>

                                {{-- text--}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'text'">
                                    <div class="type">
                                        <div>テキスト</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction,  dataSettingMessageBooking.setting_action_id, item, 'setting_message_booking')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>@{{ item.data.content | shortContent }}</div>
                                        <div>を送信</div>
                                    </div>
                                </div>

                                {{-- remind --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'remind'">
                                    <div class="type">
                                        <div>リマインド</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction,  dataSettingMessageBooking.setting_action_id, item, 'setting_message_booking')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </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>
                                </div>

                                {{-- tag --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'tag'">
                                    <div class="type">
                                        <div>タグ</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction,  dataSettingMessageBooking.setting_action_id, item, 'setting_message_booking')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-for="(itemTag, indexTag) in item.list_tags">
                                                @{{ indexTag == 0 ? '' : '・' }}@{{ itemTag.name }}
                                            </span>
                                        </div>
                                        <div>
                                            <span v-if="item.data.action == 1">をつける</span>
                                            <span v-else>をはずす</span>
                                        </div>
                                    </div>
                                </div>

                                {{-- bookmark --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'bookmark'">
                                    <div class="type">
                                        <div>ブックマーク</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction,  dataSettingMessageBooking.setting_action_id, item, 'setting_message_booking')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action == 1">つける</span>
                                            <span v-else>外す</span>
                                        </div>
                                        <div>
                                        </div>
                                    </div>
                                </div>

                                {{-- friend info --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'friend_info'">
                                    <div class="type">
                                        <div>友だち情報
                                            {{-- select--}}
                                            <span v-if="item.data.type == 1">（選択肢）</span>
                                            <span v-else-if="item.data.type == 2">（記述）</span>{{-- text--}}
                                            <span v-else-if="item.data.type == 3">（年月日）</span>{{-- date--}}
                                            <span v-else-if="item.data.type == 6">（ポイント）</span>{{-- point--}}
                                        </div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction,  dataSettingMessageBooking.setting_action_id, item, 'setting_message_booking')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            @{{item.data.name}}
                                        </div>
                                        <div>
                                            <span v-if="item.data.type == 2">
                                                <span v-if="item.data.action == 1">の登録情報を削除</span>
                                                <span v-else>に@{{ item.data.content | shortContentFriendInfo }}を登録</span>
                                            </span>
                                            <span v-else-if="item.data.type == 1">
                                                <span v-if="item.data.action == 1">の登録情報を削除</span>
                                                <span v-else>に@{{ item.data.content | shortContentFriendInfo }}を登録</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">に@{{ moment(item.data.content, 'YYYY-MM-DD').format('YYYY/MM/DD') }}を登録</span>
                                                <span v-else>に当日日付を登録</span>
                                            </span>
                                            <span v-else-if="item.data.type == 6">
                                                <span v-if="item.data.action == 0">の登録情報を削除</span>
                                                <span v-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-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-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>
                                </div>


                                {{-- trang thai doi ung --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'compliant_status'">
                                    <div class="type">
                                        <div>対応ステータス</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction,  dataSettingMessageBooking.setting_action_id, item, 'setting_message_booking')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </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>
                                            {{-- <span v-else>をはずす</span>--}}
                                        </div>
                                    </div>
                                </div>

                                <div class="wrap-item-action-herme" v-if="item.type == 'block'">
                                    <div class="type">
                                        <div>ブロック・非表示</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction,  dataSettingMessageBooking.setting_action_id, item, 'setting_message_booking')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action == 1">ブロックする</span>
                                            <span v-if="item.data.action == 2">ブロック解除</span>
                                            <span v-if="item.data.action == 3">再表示する</span>
                                            <span v-if="item.data.action == 4">非表示にする</span>
                                        </div>
                                        <div>

                                        </div>
                                    </div>
                                </div>

                                <div class="remove" @click="deleteItemAction(indexAction, 'setting_message_booking')">
                                    <i class="fas fa-trash-alt"></i>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            <div v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageReservationType == ACTION_TYPE_REQUEST"
                 class="w-[600px] border border-solid border-[#E0E0E0] rounded-[3px] mb-[23px]">
                <div class="flex items-end relative h-[63px] border-b border-solid border-[#E0E0E0]">
                    <button @click="openModalActionNotifyFull('setting_message_booking_request', dataSettingMessageBooking.setting_action_request)"
                            class="absolute right-[29px] top-[11px] w-[180px] h-[40px] border border-solid border-[#08BF5A] text-[#08BF5A] rounded-[4px]">
                        アクション登録・編集
                    </button>
                    <label class="!text-[14px] text-[#08BF5A] font-semibold ml-[15px] border-b-[2px] border-solid border-[#08BF5A]">エルメアクション</label>
                </div>
                <div class="pl-[21px] pb-[27px] pr-[29px] pt-[20px] min-h-[40px] wrap-preview-action">
                    <div v-if="!dataSettingMessageBooking || !dataSettingMessageBooking.setting_action_request || !dataSettingMessageBooking.detail_action_request || dataSettingMessageBooking.detail_action_request.length == 0"
                         class="flex items-center justify-center h-[40px] !bg-[#F8F8F8] rounded-[3px]">
                        <span class="text-[#535657]">エルメアクションが登録されていません</span>
                    </div>
                    <div v-else class="frame-preview-action">
                        <template v-for="(item, indexAction) in dataSettingMessageBooking.detail_action_request">
                            <div class="wrap-action-broadcast-new !bg-[#FFFFFF]">
                                {{-- template--}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'template'">
                                    <div class="type">
                                        <div>テンプレート</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_request, item, 'setting_message_booking_request')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div v-html="item.data.template_name"></div>
                                        <div>を送信</div>
                                    </div>
                                </div>
                                {{-- richmenu	--}}
                                <div class="wrap-item-action-herme" v-else-if="item.type == 'richmenu'">
                                    <div class="type">
                                        <div>リッチメニュー</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_request, item, 'setting_message_booking_request')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}</span>
                                            <span v-else>表示を停止</span>
                                        </div>
                                        <div>
                                            <span v-if="item.data.action != 1">を表示</span>
                                        </div>
                                    </div>
                                </div>
                                {{-- scenario	--}}
                                <div class="wrap-item-action-herme" v-else-if="item.type == 'scenario'">
                                    <div class="type">
                                        <div>ステップ</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_request, item, 'setting_message_booking_request')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action == 1">停止</span>
                                            <span v-else>
                                                @{{ item.data.scenario_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>
                                </div>

                                {{-- text--}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'text'">
                                    <div class="type">
                                        <div>テキスト</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_request, item, 'setting_message_booking_request')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>@{{ item.data.content | shortContent }}</div>
                                        <div>を送信</div>
                                    </div>
                                </div>

                                {{-- remind --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'remind'">
                                    <div class="type">
                                        <div>リマインド</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_request, item, 'setting_message_booking_request')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </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>
                                </div>

                                {{-- tag --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'tag'">
                                    <div class="type">
                                        <div>タグ</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_request, item, 'setting_message_booking_request')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-for="(itemTag, indexTag) in item.list_tags">
                                                @{{ indexTag == 0 ? '' : '・' }}@{{ itemTag.name }}
                                            </span>
                                        </div>
                                        <div>
                                            <span v-if="item.data.action == 1">をつける</span>
                                            <span v-else>をはずす</span>
                                        </div>
                                    </div>
                                </div>

                                {{-- bookmark --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'bookmark'">
                                    <div class="type">
                                        <div>ブックマーク</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_request, item, 'setting_message_booking_request')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action == 1">つける</span>
                                            <span v-else>外す</span>
                                        </div>
                                        <div>
                                        </div>
                                    </div>
                                </div>

                                {{-- friend info --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'friend_info'">
                                    <div class="type">
                                        <div>友だち情報
                                            {{-- select--}}
                                            <span v-if="item.data.type == 1">（選択肢）</span>
                                            <span v-else-if="item.data.type == 2">（記述）</span>{{-- text--}}
                                            <span v-else-if="item.data.type == 3">（年月日）</span>{{-- date--}}
                                            <span v-else-if="item.data.type == 6">（ポイント）</span>{{-- point--}}
                                        </div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_request, item, 'setting_message_booking_request')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            @{{item.data.name}}
                                        </div>
                                        <div>
                                            <span v-if="item.data.type == 2">
                                                <span v-if="item.data.action == 1">の登録情報を削除</span>
                                                <span v-else>に@{{ item.data.content | shortContentFriendInfo }}を登録</span>
                                            </span>
                                            <span v-else-if="item.data.type == 1">
                                                <span v-if="item.data.action == 1">の登録情報を削除</span>
                                                <span v-else>に@{{ item.data.content | shortContentFriendInfo }}を登録</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">に@{{ moment(item.data.content, 'YYYY-MM-DD').format('YYYY/MM/DD') }}を登録</span>
                                                <span v-else>に当日日付を登録</span>
                                            </span>
                                            <span v-else-if="item.data.type == 6">
                                                <span v-if="item.data.action == 0">の登録情報を削除</span>
                                                <span v-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-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-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>
                                </div>


                                {{-- trang thai doi ung --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'compliant_status'">
                                    <div class="type">
                                        <div>対応ステータス</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_request, item, 'setting_message_booking_request')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </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>
                                            {{-- <span v-else>をはずす</span>--}}
                                        </div>
                                    </div>
                                </div>

                                <div class="wrap-item-action-herme" v-if="item.type == 'block'">
                                    <div class="type">
                                        <div>ブロック・非表示</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_request, item, 'setting_message_booking_request')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action == 1">ブロックする</span>
                                            <span v-if="item.data.action == 2">ブロック解除</span>
                                            <span v-if="item.data.action == 3">再表示する</span>
                                            <span v-if="item.data.action == 4">非表示にする</span>
                                        </div>
                                        <div>

                                        </div>
                                    </div>
                                </div>

                                <div class="remove"
                                     @click="deleteItemAction(indexAction, 'setting_message_booking_request')">
                                    <i class="fas fa-trash-alt"></i>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            <div v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageReservationType == ACTION_TYPE_APPROVE"
                 class="w-[600px] border border-solid border-[#E0E0E0] rounded-[3px] mb-[23px]">
                <div class="flex items-end relative h-[63px] border-b border-solid border-[#E0E0E0]">
                    <button @click="openModalActionNotifyFull('setting_message_booking_approve', dataSettingMessageBooking.setting_action_approve)"
                            class="absolute right-[29px] top-[11px] w-[180px] h-[40px] border border-solid border-[#08BF5A] text-[#08BF5A] rounded-[4px]">
                        アクション登録・編集
                    </button>
                    <label class="!text-[14px] text-[#08BF5A] font-semibold ml-[15px] border-b-[2px] border-solid border-[#08BF5A]">エルメアクション</label>
                </div>
                <div class="pl-[21px] pb-[27px] pr-[29px] pt-[20px] min-h-[40px] wrap-preview-action">
                    <div v-if="!dataSettingMessageBooking || !dataSettingMessageBooking.setting_action_approve || !dataSettingMessageBooking.detail_action_approve || dataSettingMessageBooking.detail_action_approve.length == 0"
                         class="flex items-center justify-center h-[40px] !bg-[#F8F8F8] rounded-[3px]">
                        <span class="text-[#535657]">エルメアクションが登録されていません</span>
                    </div>
                    <div v-else class="frame-preview-action">
                        <template v-for="(item, indexAction) in dataSettingMessageBooking.detail_action_approve">
                            <div class="wrap-action-broadcast-new !bg-[#FFFFFF]">
                                {{-- template--}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'template'">
                                    <div class="type">
                                        <div>テンプレート</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_approve, item, 'setting_message_booking_approve')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div v-html="item.data.template_name"></div>
                                        <div>を送信</div>
                                    </div>
                                </div>
                                {{-- richmenu	--}}
                                <div class="wrap-item-action-herme" v-else-if="item.type == 'richmenu'">
                                    <div class="type">
                                        <div>リッチメニュー</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_approve, item, 'setting_message_booking_approve')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}</span>
                                            <span v-else>表示を停止</span>
                                        </div>
                                        <div>
                                            <span v-if="item.data.action != 1">を表示</span>
                                        </div>
                                    </div>
                                </div>
                                {{-- scenario	--}}
                                <div class="wrap-item-action-herme" v-else-if="item.type == 'scenario'">
                                    <div class="type">
                                        <div>ステップ</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_approve, item, 'setting_message_booking_approve')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action == 1">停止</span>
                                            <span v-else>
                                                @{{ item.data.scenario_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>
                                </div>

                                {{-- text--}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'text'">
                                    <div class="type">
                                        <div>テキスト</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_approve, item, 'setting_message_booking_approve')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>@{{ item.data.content | shortContent }}</div>
                                        <div>を送信</div>
                                    </div>
                                </div>

                                {{-- remind --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'remind'">
                                    <div class="type">
                                        <div>リマインド</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_approve, item, 'setting_message_booking_approve')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </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>
                                </div>

                                {{-- tag --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'tag'">
                                    <div class="type">
                                        <div>タグ</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_approve, item, 'setting_message_booking_approve')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-for="(itemTag, indexTag) in item.list_tags">
                                                @{{ indexTag == 0 ? '' : '・' }}@{{ itemTag.name }}
                                            </span>
                                        </div>
                                        <div>
                                            <span v-if="item.data.action == 1">をつける</span>
                                            <span v-else>をはずす</span>
                                        </div>
                                    </div>
                                </div>

                                {{-- bookmark --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'bookmark'">
                                    <div class="type">
                                        <div>ブックマーク</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_approve, item, 'setting_message_booking_approve')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action == 1">つける</span>
                                            <span v-else>外す</span>
                                        </div>
                                        <div>
                                        </div>
                                    </div>
                                </div>

                                {{-- friend info --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'friend_info'">
                                    <div class="type">
                                        <div>友だち情報
                                            {{-- select--}}
                                            <span v-if="item.data.type == 1">（選択肢）</span>
                                            <span v-else-if="item.data.type == 2">（記述）</span>{{-- text--}}
                                            <span v-else-if="item.data.type == 3">（年月日）</span>{{-- date--}}
                                            <span v-else-if="item.data.type == 6">（ポイント）</span>{{-- point--}}
                                        </div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_approve, item, 'setting_message_booking_approve')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            @{{item.data.name}}
                                        </div>
                                        <div>
                                            <span v-if="item.data.type == 2">
                                                <span v-if="item.data.action == 1">の登録情報を削除</span>
                                                <span v-else>に@{{ item.data.content | shortContentFriendInfo }}を登録</span>
                                            </span>
                                            <span v-else-if="item.data.type == 1">
                                                <span v-if="item.data.action == 1">の登録情報を削除</span>
                                                <span v-else>に@{{ item.data.content | shortContentFriendInfo }}を登録</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">に@{{ moment(item.data.content, 'YYYY-MM-DD').format('YYYY/MM/DD') }}を登録</span>
                                                <span v-else>に当日日付を登録</span>
                                            </span>
                                            <span v-else-if="item.data.type == 6">
                                                <span v-if="item.data.action == 0">の登録情報を削除</span>
                                                <span v-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-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-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>
                                </div>


                                {{-- trang thai doi ung --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'compliant_status'">
                                    <div class="type">
                                        <div>対応ステータス</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_approve, item, 'setting_message_booking_approve')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </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>
                                            {{-- <span v-else>をはずす</span>--}}
                                        </div>
                                    </div>
                                </div>

                                <div class="wrap-item-action-herme" v-if="item.type == 'block'">
                                    <div class="type">
                                        <div>ブロック・非表示</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_approve, item, 'setting_message_booking_approve')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action == 1">ブロックする</span>
                                            <span v-if="item.data.action == 2">ブロック解除</span>
                                            <span v-if="item.data.action == 3">再表示する</span>
                                            <span v-if="item.data.action == 4">非表示にする</span>
                                        </div>
                                        <div>

                                        </div>
                                    </div>
                                </div>

                                <div class="remove"
                                     @click="deleteItemAction(indexAction, 'setting_message_booking_approve')">
                                    <i class="fas fa-trash-alt"></i>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            <div v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageReservationType == ACTION_TYPE_DENY"
                 class="w-[600px] border border-solid border-[#E0E0E0] rounded-[3px] mb-[23px]">
                <div class="flex items-end relative h-[63px] border-b border-solid border-[#E0E0E0]">
                    <button @click="openModalActionNotifyFull('setting_message_booking_deny', dataSettingMessageBooking.setting_action_reject)"
                            class="absolute right-[29px] top-[11px] w-[180px] h-[40px] border border-solid border-[#08BF5A] text-[#08BF5A] rounded-[4px]">
                        アクション登録・編集
                    </button>
                    <label class="!text-[14px] text-[#08BF5A] font-semibold ml-[15px] border-b-[2px] border-solid border-[#08BF5A]">エルメアクション</label>
                </div>
                <div class="pl-[21px] pb-[27px] pr-[29px] pt-[20px] min-h-[40px] wrap-preview-action">
                    <div v-if="!dataSettingMessageBooking || !dataSettingMessageBooking.setting_action_reject || !dataSettingMessageBooking.detail_action_reject || dataSettingMessageBooking.detail_action_reject.length == 0"
                         class="flex items-center justify-center h-[40px] !bg-[#F8F8F8] rounded-[3px]">
                        <span class="text-[#535657]">エルメアクションが登録されていません</span>
                    </div>
                    <div v-else class="frame-preview-action">
                        <template v-for="(item, indexAction) in dataSettingMessageBooking.detail_action_reject">
                            <div class="wrap-action-broadcast-new !bg-[#FFFFFF]">
                                {{-- template--}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'template'">
                                    <div class="type">
                                        <div>テンプレート</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_reject, item, 'setting_message_booking_deny')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div v-html="item.data.template_name"></div>
                                        <div>を送信</div>
                                    </div>
                                </div>
                                {{-- richmenu	--}}
                                <div class="wrap-item-action-herme" v-else-if="item.type == 'richmenu'">
                                    <div class="type">
                                        <div>リッチメニュー</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_reject, item, 'setting_message_booking_deny')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}</span>
                                            <span v-else>表示を停止</span>
                                        </div>
                                        <div>
                                            <span v-if="item.data.action != 1">を表示</span>
                                        </div>
                                    </div>
                                </div>
                                {{-- scenario	--}}
                                <div class="wrap-item-action-herme" v-else-if="item.type == 'scenario'">
                                    <div class="type">
                                        <div>ステップ</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_reject, item, 'setting_message_booking_deny')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action == 1">停止</span>
                                            <span v-else>
                                                @{{ item.data.scenario_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>
                                </div>

                                {{-- text--}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'text'">
                                    <div class="type">
                                        <div>テキスト</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_reject, item, 'setting_message_booking_deny')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>@{{ item.data.content | shortContent }}</div>
                                        <div>を送信</div>
                                    </div>
                                </div>

                                {{-- remind --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'remind'">
                                    <div class="type">
                                        <div>リマインド</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_reject, item, 'setting_message_booking_deny')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </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>
                                </div>

                                {{-- tag --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'tag'">
                                    <div class="type">
                                        <div>タグ</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_reject, item, 'setting_message_booking_deny')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-for="(itemTag, indexTag) in item.list_tags">
                                                @{{ indexTag == 0 ? '' : '・' }}@{{ itemTag.name }}
                                            </span>
                                        </div>
                                        <div>
                                            <span v-if="item.data.action == 1">をつける</span>
                                            <span v-else>をはずす</span>
                                        </div>
                                    </div>
                                </div>

                                {{-- bookmark --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'bookmark'">
                                    <div class="type">
                                        <div>ブックマーク</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_reject, item, 'setting_message_booking_deny')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action == 1">つける</span>
                                            <span v-else>外す</span>
                                        </div>
                                        <div>
                                        </div>
                                    </div>
                                </div>

                                {{-- friend info --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'friend_info'">
                                    <div class="type">
                                        <div>友だち情報
                                            {{-- select--}}
                                            <span v-if="item.data.type == 1">（選択肢）</span>
                                            <span v-else-if="item.data.type == 2">（記述）</span>{{-- text--}}
                                            <span v-else-if="item.data.type == 3">（年月日）</span>{{-- date--}}
                                            <span v-else-if="item.data.type == 6">（ポイント）</span>{{-- point--}}
                                        </div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_reject, item, 'setting_message_booking_deny')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            @{{item.data.name}}
                                        </div>
                                        <div>
                                            <span v-if="item.data.type == 2">
                                                <span v-if="item.data.action == 1">の登録情報を削除</span>
                                                <span v-else>に@{{ item.data.content | shortContentFriendInfo }}を登録</span>
                                            </span>
                                            <span v-else-if="item.data.type == 1">
                                                <span v-if="item.data.action == 1">の登録情報を削除</span>
                                                <span v-else>に@{{ item.data.content | shortContentFriendInfo }}を登録</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">に@{{ moment(item.data.content, 'YYYY-MM-DD').format('YYYY/MM/DD') }}を登録</span>
                                                <span v-else>に当日日付を登録</span>
                                            </span>
                                            <span v-else-if="item.data.type == 6">
                                                <span v-if="item.data.action == 0">の登録情報を削除</span>
                                                <span v-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-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-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>
                                </div>


                                {{-- trang thai doi ung --}}
                                <div class="wrap-item-action-herme" v-if="item.type == 'compliant_status'">
                                    <div class="type">
                                        <div>対応ステータス</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_reject, item, 'setting_message_booking_deny')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </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>
                                            {{-- <span v-else>をはずす</span>--}}
                                        </div>
                                    </div>
                                </div>

                                <div class="wrap-item-action-herme" v-if="item.type == 'block'">
                                    <div class="type">
                                        <div>ブロック・非表示</div>
                                        <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                             @click="openModalFilterAction(indexAction, dataSettingMessageBooking.setting_action_reject, item, 'setting_message_booking_deny')">
                                            @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                        </div>
                                    </div>
                                    <div class="content-preview-action">
                                        <div>
                                            <span v-if="item.data.action == 1">ブロックする</span>
                                            <span v-if="item.data.action == 2">ブロック解除</span>
                                            <span v-if="item.data.action == 3">再表示する</span>
                                            <span v-if="item.data.action == 4">非表示にする</span>
                                        </div>
                                        <div>

                                        </div>
                                    </div>
                                </div>

                                <div class="remove"
                                     @click="deleteItemAction(indexAction, 'setting_message_booking_deny')">
                                    <i class="fas fa-trash-alt"></i>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            <button class="block w-[200px] h-[40px] border border-solid border-[#08BF5A] text-[#08BF5A] text-[16px] rounded-[3px] mb-[16px]"
                    @click="saveSettingCalendar('message')">
                保存
            </button>
            <button class="w-[100px] h-[40px] border border-solid border-[#DDDDDD] text-[#888888] rounded-[3px]"
                    @click="window.location.reload()"
            >戻る
            </button>
        </div>
        <div class="tab-pane fade in mt-[37px]" id="setting-time-booking">
            <label class="text-[16px] font-semibold mb-[19px]">予約の開始・締め切り</label>
            <div class="grid grid-cols-2 mb-22px">
                <div class="">
                    <button class="w-[120px] h-[32px] border-solid border border-[#5799DB] mb-[11px] rounded-[4px] text-[14px] bg-[#5799DB] text-[#FFFFFF] font-[600]">
                        <i class="far fa-play-circle"></i> 予約受付開始
                    </button>
                    <div class="mb-[9px]">
                        <label for="always" class="w-full cursor-pointer mb-[8px]">
                            <input type="radio" class="text-[16px] accent-[green] !m-0 !mr-[5px] !cursor-pointer" value="1"
                                   name="startReceiveBooking"
                                   v-model="dataSettingMessageBooking.start_receive_booking_type" id="always">
                            <span class="font-light text-[#888888] !cursor-pointer"
                                  style="line-height: normal">いつでも予約を受け付ける</span>
                        </label>
                        <label for="setting" class="w-full cursor-pointer">
                            <input type="radio" class="text-[16px] accent-[green] !m-0 !mr-[5px] !cursor-pointer" value="2"
                                   name="startReceiveBooking"
                                   @change="initTimepickerSettingBooking"
                                   v-model="dataSettingMessageBooking.start_receive_booking_type" id="setting">
                            <span class="font-light text-[#888888] !cursor-pointer"
                                  style="line-height: normal">受付開始の時間を設定する</span>
                        </label>
                    </div>
                    <div class="min-h-[360px]">
                        <div v-if="dataSettingMessageBooking.start_receive_booking_type == 2">
                            <div class="relative w-[200px] mb-[19px]">
                                <select class="text-center w-[200px] h-[35px] pt-0 pb-0 bg-[#FFFFFF] border border-solid border-[#E0E0E0] rounded-[3px]"
                                        v-model="dataSettingMessageBooking.setting_time_booking_type"
                                >
                                    <option value="1">日数指定</option>
                                    <option value="2">時間指定</option>
                                </select>
                            </div>
                            <div class="mb-[27px]" v-show="dataSettingMessageBooking.setting_time_booking_type == 1">
                                <label class="font-semibold mb-[7px]">コース開始日</label>
                                <div class="flex items-center mb-[5px]">
                                    <input type="text" v-model="dataSettingMessageBooking.before_booking_day"
                                        class="!w-[70px] !h-[40px] text-[16px] text-center border-solid border !border-[#E6E6E6] rounded-[3px] text-[#222222]">
                                    <span class="ml-[10px] mr-[13px] !font-[600]">日前の</span>
                                    <div class="relative">
                                        <input type="text" id="startSettingTime"
                                               readonly
                                            v-model="dataSettingMessageBooking.before_booking_hour"
                                            class="setting-time-from timepicker !w-[120px] text-[#222222] text-[16px] !h-[40px] !pl-[48px] border-solid border !border-[#E6E6E6] rounded-[3px] mr-[10px]">
                                        <i class="far fa-clock absolute text-[22px] text-[#8F9293] left-[14px] top-[9px]"></i>
                                    </div>
                                    <span class="!font-[600]">から予約開始</span>
                                </div>
                                <label class="text-[#535657] !font-light">※設定できるのは最大180日前からになります</label>
                            </div>
                            <div class="mb-[27px]" v-show="dataSettingMessageBooking.setting_time_booking_type == 2">
                                <label class="font-semibold mb-[7px]">コース開始日時の</label>
                                <div class="flex items-center mb-[5px]">
                                    <input type="text" v-model="dataSettingMessageBooking.booking_time_from"
                                        class="!w-[80px] !h-[40px] text-[16px] text-center border-solid border !border-[#E6E6E6] rounded-[3px] text-[#222222]">
                                    <span class="ml-[18px] mr-[17px] font-semibold">時間</span>
                                    <input type="text" v-model="dataSettingMessageBooking.booking_time_to"
                                        class="!w-[80px] !h-[40px] text-[16px] text-center border-solid border !border-[#E6E6E6] rounded-[3px] text-[#222222] mr-[15px]">
                                    <span class="font-semibold">分前から予約開始</span>
                                </div>
                                <label class="text-[#535657] !font-light">※設定できるのは23時間59分以内です</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <button class="w-[120px] h-[32px] border-solid border border-[#F44336] mb-[11px] rounded-[4px] text-[14px] bg-[#F44336] text-[#FFFFFF] font-[600]">
                        <i class="far fa-stop-circle"></i> 予約締切
                    </button>
                    <div class="mb-[9px]">
                        <label for="noEnd" class="w-full cursor-pointer mb-[8px]">
                            <input type="radio" class="text-[16px] accent-[green] !m-0 !mr-[5px] !cursor-pointer" value="1"
                                   name="endReceiveBooking"
                                   v-model="dataSettingMessageBooking.deadline_receive_booking_type" id="noEnd">
                            <span class="font-light text-[#888888] !cursor-pointer"
                                  style="line-height: normal">締切を設定しない（コース開始まで予約可能）</span>
                        </label>
                        <label for="setEnd" class="w-full cursor-pointer">
                            <input type="radio" class="text-[16px] accent-[green] !m-0 !mr-[5px] !cursor-pointer" value="2"
                                   name="endReceiveBooking"
                                   @change="initTimepickerSettingBooking"
                                   v-model="dataSettingMessageBooking.deadline_receive_booking_type" id="setEnd">
                            <span class="font-light text-[#888888] !cursor-pointer"
                                  style="line-height: normal">予約締切を設定する</span>
                        </label>
                    </div>
                    <div class="min-h-[360px]">
                        <div v-if="dataSettingMessageBooking.deadline_receive_booking_type == 2">
                            <div class="relative w-[200px] mb-[19px]">
                                <select class="text-center w-[200px] h-[35px] bg-[#FFFFFF] pt-0 pb-0 border border-solid border-[#E0E0E0] rounded-[3px]"
                                        v-model="dataSettingMessageBooking.setting_deadline_time_booking_type"
                                >
                                    <option value="1">日数指定</option>
                                    <option value="2">時間指定</option>
                                </select>
                            </div>
                            <div class="mb-[27px]" v-show="dataSettingMessageBooking.setting_deadline_time_booking_type == 1">
                                <label class="font-semibold mb-[7px]">コース開始日</label>
                                <div class="flex items-center mb-[5px]">
                                    <input type="text" v-model="dataSettingMessageBooking.deadline_before_booking_day"
                                        class="!w-[70px] !h-[40px] text-[16px] text-center border-solid border !border-[#E6E6E6] rounded-[3px] text-[#222222]">
                                    <span class="ml-[10px] mr-[13px] !font-[600]">日前の</span>
                                    <div class="relative">
                                        <input type="text"
                                            v-model="dataSettingMessageBooking.deadline_before_booking_hour"
                                            id="deadlineSettingTime"
                                               readonly
                                            class="setting-time-from timepicker text-[16px] !w-[120px] !h-[40px] !pl-[48px] text-[#222222] border-solid border !border-[#E6E6E6] rounded-[3px] mr-[10px]">
                                        <i class="far fa-clock absolute text-[22px] text-[#8F9293] left-[14px] top-[9px]"></i>
                                    </div>
                                    <span class="!font-[600]">に予約締切</span>
                                </div>
                                <label class="text-[#535657] !font-light">※設定できるのは最大180日前からになります</label>
                            </div>
                            <div class="mb-[27px]" v-show="dataSettingMessageBooking.setting_deadline_time_booking_type == 2">
                                <label class="font-semibold mb-[7px]">コース開始日時の</label>
                                <div class="flex items-center mb-[5px]">
                                    <input type="text" v-model="dataSettingMessageBooking.deadline_booking_time_from"
                                        class="!w-[80px] !h-[40px] text-[16px] text-center border-solid border !border-[#E6E6E6] rounded-[3px] text-[#222222]">
                                    <span class="ml-[18px] mr-[17px] font-semibold">時間</span>
                                    <input type="text" v-model="dataSettingMessageBooking.deadline_booking_time_to"
                                        class="!w-[80px] !h-[40px] text-[16px] text-center border-solid border !border-[#E6E6E6] rounded-[3px] text-[#222222] mr-[15px]">
                                    <span class="font-semibold">分前に予約締切</span>
                                </div>
                                <label class="text-[#535657] !font-light">※設定できるのは23時間59分以内です</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button class="w-[200px] h-[40px] text-[16px] border border-solid border-[#08BF5A] block rounded-[3px] mb-[16px] text-[#08BF5A]"
                    @click="saveSettingCalendar('startDeadline')">
                保存
            </button>
            <button class="w-[100px] h-[40px] text-[16px] border border-solid border-[#DDDDDD] block rounded-[3px] mb-[16px] text-[#888888]"
                    @click="window.location.reload()"
            >
                戻る
            </button>
        </div>
        <div class="tab-pane fade in mt-[37px]" id="setting-option">
            <label class="text-[16px] font-semibold mb-[14px] block">予約の受付制限</label>
            <label class="text-[16px] font-light mb-[22px]">1人のお客様が同時に予約できる件数を制限できます</label>
            <div>
                <div class="mb-[27px]">
                    <input type="radio" class="text-[16px] accent-[green] !m-0 !mr-[5px] !cursor-pointer" value="0" name="limitBooking" id="rd_no_limit"
                           @change="saveSettingCalendar('option')"
                           v-model="dataSettingMessageBooking.limit_book_each_customer">
                    <label class="text-[#888888] font-[300] !cursor-pointer" style="line-height: normal" for="rd_no_limit">制限なし</label>
                </div>
                <div class="">
                    <input type="radio" class="text-[16px] accent-[green] !m-0 !mr-[5px] !cursor-pointer" value="1" name="limitBooking" id="rd_number_of_reservations"
                           @change="saveSettingCalendar('option')"
                           v-model="dataSettingMessageBooking.limit_book_each_customer">
                    <label class="text-[#888888] mr-[30px] font-[300] !cursor-pointer" style="line-height: normal" for="rd_number_of_reservations">同時に予約できる件数</label>
                    <input type="text" class="text-center !w-[80px] !h-[40px] mr-[10px] !rounded-[3px] !border-[#E6E6E6]"
                           @change="saveSettingCalendar('option')"
                           v-model="dataSettingMessageBooking.number_limit_booking">
                    <span>件まで</span>
                </div>
            </div>
            <div class="mt-[20px]" v-show="dataSettingMessageBooking.limit_book_each_customer == 1">
                <label class="text-[14px] !text-[#222222] mb-1 font-light">受付制限に達している場合の案内テキスト <span class="text-[#F44336]">＊</span></label>
                <textarea @change="saveSettingCalendar('text_limit_book_each_customer')" v-model="dataSettingMessageBooking.text_limit_book_each_customer" class="form-control w-[600px] !h-[100px]" placeholder="1人あたりの予約可能上限に達しています。"></textarea>
                <div class="text-[14px] font-light text-[#F44336]" v-html="error_text_limit_book_each_customer"></div>
            </div>

            <div class="mt-[30px]">
                <span class="!font-semibold">予約ページの非表示</span>
                <div class="bg-[#F8F8F8] w-[600px] h-[64px] px-[25px] py-[11px] mt-[15px]">
                    <p>以下で設定した条件を満たす場合、予約ページ自体を表示しない設定です</p>
                    <p>例）「来店拒否」タグが付いている友だちに予約ページを表示しない など</p>
                </div>
                <div class="flex justify-between items-center w-[600px] h-[70px] border border-solid border-[#E0E0E0] px-[15px] mt-[20px]">
                    <div class="font-semibold text-[16px] text-[#222222]">対象人数</div>
                    <div class="link">
                        <a v-if="calendarSettingFilter.list_preview_filter.length == 0"
                           href="javascript:void(0)"
                           class="font-semibold text-[16px] text-[#5799DB] mr-[110px] underline">0人</a>
                        <a v-else @click="showNumberFilterHideBooking" href="javascript:void(0)"
                           class="font-semibold text-[16px] text-[#5799DB] underline ml-[-115px]"
                        >@{{ calendarSettingFilter.count_filter }}人</a>
                    </div>
                    <button @click="showModalFilterV2()"
                            class="font-light border border-solid border-[#5799DB] bg-white rounded-[4px] w-[180px] h-[40px] text-[#5799DB] hover:opacity-70 text-[14px] mr-[10px]">
                        絞り込み条件 登録・編集
                    </button>
                </div>
                <div class="w-[600px] max-h-[250px] overflow-y-auto border border-solid border-[#E0E0E0]">
                    <div class="setting_destination_area rounded-[4px] p-[10px] bg-[#F5F6F7] min-h-[115px] scroll-auto" v-if="calendarSettingFilter.list_preview_filter.length > 0">
                        <div v-for="(preview, index) in calendarSettingFilter.list_preview_filter" v-html="preview" style="font-weight: 600">
                        </div>
                    </div>
                    <div v-if="calendarSettingFilter.list_preview_filter == 0" class="mx-[15px] my-[15px] font-light border border-solid border-[#F8F8F8] rounded-[3px] flex justify-center items-center h-[40px]
                        bg-[#F8F8F8]">絞り込み条件が登録されていません
                    </div>
                </div>
                <div class="mt-[30px]">
                    <p>予約ページの案内テキスト</p>
                    <textarea @change="saveSettingCalendar('text_filter_show_booking')" v-model="dataSettingMessageBooking.text_filter_show_booking"
                              class="w-[600px] !h-[100px] text-[14px] text-[#222222] border-[#E0E0E0]" placeholder="詳細は運営元までお問い合わせください"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>