@push('css')
    <style>
        .tooltipp:hover + .box_setting_tooltip {
            visibility: visible;
        }
    </style>
@endpush
<div v-show="showSettingMessageCancel">
    <div class="flex justify-between">
        <div>
            <label class="mb-[6px] text-[20px] font-semibold block">予約キャンセル時の各種設定</label>
        </div>
        <div class="mr-[19px]">
            <span class="text-[#888888] text-[16px] underline font-light cursor-pointer"
                  @click="backToSettingMessage">設定一覧</span>
            <span class="text-[#888888] text-[16px]"> > 予約キャンセル時の各種設定</span>
        </div>
    </div>
    <span class="text-[16px]">このページではお客様が予約をキャンセルする時に関連する項目を設定します。</span>
    <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-cancel">基本設定・メッセージ</span>
            </li>
            <li class="mr-[30px] cursor-pointer">
                <span class="text-[16px] text-[#888888]" data-toggle="tab"
                      href="#setting-time-cancel">キャンセルの締切</span>
            </li>
        </ul>
    </div>
    <div class="tab-content">
        <div class="tab-pane fade in active mt-[37px]" id="setting-notification-cancel">
            <label class="text-[16px] font-semibold"
                   v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_AUTO || dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_NO_CANCEL">予約キャンセルの全承認・リクエスト</label>
            <label class="text-[16px] font-semibold"
                   v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN">予約変更の全承認・リクエスト</label>
            <div class="mt-[17px] mb-[47px] 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="autoApproveCancel"
                           value="1" name="cancelType" @click="actionSettingMessageCancelType = ACTION_TYPE_END"
                           v-model="dataSettingMessageCancel.approve_type">
                    <label class="font-light text-[#888888] !cursor-pointer" for="autoApproveCancel">全承認制にする</label>
                </div>
                <div class="mr-[44px] flex items-center">
                    <input type="radio" class="accent-[green] !m-0 !mr-[5px] w-[16px] h-[16px] !cursor-pointer" id="adminApproveCancel"
                           value="2" name="cancelType" @click="actionSettingMessageCancelType = ACTION_TYPE_REQUEST"
                           v-model="dataSettingMessageCancel.approve_type">
                    <label class="font-light text-[#888888] !cursor-pointer" for="adminApproveCancel">リクエスト制にする</label>
                </div>
                <div class="flex items-center">
                    <input type="radio" class="accent-[green] !m-0 !mr-[5px] w-[16px] h-[16px] !cursor-pointer" id="ignoreCancel"
                           value="3" name="cancelType" v-model="dataSettingMessageCancel.approve_type">
                    <label class="font-light text-[#888888] !cursor-pointer" for="ignoreCancel">予約後のキャンセル不可</label>
                </div>
            </div>
            <div v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_AUTO || dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN">
                <label class="text-[16px] font-semibold mb-[15px]">お客様に送信するメッセージ・アクション</label>
                <div class="mb-[21px]"
                     v-if="dataSettingMessageCancel.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="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN">
                    <button class="border border-solid text-[16px] rounded-[4px] w-[240px] h-[40px] mr-[6px]"
                            :class="actionSettingMessageCancelType == ACTION_TYPE_REQUEST ? 'border-[#08BF5A] text-[#08BF5A] bg-[#F4FBF2] font-semibold' : 'border-[#DDDDDD] text-[#888888]'"
                            @click="actionSettingMessageCancelType = ACTION_TYPE_REQUEST">キャンセルリクエスト申請時
                    </button>
                    <button class="border border-solid text-[16px] rounded-[4px] w-[240px] h-[40px] mr-[6px]"
                            :class="actionSettingMessageCancelType == ACTION_TYPE_APPROVE ? 'border-[#08BF5A] text-[#08BF5A] bg-[#F4FBF2] font-semibold' : 'border-[#DDDDDD] text-[#888888]'"
                            @click="actionSettingMessageCancelType = ACTION_TYPE_APPROVE">キャンセルリクエスト承認時
                    </button>
                    <button class="border border-solid text-[16px] rounded-[4px] w-[240px] h-[40px]"
                            :class="actionSettingMessageCancelType == ACTION_TYPE_DENY ? 'border-[#08BF5A] text-[#08BF5A] bg-[#F4FBF2] font-semibold' : 'border-[#DDDDDD] text-[#888888]'"
                            @click="actionSettingMessageCancelType = 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('cancel')" 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('cancel')" class="w-[100px] h-[30px] bg-[#FFFFFF] rounded-[3px] border border-solid border-[#DDDDDD] font-normal mr-[7px] hover:opacity-70"
                                @click="showReservationInformationModal = true, insertReservationInformation = '[LESSON_CALENDAR_date_time]'">
                            予約情報
                        </button>
                        <button :disabled="disabledButtonAddCode('cancel')" 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('cancel')"
                           class="text-[#5799DB] underline font-normal mr-[29px]">例文を挿入する</a>
                        <div class="flex items-center"  v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_AUTO">
                            <label class="custom-checkbox">
                                <input type="checkbox" hidden v-model="dataSettingMessageCancel.is_send_message"/>
                                <span></span>
                            </label>
                            <span class="font-normal"
                                  :class="dataSettingMessageCancel.is_send_message ? 'text-[#08BF5A] !font-semibold' : ''">利用しない</span>
                        </div>
                        <div class="flex items-center"  v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageCancelType == ACTION_TYPE_REQUEST">
                            <label class="custom-checkbox">
                                <input type="checkbox" hidden v-model="dataSettingMessageCancel.is_send_message_request"/>
                                <span></span>
                            </label>
                            <span class="font-normal"
                                  :class="dataSettingMessageCancel.is_send_message_request ? 'text-[#08BF5A] !font-semibold' : ''">利用しない</span>
                        </div>
                        <div class="flex items-center"  v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageCancelType == ACTION_TYPE_APPROVE">
                            <label class="custom-checkbox">
                                <input type="checkbox" hidden v-model="dataSettingMessageCancel.is_send_message_approve"/>
                                <span></span>
                            </label>
                            <span class="font-normal"
                                  :class="dataSettingMessageCancel.is_send_message_approve ? 'text-[#08BF5A] !font-semibold' : ''">利用しない</span>
                        </div>
                        <div class="flex items-center"  v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageCancelType == ACTION_TYPE_DENY">
                            <label class="custom-checkbox">
                                <input type="checkbox" hidden v-model="dataSettingMessageCancel.is_send_message_reject"/>
                                <span></span>
                            </label>
                            <span class="font-normal"
                                  :class="dataSettingMessageCancel.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="dataSettingMessageCancel.is_send_message == 1 ? '!bg-[#DDDDDD]' : '!bg-[#ffffff]'"          
                            :disabled="dataSettingMessageCancel.is_send_message == 1"
                            v-model="dataSettingMessageCancel.message_send_end" @focus="saveCursorPosition"
                            @click="saveCursorPosition" @keyup="saveCursorPosition"
                            v-if="dataSettingMessageCancel.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="dataSettingMessageCancel.is_send_message_request == 1 ? '!bg-[#DDDDDD]' : '!bg-[#ffffff]'"
                              :disabled="dataSettingMessageCancel.is_send_message_request == 1"
                              v-model="dataSettingMessageCancel.message_send_booking" @focus="saveCursorPosition"
                              @click="saveCursorPosition" @keyup="saveCursorPosition"
                              v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageCancelType == ACTION_TYPE_REQUEST"></textarea>
                    <textarea class="focus:outline-none h-[400px] px-[16px] py-[12px] mb-[11px] border border-solid border-[#DDDDDD]"
                                :class="dataSettingMessageCancel.is_send_message_approve == 1 ? '!bg-[#DDDDDD]' : '!bg-[#ffffff]'"
                              :disabled="dataSettingMessageCancel.is_send_message_approve == 1"
                              v-model="dataSettingMessageCancel.message_send_approve" @focus="saveCursorPosition"
                              @click="saveCursorPosition" @keyup="saveCursorPosition"
                              v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageCancelType == ACTION_TYPE_APPROVE"></textarea>
                    <textarea class="focus:outline-none h-[400px] px-[16px] py-[12px] mb-[11px] border border-solid border-[#DDDDDD]"
                            :class="dataSettingMessageCancel.is_send_message_reject == 1 ? '!bg-[#DDDDDD]' : '!bg-[#ffffff]'"
                              :disabled="dataSettingMessageCancel.is_send_message_reject == 1"
                              v-model="dataSettingMessageCancel.message_send_deny" @focus="saveCursorPosition"
                              @click="saveCursorPosition" @keyup="saveCursorPosition"
                              v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageCancelType == ACTION_TYPE_DENY"></textarea>
                    <span class="text-right block text-[#888888] mr-[5px]"
                          v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_AUTO">@{{ dataSettingMessageCancel.message_send_end ? countMessageSendEndLength : 0 }}/5,000</span>
                    <span class="text-right block text-[#888888] mr-[5px]"
                          v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageCancelType == ACTION_TYPE_REQUEST">@{{ dataSettingMessageCancel.message_send_booking ? countMessageSendRequestLength : 0 }}/5,000</span>
                    <span class="text-right block text-[#888888] mr-[5px]"
                          v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageCancelType == ACTION_TYPE_APPROVE">@{{ dataSettingMessageCancel.message_send_approve ? countMessageSendApproveLength : 0 }}/5,000</span>
                    <span class="text-right block text-[#888888] mr-[5px]"
                          v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageCancelType == ACTION_TYPE_DENY">@{{ dataSettingMessageCancel.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="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_AUTO"
                               v-model="dataSettingMessageCancel.f_send_cancel_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="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageCancelType == ACTION_TYPE_REQUEST"
                               v-model="dataSettingMessageCancel.f_send_cancel_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="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageCancelType == ACTION_TYPE_APPROVE"
                               v-model="dataSettingMessageCancel.f_send_cancel_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="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageCancelType == ACTION_TYPE_DENY"
                               v-model="dataSettingMessageCancel.f_send_cancel_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="dataSettingMessageCancel.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_cancel_booking_salon', dataSettingMessageCancel.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-[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="!dataSettingMessageCancel || !dataSettingMessageCancel.setting_action_id || !dataSettingMessageCancel.detail_action || dataSettingMessageCancel.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 dataSettingMessageCancel.detail_action">
                                <div class="wrap-action-broadcast-new !bg-[#FFFFFF]">
                                    {{-- template--}}
                                    <div class="wrap-item-action-herme" v-if="item.type == 'template'">
                                        <div class="type">
                                            <div>テンプレート</div>
                                            <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                                 @click="openModalFilterAction(indexAction, dataSettingMessageCancel.setting_action_id, item, 'setting_message_cancel_booking')">
                                                @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                            </div>
                                        </div>
                                        <div class="content-preview-action">
                                            <div v-html="item.data.template_name"></div>
                                            <div>を送信</div>
                                        </div>
                                    </div>
                                    {{-- richmenu	--}}
                                    <div class="wrap-item-action-herme" v-else-if="item.type == 'richmenu'">
                                        <div class="type">
                                            <div>リッチメニュー</div>
                                            <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                                 @click="openModalFilterAction(indexAction, dataSettingMessageCancel.setting_action_id, item, 'setting_message_cancel_booking')">
                                                @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                            </div>
                                        </div>
                                        <div class="content-preview-action">
                                            <div>
                                                <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}</span>
                                                <span v-else>表示を停止</span>
                                            </div>
                                            <div>
                                                <span v-if="item.data.action != 1">を表示</span>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- scenario	--}}
                                    <div class="wrap-item-action-herme" v-else-if="item.type == 'scenario'">
                                        <div class="type">
                                            <div>ステップ</div>
                                            <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                                 @click="openModalFilterAction(indexAction, dataSettingMessageCancel.setting_action_id, item, 'setting_message_cancel_booking')">
                                                @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                            </div>
                                        </div>
                                        <div class="content-preview-action">
                                            <div>
                                                <span v-if="item.data.action == 1">停止</span>
                                                <span v-else>
                                                    @{{ item.data.scenario_name }}
                                                </span>
                                            </div>
                                            <div>
                                                <span v-if="item.data.action == 2">
                                                    を開始
                                                </span>
                                                <span v-else-if="item.data.action == 3">
                                                    を@{{ item.data.start_day }} ︎日目から再開
                                                </span>
                                            </div>
                                        </div>
                                    </div>

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

                                    {{-- remind --}}
                                    <div class="wrap-item-action-herme" v-if="item.type == 'remind'">
                                        <div class="type">
                                            <div>リマインド</div>
                                            <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                                 @click="openModalFilterAction(indexAction, dataSettingMessageCancel.setting_action_id, item, 'setting_message_cancel_booking')">
                                                @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                            </div>
                                        </div>
                                        <div class="content-preview-action">
                                            <div>@{{ item.data.remind_name }}</div>
                                            <div>
                                                <span v-if="item.data.type == 1">を開始</span>
                                                <span v-else>を停止</span>
                                            </div>
                                        </div>
                                    </div>

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

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

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


                                    {{-- trang thai doi ung --}}
                                    <div class="wrap-item-action-herme" v-if="item.type == 'compliant_status' && (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, dataSettingMessageCancel.setting_action_id, item, 'setting_message_cancel_booking')">
                                                @{{ checkActionFilter(item) ? '絞り込みあり' : '絞り込みなし' }}
                                            </div>
                                        </div>
                                        <div class="content-preview-action">
                                            <div>
                                                @{{ item.data.action == 1 ? item.data.content : '外す' }}
                                            </div>
                                            <div>
                                                <span v-if="item.data.action == 1">をつける</span>
                                                {{-- <span v-else>をはずす</span>--}}
                                            </div>
                                        </div>
                                    </div>

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

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

                                    <div class="remove" @click="deleteItemAction(indexAction, 'setting_message_cancel_booking_salon')">
                                        <i class="fas fa-trash-alt"></i>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
                <div v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageCancelType == 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_cancel_request_salon', dataSettingMessageCancel.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="!dataSettingMessageCancel || !dataSettingMessageCancel.setting_action_request || !dataSettingMessageCancel.detail_action_request || dataSettingMessageCancel.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 dataSettingMessageCancel.detail_action_request">
                                <div class="wrap-action-broadcast-new !bg-[#FFFFFF]">
                                    {{-- template--}}
                                    <div class="wrap-item-action-herme" v-if="item.type == 'template'">
                                        <div class="type">
                                            <div>テンプレート</div>
                                            <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                                 @click="openModalFilterAction(indexAction, dataSettingMessageCancel.setting_action_request, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_request, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_request, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_request, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_request, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_request, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_request, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_request, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_request, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_request, item, 'setting_message_cancel_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_cancel_request_salon')">
                                        <i class="fas fa-trash-alt"></i>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
                <div v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageCancelType == 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_cancel_approve_salon', dataSettingMessageCancel.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="!dataSettingMessageCancel || !dataSettingMessageCancel.setting_action_approve || !dataSettingMessageCancel.detail_action_approve || dataSettingMessageCancel.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 dataSettingMessageCancel.detail_action_approve">
                                <div class="wrap-action-broadcast-new !bg-[#FFFFFF]">
                                    {{-- template--}}
                                    <div class="wrap-item-action-herme" v-if="item.type == 'template'">
                                        <div class="type">
                                            <div>テンプレート</div>
                                            <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                                 @click="openModalFilterAction(indexAction, dataSettingMessageCancel.setting_action_approve, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_approve, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_approve, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_approve, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_approve, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_approve, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_approve, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_approve, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_approve, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_approve, item, 'setting_message_cancel_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_cancel_approve_salon')">
                                        <i class="fas fa-trash-alt"></i>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
                <div v-if="dataSettingMessageCancel.approve_type == SETTING_MESSAGE_APPROVE_TYPE_ADMIN && actionSettingMessageCancelType == 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_cancel_deny_salon', dataSettingMessageCancel.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="!dataSettingMessageCancel || !dataSettingMessageCancel.setting_action_reject || !dataSettingMessageCancel.detail_action_reject || dataSettingMessageCancel.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 dataSettingMessageCancel.detail_action_reject">
                                <div class="wrap-action-broadcast-new !bg-[#FFFFFF]">
                                    {{-- template--}}
                                    <div class="wrap-item-action-herme" v-if="item.type == 'template'">
                                        <div class="type">
                                            <div>テンプレート</div>
                                            <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}"
                                                 @click="openModalFilterAction(indexAction, dataSettingMessageCancel.setting_action_reject, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_reject, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_reject, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_reject, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_reject, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_reject, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_reject, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_reject, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_reject, item, 'setting_message_cancel_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, dataSettingMessageCancel.setting_action_reject, item, 'setting_message_cancel_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_cancel_deny_salon')">
                                        <i class="fas fa-trash-alt"></i>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
            <div class="h-[240px]" v-else></div>
            <button class="w-[200px] h-[40px] border border-solid border-[#08BF5A] text-[#08BF5A] text-[16px] rounded-[3px] mb-[16px]"
                    @click="saveSettingCancelCalendar('message')">
                保存
            </button>
        </div>
        <div class="tab-pane fade in mt-[37px]" id="setting-time-cancel">
            <label class="text-[16px] font-semibold mb-[19px]">予約キャンセルの締め切り</label>
            <div class="flex mb-[22px]">
                <div class=" ">
                    <button class="w-[140px] 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="noDeadline" class="w-full cursor-pointer mb-[8px]">
                            <input type="radio" class="text-[16px] accent-[green] !m-0 !mr-[5px]" value="1"
                                   v-model="dataSettingMessageCancel.deadline_cancel_booking_type"
                                   name="deadlineCancelBooking" id="noDeadline">
                            <span class="font-light text-[#888888]" style="line-height: normal">締切を設定しない（コース開始日時までキャンセル可能）</span>
                        </label>
                        <label for="setDeadline" class="w-full cursor-pointer">
                            <input type="radio" class="text-[16px] accent-[green] !m-0 !mr-[5px]" value="2"
                                   v-model="dataSettingMessageCancel.deadline_cancel_booking_type"
                                   @change="changeTypeSettingBooking "
                                   name="deadlineCancelBooking" id="setDeadline">
                            <span class="font-light text-[#888888]"
                                  style="line-height: normal">キャンセル締切を設定する</span>
                        </label>
                    </div>
                    <div v-if="dataSettingMessageCancel.deadline_cancel_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] text-[14px]"
                                    v-model="dataSettingMessageCancel.setting_time_booking_type"
                            >
                                <option value="1">日数指定</option>
                                <option value="2">時間指定</option>
                            </select>
                        </div>
                        <div class="mb-[27px]" v-show="dataSettingMessageCancel.setting_time_booking_type == 1">
                            <label class="font-semibold mb-[7px]">予約日時</label>
                            <div class="flex items-center mb-[5px]">
                                <input type="text" v-model="dataSettingMessageCancel.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="cancelSettingTime"
                                           v-model="dataSettingMessageCancel.before_booking_hour"
                                           readonly
                                           class="setting-time-from-cancel !w-[120px] text-[#222222] text-[16px] !h-[40px] !pl-[48px] border-solid border !border-[#E6E6E6] rounded-[3px] mr-[10px] timepicker-cancel-hour">
                                    <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="dataSettingMessageCancel.setting_time_booking_type == 2">
                            <label class="font-semibold mb-[7px]">コース開始日時の</label>
                            <div class="flex items-center mb-[5px]">
                                <input type="text" v-model="dataSettingMessageCancel.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="dataSettingMessageCancel.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]">※設定できるのは23時間59分以内です</label>
                        </div>
                    </div>
                </div>
            </div>
            <button class="w-[150px] h-[40px] text-[16px] border border-solid border-[#08BF5A] block rounded-[3px] mb-[16px] text-[#08BF5A]"
                    @click="saveSettingCancelCalendar('startDeadline')">
                保存
            </button>
        </div>
    </div>
</div>