@push('css')
    <style>
        .cl-switch-lv2 {
            transform: rotate(180deg);
        }

        .cl-switch-lv2>span::before {
            width: 43px;
        }

        .cl-toggle-switch-lv2 {
            margin: 0;
        }

        .content-preview-action>div,
        .content-preview-action>div * {
            font-weight: 400;
        }

        .wrap-item-action-herme .type div:last-child {
            font-weight: 400;
        }

        .wrap-action-broadcast-new {
            display: flex;
            border: 1px solid #DDDDDD;
            border-radius: 4px;
            padding: 9px 15px;
            margin-bottom: 10px;
        }

        .wrap-item-action-herme {
            flex-grow: 1;
        }

        .wrap-item-action-herme>div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 400;
        }

        .wrap-item-action-herme .type {
            margin-bottom: 5px;
        }

        .wrap-action-broadcast-new .remove i {
            font-size: 18px;
            cursor: pointer;
            color: #E0E0E0;
        }

        .wrap-action-broadcast-new .remove {
            flex: 0 0 50px;
            padding-left: 15px;
            justify-content: center;
            display: flex;
            align-items: center;
        }
    </style>
@endpush
<div class="content">
    <div class="w-full h-[50px] text-[16px] flex justify-center items-center mb-[12px] mt-[-12px]" :class="!calendarSettingNotifyFullSlot.is_notify_full_slot ? ' text-[#FFFFFF] bg-[#888888] ' : ' text-[#222222] bg-[#F4FBF2] '">現在、空き枠通知受け取り設定は <span class="!font-[600] !mx-[9px]" :class="calendarSettingNotifyFullSlot.is_notify_full_slot ? 'text-[#08BF5A]' : ''"> @{{ calendarSettingNotifyFullSlot.is_notify_full_slot ? ' 受付中 ' : ' 停止中 ' }} </span> です</div>
    <label class="mb-[8px] text-[18px] font-semibold block text-[#222222]">空き枠通知受け取り（キャンセル待ち）設定</label>
    <span class="text-[#222222] text-[14px]">満席になったコースでも、残り枠が増加した場合に通知を受け取ることができます。</span>

    <div class="lg:w-9/12 md:w-10/12 max-w-[600px]">
        <div class="flex justify-between items-center mt-5">
            <div class="flex text-[#222222] !font-[600] text-[16px]">
                空き枠通知受け取り
                <div class="flex ml-2">
                    <div class="flex items-center justify-center grid grid-cols-3 gap-1">
                        <span class="text-[16px] leading-normal" :class="!calendarSettingNotifyFullSlot.is_notify_full_slot ? ' !font-[600] !text-[#222222]' : '!text-[#888888]'">停止中</span>
                        <div class="cl-toggle-switch cl-toggle-switch-lv2 flex items-center justify-center">
                            <label class="cl-switch cl-switch-lv2"><input type="checkbox" v-model="calendarSettingNotifyFullSlot.is_notify_full_slot" :value="calendarSettingNotifyFullSlot.is_notify_full_slot ? 1 : 0"><span></span></label>
                        </div>
                        <span class="text-[16px] leading-normal" :class="calendarSettingNotifyFullSlot.is_notify_full_slot ? ' !font-[600] !text-[#08BF5A]' : '!text-[#888888]'">受付中</span>
                    </div>
                </div>
            </div>
            <div>
                <a class="cursor-pointer text-[14px] text-[#888888] underline" @click="showHistorySettingNotifyFullSlot = true; getHistorySettingNotifyFullFull()">変更履歴</a>
            </div>
        </div>
        <div class="mt-2">
            <img width="100%" src="/images/Group3069.png" />
        </div>
        <div class="w-full mb-[33px] mt-5">
            <div class="text-[16px] text-[#222222] font-bold">
                通知メッセージ・アクション
            </div>
            <div class="flex mt-4 mb-3">
                <button type="button" @click="calendarSettingNotifyFullSlot.tab_current = 1" v-bind:class="calendarSettingNotifyFullSlot.tab_current == 1 ?
                'border-[#08BF5A] text-[#08BF5A] !bg-[#F4FBF2] !font-[600]' : 'border-[#DDDDDD] text-[#888888]'" class="mr-5 w-[200px] h-[40px] text-[16px]
                border border-solid block !rounded-[4px] hover:opacity-70">
                    通知受け取り申請時
                </button>
                <button type="button" @click="calendarSettingNotifyFullSlot.tab_current = 2" v-bind:class="calendarSettingNotifyFullSlot.tab_current == 2 ?
                'border-[#08BF5A] text-[#08BF5A] !bg-[#F4FBF2] !font-[600]' : 'border-[#DDDDDD] text-[#888888]'" class="w-[150px] h-[40px] text-[16px] border border-solid block !rounded-[4px] hover:opacity-70">
                    受付再開時
                </button>
            </div>
        </div>
        <div v-show="calendarSettingNotifyFullSlot.tab_current == 1">
            <div class="w-full mb-[33px]">
                <div class="flex items-center h-[50px] px-[16px] py-[10px] bg-[#F8F8F8] border-t border-r border-l border-solid border-[#DDDDDD]">
                    <button :disabled="calendarSettingNotifyFullSlot.use_message_notify_full_slot" class="w-[100px] h-[30px] bg-[#FFFFFF] border border-solid border-[#DDDDDD] font-normal mr-[9px] hover:opacity-70 rounded-[3px]" @click="appendTextInformation('{name}', 2)">
                        ＋ LINE名
                    </button>
                    <button :disabled="calendarSettingNotifyFullSlot.use_message_notify_full_slot" class="w-[100px] h-[30px] bg-[#FFFFFF] border border-solid border-[#DDDDDD] font-normal mr-[7px] hover:opacity-70 rounded-[3px]" @click="showReservationInformationModal = true">
                        予約情報
                    </button>
                    <button :disabled="calendarSettingNotifyFullSlot.use_message_notify_full_slot" class="w-[100px] h-[30px] bg-[#FFFFFF] border border-solid border-[#DDDDDD] font-normal mr-[16px] hover:opacity-70 rounded-[3px]" @click="showFriendInformationModal = true; getDataFriendInfo()">
                        友だち情報
                    </button>
                    <a href="javascript:void(0)" @click="insertExampleSentenceNotifyFull('full')" class="text-[#5799DB] underline font-normal mr-[29px]">例文を挿入</a>
                    <div class="flex items-center ml-auto">
                        <label class="custom-checkbox-n">
                            <input type="checkbox" hidden v-model="calendarSettingNotifyFullSlot.use_message_notify_full_slot"/>
                            <span></span>
                        </label>
                        <span class="font-normal"
                              :class="calendarSettingNotifyFullSlot.use_message_notify_full_slot ? 'text-[#08BF5A] !font-semibold' : ''">利用しない</span>
                    </div>
                </div>
                <textarea @click="saveCursorPosition" @keyup="saveCursorPosition" :disabled="calendarSettingNotifyFullSlot.use_message_notify_full_slot" @focus="saveCursorPosition($event)" @keyup="saveCursorPosition($event)" class="h-[400px] px-[16px] py-[12px] mb-[11px] border border-solid border-[#DDDDDD] focus:outline-none" v-model="calendarSettingNotifyFullSlot.message_notify_full_slot"></textarea>
                <span class="text-right block text-[#888888] mr-[5px]">@{{ calendarSettingNotifyFullSlot.message_notify_full_slot ? calendarSettingNotifyFullSlot.message_notify_full_slot.length: 0 }}/5,000</span>
            </div>
            <div class="w-full mb-[33px] mt-5">
                <div class="text-[16px] text-[#222222] font-light mb-4">
                    上記メッセージ送信以外に、タグ付け等のアクションを設定する場合はこちら↓
                </div>
                <div class="w-full border border-solid border-[#E0E0E0] rounded-[3px] mb-[23px]">
                    <div class="flex items-end relative h-[63px] border-b border-solid border-[#E0E0E0]">
                        <button type="button" @click="openModalActionNotifyFull('calendar_salon_notify_full', calendarSettingNotifyFullSlot
                        .action_id_notify_full_slot)" class="absolute right-[29px] top-[11px] w-[180px] h-[40px] border border-solid border-[#08BF5A]
                        text-[#08BF5A] rounded-[4px] hover:opacity-70">
                            アクション登録・編集
                        </button>
                        <label class="!text-[14px] text-[#08BF5A] font-semibold ml-[15px] border-b-[2px] border-solid border-[#08BF5A]">エルメアクション</label>
                    </div>
                    <div class="pl-[20px] pb-[27px] pr-[28px] pt-[20px] min-h-[40px] wrap-preview-action">
                        <div class="flex items-center justify-center w-full h-[40px] bg-[#F8F8F8] rounded-[3px]" v-if="!calendarSettingNotifyFullSlot.action_id_notify_full_slot">
                            <span class="text-[#535657]">エルメアクションが登録されていません</span>
                        </div>
                        <div v-else class="frame-preview-action">
                            <template v-for="(item, indexAction) in calendarSettingNotifyFullSlot.detail_action_full">
                                <div class="wrap-action-broadcast-new">
                                    {{-- template--}}
                                    <div class="wrap-item-action-herme" v-if="item.type == 'template'">
                                        <div class="type">
                                            <div>テンプレート</div>
                                            <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}" @click="openModalFilterAction(indexAction, calendarSettingNotifyFullSlot.action_id_notify_full_slot, item, 'calendar_salon_notify_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_notify_full_slot, item, 'calendar_salon_notify_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_notify_full_slot, item, 'calendar_salon_notify_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_notify_full_slot, item, 'calendar_salon_notify_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_notify_full_slot, item, 'calendar_salon_notify_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_notify_full_slot, item, 'calendar_salon_notify_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_notify_full_slot, item, 'calendar_salon_notify_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_notify_full_slot, item, 'calendar_salon_notify_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_notify_full_slot, item, 'calendar_salon_notify_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_notify_full_slot, item, 'calendar_salon_notify_full')">@{{ 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, 'calendar_salon_notify_full')">
                                        <i class="fas fa-trash-alt"></i>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="calendarSettingNotifyFullSlot.tab_current == 2">
            <div class="w-full mb-[33px] mt-5">
                <div class="flex items-center h-[50px] px-[16px] py-[10px] bg-[#F8F8F8] border-t border-r border-l border-solid border-[#DDDDDD]">
                    <button class="w-[100px] h-[30px] bg-[#FFFFFF] border border-solid border-[#DDDDDD] font-normal mr-[9px] hover:opacity-70 rounded-[3px]" @click="appendTextInformation('{name}', 2)">
                        ＋ LINE名
                    </button>
                    <button class="w-[100px] h-[30px] bg-[#FFFFFF] border border-solid border-[#DDDDDD] font-normal mr-[7px] hover:opacity-70 rounded-[3px]" @click="showReservationInformationModal = true">
                        予約情報
                    </button>
                    <button class="w-[100px] h-[30px] bg-[#FFFFFF] border border-solid border-[#DDDDDD] font-normal mr-[16px] hover:opacity-70 rounded-[3px]" @click="showFriendInformationModal = true; getDataFriendInfo()">
                        友だち情報
                    </button>
                    <a href="javascript:void(0)" @click="insertExampleSentenceNotifyFull('not_full')" class="text-[#5799DB] underline font-normal mr-[29px]">例文を挿入</a>
                </div>
                <textarea @click="saveCursorPosition" @keyup="saveCursorPosition" class="h-[400px] px-[16px] py-[12px] mb-[11px] border border-solid border-[#DDDDDD] focus:outline-none" v-model="calendarSettingNotifyFullSlot.message_notify_not_full"></textarea>
                <div class="flex justify-between items-center" :class="calendarSettingNotifyFullSlot.message_error ? 'justify-between' : 'justify-end'">
                    <span class="text-[#F44336]" v-html="calendarSettingNotifyFullSlot.message_error"></span>
                    <span class="text-right block text-[#888888] mr-[5px]">@{{ calendarSettingNotifyFullSlot.message_notify_not_full ? calendarSettingNotifyFullSlot.message_notify_not_full.length : 0 }}/5,000</span>
                </div>
            </div>
            <div class="w-full mt-5">
                <div class="text-[16px] text-[#222222] font-light mb-4">
                    上記メッセージ送信以外に、タグ付け等のアクションを設定する場合はこちら↓
                </div>
                <div class="w-full border border-solid border-[#E0E0E0] rounded-[3px] mb-[23px]">
                    <div class="flex items-end relative h-[63px] border-b border-solid border-[#E0E0E0]">
                        <button type="button" @click="openModalActionNotifyFull('calendar_salon_notify_not_full', calendarSettingNotifyFullSlot.action_id_not_full)
                        " class="hover:opacity-70 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-[20px] pb-[27px] pr-[28px] pt-[20px] min-h-[40px] wrap-preview-action">
                        <div v-if="!calendarSettingNotifyFullSlot.action_id_not_full" class="flex items-center justify-center w-full 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 calendarSettingNotifyFullSlot.detail_action_not_full">
                                <div class="wrap-action-broadcast-new">
                                    {{-- template--}}
                                    <div class="wrap-item-action-herme" v-if="item.type == 'template'">
                                        <div class="type">
                                            <div>テンプレート</div>
                                            <div :class="{'has-filter has-filter-calendar': checkActionFilter(item)}" @click="openModalFilterAction(indexAction, calendarSettingNotifyFullSlot.action_id_not_full, item, 'calendar_salon_notify_not_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_not_full, item, 'calendar_salon_notify_not_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_not_full, item, 'calendar_salon_notify_not_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_not_full, item, 'calendar_salon_notify_not_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_not_full, item, 'calendar_salon_notify_not_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_not_full, item, 'calendar_salon_notify_not_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_not_full, item, 'calendar_salon_notify_not_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_not_full, item, 'calendar_salon_notify_not_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_not_full, item, 'calendar_salon_notify_not_full')">@{{ 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, calendarSettingNotifyFullSlot.action_id_not_full, item, 'calendar_salon_notify_not_full')">@{{ 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, 'calendar_salon_notify_not_full')">
                                        <i class="fas fa-trash-alt"></i>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <button @click="saveSettingCalendarNotifyFull()" class="relative mt-5 w-[200px] h-[40px] border border-solid border-[#08BF5A] text-[#08BF5A] font-semibold rounded-[3px] hover:text-white hover:!bg-[#08BF5A]"> 保存</button>
    </div>
    @include('basic.calendar_management.modal.history_setting_notify_full_slot')
</div>