@push('css')
    <style>
        #setting-input-parameter select:focus {
            outline: none;
        }
    </style>
@endpush
<div class="title-page text-[14px] w-[650px] min-h-[273px]">
    <div class="h-[40px] font-[600] text-[16px] text-[#222222] bg-[#F8F8F8] px-[15px] rounded-[5px] flex items-center">
        <div>パラメーターインポート</div>
    </div>
    <div class="px-[15px] mb-[20px]">
        <div class="my-[15px] text-[#222222]">
            パラメーターを利用して、QRコード（URL）読み込み時に外部システムの顧客情報をエルメの友だち情報にインポートすることができます。
        </div>
        <div class="flex">
            <div class="flex items-center justify-center border border-solid cursor-pointer rounded-l-[5px] h-[30px] w-[100px] !border-r-0"
                 @click="setIsOnParam(0)"
                 :class="externalLink.is_on_param == 0 ? 'font-[600] border-[--blue] bg-[--blue] text-white' : 'text-[--gray2] border-[#DDDDDD]'">利用しない</div>
            <div class="flex items-center justify-center border border-solid cursor-pointer rounded-r-[5px] h-[30px] w-[100px] !border-l-0"
                 @click="setIsOnParam(1)"
                 :class="externalLink.is_on_param == 1 ? 'font-[600] border-[--blue] bg-[--blue] text-white' : 'text-[--gray2] border-[#DDDDDD]'">利用する</div>
        </div>
    </div>

    <div class="title-page text-[14px] w-[650px]" v-if="externalLink.is_on_param">
        <div class="h-[30px] font-[600] text-[14px] text-[#222222] bg-[#F8F8F8] px-[15px] rounded-[5px] flex items-center">
            友だち情報の割り当て
        </div>
        <div class="font-[300] mt-[13px] mb-[25px] ml-[15px]">
            最大5つまでの友だち情報を選択することができます。
        </div>
        <div class="!bg-white mb-[30px]">
            <div class="flex text-[#222222]">
                <div class="w-[227px] mr-[23px]">
                    <p class="font-[600] text-center">パラメーター名</p>
                    <hr class="my-[12px]">
                    <div class="w-[227px] h-[40px] rounded-[5px] flex items-center justify-center mb-[15px] bg-[#F8F8F8]">
                        cid1
                    </div>

                    <div class="w-[227px] h-[40px] rounded-[5px] flex items-center justify-center mb-[15px] bg-[#F8F8F8]">
                        cid2
                    </div>

                    <div class="w-[227px] h-[40px] rounded-[5px] flex items-center justify-center mb-[15px] bg-[#F8F8F8]">
                        cid3
                    </div>

                    <div class="w-[227px] h-[40px] rounded-[5px] flex items-center justify-center mb-[15px] bg-[#F8F8F8]">
                        cid4
                    </div>

                    <div class="w-[227px] h-[40px] rounded-[5px] flex items-center justify-center mb-[15px] bg-[#F8F8F8]">
                        cid5
                    </div>
                </div>
                <div class="w-[400px]" id="setting-input-parameter">
                    <p class="font-[600] text-center">保存先の友だち情報</p>
                    <hr class="my-[12px]">
                    <div class="flex"
                        v-for="(item, indexAction) in setting_params">
                        <div class="relative !bg-white mb-[15px] w-[350px]" :id="'action_stt_'+indexAction">
                            <button class="relative form-control h-[40px] !bg-white text-center border-[#E0E0E0]" type="button" @click="setCurrentSelected(item)">
                                <span :class="item.friend_name != '' ? 'text-[#222222]' : 'text-[#E0E0E0]'">@{{ item.friend_name != '' ? item.friend_name : '選択してください' }}</span>
                                <svg class="text-[#888888] absolute right-[17px] top-[10px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
                                    <path fill-rule="evenodd" d="M18.425 10.271C19.499 8.967 18.57 7 16.88 7H7.12c-1.69 0-2.618 1.967-1.544 3.271l4.881 5.927a2 2 0 0 0 3.088 0l4.88-5.927Z" clip-rule="evenodd"/>
                                </svg>
                            </button>
                            <div class="absolute left-[-50px] top-[40px] z-[1000] w-[500px] rounded-[10px] shadow-[0px_0px_6px_#00000029] overflow-hidden" :class="`${item.name == currentSelect ? 'show' : 'hide'}`">
                                <div class="flex justify-content-between w-full">
                                    <div class="w-[45%] overflow-y-auto h-[230px] bg-[#F8F8F8]" style="border-right: 1px solid #DDDDDD">
                                        <ul class="w-full p-[10px]">
                                            <li class="rounded-[5px] p-[9px] mb-[5px]"
                                                @click="setGroupItem(item, 0)"
                                                :class="0 == item.group_open ? 'bg-[#08bf5a] text-white' : 'bg-white text-[#333333] hover:text-[#08bf5a]'">
                                                未分類
                                            </li>
                                            <li class="rounded-[5px] p-[9px] mb-[5px]"
                                                @click="setGroupItem(item, -1)"
                                                :class="-1 == item.group_open ? 'bg-[#08bf5a] text-white' : 'bg-white text-[#333333] hover:text-[#08bf5a]'">
                                                基本情報
                                            </li>
                                            <li class="rounded-[5px] p-[9px] mb-[5px]"
                                                @click="setGroupItem(item, -2)"
                                                :class="-2 == item.group_open ? 'bg-[#08bf5a] text-white' : 'bg-white text-[#333333] hover:text-[#08bf5a]'">
                                                国内住所
                                            </li>
                                            <li v-for="(category,index) in groups_friends "
                                                class="rounded-[5px] p-[9px] mb-[5px]"
                                                @click="setGroupItem(item, category.id)"
                                                :class="category.id == item.group_open ? 'bg-[#08bf5a] text-white' : 'bg-white text-[#333333] hover:text-[#08bf5a]'" role="button" data-toggle="collapse" aria-expanded="false" :id="'group_'+category.id" :data-id="category.id" :data-name="category.name">
                                                @{{ category.name }}
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="w-[55%] h-[230px] overflow-y-auto bg-[#F8F8F8]">
                                        <ul class="p-[10px]" v-if="friend_items != undefined && friend_items.length>0">
                                            <li class="flex p-[8px] cursor-pointer hover:bg-[#F4FBF2] rounded-[5px] items-center mb-[5px] bg-white w-full" :title="friendItem.title"
                                                style="list-style: none"
                                                v-for="(friendItem,index) in friend_items"
                                                @click="setFriendItem(item, friendItem.id, friendItem.title)"
                                                :class="item.friend_id == friendItem.id ? 'bg-[#F4FBF2]' : ''"
                                                id="'friend_info_id_'+index" :data-id="friendItem.id">
                                                <div class="flex items-center justify-center mr-[10px] w-[17px] h-[17px] rounded-[50%] border border-solid border-[#f2f2f2]">
                                                    <div class="bg-[#08bf5a] h-[9px] w-[9px] rounded-[50%] m-0 p-0" v-if="item.friend_id == friendItem.id"></div>
                                                </div>
                                                @{{ friendItem.title }}
                                            </li>
                                        </ul>
                                        <p class="p-[10px]" v-if="friend_items != undefined && friend_items.length == 0">分類を選択して下さい</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center h-[40px]" style="position: relative" v-if="item.friend_id">
                            <button class="ml-[19px]" v-on:click="showPopupDeleteParam(indexAction)">
                                <i class="far fa-trash"></i>
                            </button>
                            <div class="absolute top-[-85px] left-[-96px] w-[240px] h-[80px] p-[13px] bg-[#FFFFFF] rounded-[6px] shadow-[0px_5px_10px_#00000033] z-[999]"
                                 style="display: none"
                                :id="'popup-delete-' + indexAction">
                                <p class="font-[500] text-[#1F1F1F]" style="letter-spacing: -1px">選択を解除してよろしいですか？</p>
                                <div class="flex mt-[7px]">
                                    <button v-on:click="hidePopupDeleteParam(indexAction)"
                                            class="w-[100px] h-[30px] rounded-[5px] font-[500] text-[14px] border border-solid border-[#DDDDDD] flex items-center justify-center hover:opacity-70">
                                        キャンセル
                                    </button>
                                    <button v-on:click="deleteItemFriendId(indexAction)"
                                            class="w-[100px] h-[30px] rounded-[5px] font-[500] text-[14px] bg-[#F44336] text-[#ffffff] flex items-center justify-center hover:opacity-70 ml-[14px]">
                                        解除する
                                    </button>
                                </div>

                                <svg class="ml-[96px] h-6 w-6 text-[#FFFFFF]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                                    <path fill-rule="evenodd" d="M18.425 10.271C19.499 8.967 18.57 7 16.88 7H7.12c-1.69 0-2.618 1.967-1.544 3.271l4.881 5.927a2 2 0 0 0 3.088 0l4.88-5.927Z" clip-rule="evenodd"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="d-flex justify-content-start align-items-center mt-[27px]">
    <button @click="submitLandingParameter()"
            class="btn-blue-hover text-[--blue] w-[120px] h-[40px] flex items-center justify-center rounded-[5px]
                bg-white border-[2px] border-[#5799DB] mr-[20px]">
        <span class="font-[600] text-[14px]">保存</span>
    </button>
    <div class="btn-redirect-index" @click="redirectPageIndex()">一覧に戻る</div>
</div>