@push('css')
<style>
    .has-filter-calendar {
        color: #5799DB;
        text-decoration: underline;
        cursor: pointer;
    }
    .tooltipp:hover + .box_setting_tooltip {
        visibility: visible;
    }
</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>
            <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="localStorage.setItem('salon-tab', 'calendar-setting-course-staff'); localStorage.setItem('salon-tab-setting', 'create-edit-course'); window.open('/basic/calendar-salon/' + calendarId, '_blank')">コース設定</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]">
                <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 = '[SALON_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]"
                    :class="dataSettingMessageBooking.is_send_message == 1 ? '!bg-[#DDDDDD]' : '!bg-[#ffffff]'"
                    :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]"
                    :class="dataSettingMessageBooking.is_send_message_request == 1 ? '!bg-[#DDDDDD]' : '!bg-[#ffffff]'"
                    :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]"
                    :class="dataSettingMessageBooking.is_send_message_approve == 1 ? '!bg-[#DDDDDD]' : '!bg-[#ffffff]'"
                    :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]"
                    :class="dataSettingMessageBooking.is_send_message_reject == 1 ? '!bg-[#DDDDDD]' : '!bg-[#ffffff]'"
                    :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>
            <div class="flex justify-content-start items-center mb-[30px] relative">
                <label class="flex items-center mr-[15px]">
                    <input type="checkbox"
                           v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_AUTO"
                           v-model="dataSettingMessageBooking.f_send_booking_end"
                           class="!m-0 !mr-[10px] w-[25px] h-[25px] border border-solid border-[#DDDDDD] rounded-[4px] checked:bg-none">
                    <input type="checkbox"
                           v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageReservationType == ACTION_TYPE_REQUEST"
                           v-model="dataSettingMessageBooking.f_send_booking_booking"
                           class="!m-0 !mr-[10px] w-[25px] h-[25px] border border-solid border-[#DDDDDD] rounded-[4px] checked:bg-none">
                    <input type="checkbox"
                           v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageReservationType == ACTION_TYPE_APPROVE"
                           v-model="dataSettingMessageBooking.f_send_booking_approve"
                           class="!m-0 !mr-[10px] w-[25px] h-[25px] border border-solid border-[#DDDDDD] rounded-[4px] checked:bg-none">
                    <input type="checkbox"
                           v-if="dataSettingMessageBooking.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageReservationType == ACTION_TYPE_DENY"
                           v-model="dataSettingMessageBooking.f_send_booking_deny"
                           class="!m-0 !mr-[10px] w-[25px] h-[25px] border border-solid border-[#DDDDDD] rounded-[4px] checked:bg-none">
                    <span class="!text-[#222222] !text-[14px] !font-[300]">上記メッセージを必ず1通目に送信する</span>
                </label>
                <i class="fas fa-question-circle tooltipp" style="color: #888888"></i>
                <div class="box_setting_tooltip absolute left-[20px] bottom-[25px] w-[480px] p-[10px] bg-white rounded-[10px] shadow-[0_3px_6px_#00000029] text-[14px] font-light">
                    <span class="block text-[#222222]">アクションでメッセージを送信する設定を併用した場合、メッセージが順不同で送信される場合があります。<span class="text-[#F44336] !font-[600]">「上記メッセージを必ず1通目に送信する」にチェックを入れた場合、送信順が固定されますが、配信数のカウントが1通分増加します。</span></span>
                </div>
            </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_salon', 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">
                                {{-- 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_salon')">
                                            @{{ 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_salon')">
                                            @{{ 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_salon')">
                                            @{{ 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_salon')">
                                            @{{ 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_salon')">
                                            @{{ 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_salon')">
                                            @{{ 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_salon')">
                                            @{{ 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_salon')">
                                            @{{ 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' && (item.data.action != 1 || (item.data.content && item.data.content.length))">
                                    <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_salon')">
                                            @{{ 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_salon')">
                                            @{{ 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_salon')">
                                    <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_salon_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">
                                {{-- 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_salon_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_salon_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_salon_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_salon_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_salon_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_salon_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_salon_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_salon_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' && (item.data.action != 1 || (item.data.content && item.data.content.length))">
                                    <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_salon_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_salon_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_salon_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_salon_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">
                                {{-- 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_salon_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_salon_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_salon_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_salon_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_salon_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_salon_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_salon_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_salon_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' && (item.data.action != 1 || (item.data.content && item.data.content.length))">
                                    <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_salon_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_salon_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_salon_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_salon_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">
                                {{-- 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_salon_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_salon_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_salon_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_salon_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_salon_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_salon_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_salon_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_salon_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' && (item.data.action != 1 || (item.data.content && item.data.content.length))">
                                    <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_salon_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_salon_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_salon_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="showSettingMessageReservation = false">戻る
            </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"
                                @change="changeTypeSettingBooking "
                                name="startReceiveBooking"
                                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 v-if="dataSettingMessageBooking.start_receive_booking_type == 2">
                        <div class="relative w-[200px] mb-[19px]">
                            <select class="text-center w-[200px] h-[35px] bg-[#FFFFFF] border border-solid border-[#E0E0E0] rounded-[3px] py-0 !text-[14px]"
                                v-model="dataSettingMessageBooking.setting_time_booking_type">
                                <option value="1">日数指定</option>
                                <option value="2">時間指定</option>
                            </select>
                        </div>
                        <div class="mb-[27px]"
                            v-show="dataSettingMessageBooking.start_receive_booking_type == 2 && 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"
                                        v-model="dataSettingMessageBooking.before_booking_hour"
                                        class="setting-time-from !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.start_receive_booking_type == 2 && 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>
                    <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"
                                @change="changeTypeSettingBooking"
                                name="endReceiveBooking"
                                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 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] border border-solid border-[#E0E0E0] rounded-[3px] py-0 !text-[14px]"
                                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.deadline_receive_booking_type == 2 && 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"
                                        class="setting-time-from-deadline text-[16px] !w-[120px] !h-[40px] !pl-[48px] text-[#222222] border-solid border !border-[#E6E6E6] rounded-[3px] mr-[10px] timepicker-deadline-end-accept-booking">
                                    <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.deadline_receive_booking_type == 2 && 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>
            <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="showSettingMessageReservation = false">
                戻る
            </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 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>
            <div class="w-[600px] mt-7">
                <h3 class="font-[600] mb-[17px] text-[14px]">予約ページの非表示</h3>
                <div class="rounded-[4px] bg-[#F8F8F8] py-[14px] pl-[26px] text-[14px] text-[#222222]">
                    以下で設定した条件を満たす場合、予約ページ自体を表示しない設定です 例）「来店拒否」タグが付いている友だちに予約ページを表示しない など
                </div>
                <div class="flex justify-between items-center w-full h-[70px] border border-solid border-[#E0E0E0] px-[15px] mt-[20px]">
                    <div class="font-semibold text-[16px] text-[#222222]">対象人数</div>
                    <div class="link">
                        <a href="javascript:void(0)" v-if="list_preview_filter_calendar_booking.length == 0" class="font-semibold text-[16px] text-[#5799DB] mr-[110px] underline">@{{ 0 }}人</a>
                        <a href="javascript:void(0)" v-else @click="showNumberFilterSalonBooking" class="font-semibold text-[16px] text-[#5799DB] mr-[110px] underline">@{{ number_filter }}人</a>
                    </div> 
                    <button 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]" @click="showModalFilterV2CalendarSalonBooking()">絞り込み条件 登録・編集
                    </button>
                </div>
                <div class="w-full 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="list_preview_filter_calendar_booking.length > 0">
                                    <div v-for="(preview, index) in list_preview_filter_calendar_booking" v-html="preview" style="font-weight: 600">
                                    </div>
                    </div>
                    <div v-if="list_preview_filter_calendar_booking.length == 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>
            <div class="w-[600px] mt-7 mb-5">
                <h3 class="font-[600] mb-[17px] text-[14px]">予約ページの案内テキスト</h3>
                <textarea @blur="saveSettingCalendar" class="form-control min-h-52" v-model="message_outside_filter" placeholder="詳細は運営元までお問い合わせください"></textarea>
            </div>
        </div>
    </div>
</div>