<template>
    <div class="content">
        <div class="top-banner banner">
            <div class="flex-column align-center justify-center content">
                <h1 class="banner-title text-ct white" aria-live="assertive">회원가입</h1>
            </div>
        </div>
        <PageNavigationBar />
        <div class="pt100 pb100">
            <div class="w1280">
                <div class="top-zone">
                    <div class="mb24">
                        <ProgressBar :steps="step" :pageNumber="PageNumber" />
                        <div class="flex justify-between align-center mt40">
                            <div class="step-zone">
                                <p><span>{{ PageNumber }}단계 </span>/ 4단계</p>
                            </div>
                            <button class="small-btn darkg-border-btn" title="회원가입 매뉴얼 다운로드"
                                style="border-radius: 3rem;"
                                @click="$downloadFileByIdNoAuthCheck('FILE_0000000001', 'CMMN_FILE_0000000001', 'AI 디지털교과서 통합지원센터 회원가입 사용자매뉴얼.pdf', 'BBS_0000000032')">회원가입
                                매뉴얼</button>
                        </div>
                    </div>
                </div>
                <Terms @TermsSuccess="pageStatusWithAgree" v-show="PageNumber === 1" />
                <div v-show="PageNumber === 2">
                    <div class="page-title mb40">
                        <h2 class="page-sub-title" aria-live="polite">본인인증</h2>
                    </div>
                    <div class="authentication border pd60">
                        <div class="authentication-info mb30 text-ct">
                            <p class="detail-bold mb5">본인인증 안내</p>
                            <p class="detail-text">본인명의로 등록된 휴대폰번호만 인증이 가능합니다.<br />
                                휴대폰 인증을 통한 가입을 원하시면 아래 버튼을 눌러 회원가입을 진행해주세요.</p>
                        </div>

                        <div class="flex justify-center">
                            <NiceM :service="'prov'" @revData="requestEvent" />
                            <!--  prov = 실제 호출  devf = 실패시 테스트, devs = 성공테스트 -->
                        </div>
                    </div>
                </div>

                <div class="join-zone" v-show="PageNumber === 3">
                    <div class="page-title mb40">
                        <h2 class="page-sub-title" aria-live="polite">회원정보 입력</h2>
                    </div>
                    <div class="user-type mb60">
                        <p class="type-content text-ct mb24"><strong class="middle-title">AI 디지털교과서
                                통합지원센터 회원가입을
                                환영합니다.</strong><br />
                            회원종류에 따라 가입절차가 다르니 반드시 본인이 해당하는 회원 유형을 선택해주세요.</p>
                        <ul class="user-tab flex justify-center" role="tablist" aria-label="user type tabs">
                            <div v-for="(user, idx) in userType" :key="idx"
                                :class="['gd-6', idx === 0 ? 'pl0' : 'pr0', userTypedisable && userActive !== idx ? 'user-disabled' : '']">
                                <li role="tab" :aria-selected="userActive === idx" :aria-controls="user.panel"
                                    :id="user.id"
                                    :class="{ 'user-item pd30 cursor': true, 'user-selected': userActive === idx }">
                                    <router-link to="#"
                                        @click.prevent="userTypedisable ? '' : userTypeActive(idx, user.label)"
                                        @keydown.enter.space="userTypedisable ? '' : userTypeActive(idx, user.label)">
                                        <img v-if="userActive === idx && user.label === '일반회원'"
                                            src="../../../../resources/img/user_a.png" alt="일반회원 활성화 아이콘 " class="mb12">
                                        <img v-else-if="userActive === idx && user.label === '기업회원'"
                                            src="../../../../resources/img/company_a.png" alt="기업회원 활성화 아이콘 "
                                            class="mb12">
                                        <img v-else-if="user.label === '일반회원'"
                                            src="../../../../resources/img/user_b.png" alt="일반회원 비활성화 아이콘" class="mb12">
                                        <img v-else src="../../../../resources/img/company_b.png" alt="기업회원 비활성화 아이콘"
                                            class="mb12">
                                        <h3 class="text-ct mb15">{{ user.label }}</h3>
                                        <p v-show="user.label === '기업회원'" class="small-text text-ct">가입하고자 하는 기업의 등록 여부를
                                            확인 후
                                            다음 단계를
                                            진행합니다.<br />
                                            기업이 조회되지 않는 경우 기업의 최초 등록이 필요합니다.<br />
                                            기업의 최초 가입자는 「기업관리자」로 등록되며, 기업별 관리자는 1인만 가입할 수 있습니다.</p>
                                        <p v-show="user.label === '일반회원'" class="small-text text-ct">회원가입 시 「일반회원」으로
                                            등록되며,<br /> 포털사이트에 대한 소개 및
                                            홍보자료 조회 기능이 부여됩니다.<br />
                                            소속 기업 등록을 하시면 AI 디지털교과서 통합지원센터의<br /> 다양한 지원 서비스를 이용하실 수 있습니다.<br /></p>
                                    </router-link>
                                </li>
                            </div>
                        </ul>
                    </div>
                    <div class="user-content">
                        <!-- 기업회원 -->
                        <div class="border pd60" role="tabpanel"
                            v-show="(userActive === 0 && innerStep < 1 && userTypedisable) || (userActive === 1 && innerStep < 0)">
                            <div class="compnay-search" v-show="userActive === 0 && innerStep === 0">
                                <div class="middle-title mb16">
                                    <h4>기업 검색</h4>
                                </div>
                                <div class="flex align-center mb30">
                                    <div class="gd-2 pl0 pr0">
                                        <select class="full-select" v-model="search['searchType']" id="panel1">
                                            <option value="name">기업명</option>
                                            <option value="tel">전화번호</option>
                                            <option value="brno">사업자번호</option>
                                        </select>
                                    </div>
                                    <div class="gd-8">
                                        <input type="text" class="full-input" v-model="search.searchText"
                                            placeholder="기업명을 입력하세요." @keyup.enter="companySelectListSearch()"
                                            v-if="search.searchType === 'name'" autocomplete='off'>
                                        <input type="text" class="full-input" v-model="search.searchText"
                                            placeholder="사업자등록번호를 입력하세요." @keyup.enter="companySelectListSearch()"
                                            v-else autocomplete='off'>
                                    </div>
                                    <div class="gd-2 pl0 pr0">
                                        <button class="large-btn blue-border-btn ml0" title="검색"
                                            @click="companySelectListSearch()">검색</button>
                                    </div>
                                </div>
                                <div class="company-list">
                                    <table class="list-table company-table mb15">
                                        <colgroup>
                                            <col width="15%">
                                            <col width="20%">
                                            <col width="14%">
                                            <col width="14%">
                                            <col width="30%">
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th>기업명</th>
                                                <th>주소</th>
                                                <th>대표전화</th>
                                                <th>사업자등록번호</th>
                                                <th>가입신청</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(companyOne, index) in companyList" :key="index">
                                                <td>{{ companyOne.entNm }}</td>
                                                <td>
                                                    <p class="ellipsis">{{ companyOne.entAddr }} {{ companyOne.entDaddr
                                                        }}
                                                    </p>
                                                </td>
                                                <td>{{ $HyphenMinus(companyOne.entTelno) }}</td>
                                                <td>{{ $hyphenBrno(companyOne.brno) }}</td>
                                                <td>
                                                    <div class="btn-zone flex align-center justify-center">
                                                        <div class="gd-6 pl0">
                                                            <button title="기업회원신청"
                                                                :class="[companyOne.aprvDt === null || companyOne.hasRprsYn === 'N' ? 'gray-btn' : 'blue-border-btn', 'large-btn ml0']"
                                                                @click="innerStepGo(companyOne, 'ROLE_CO_USER', 1)"
                                                                :disabled="companyOne.aprvDt === null || companyOne.hasRprsYn === 'N'">기업회원신청</button>
                                                        </div>
                                                        <div class="gd-6 pl0 pr0">
                                                            <button title="기업관리자신청"
                                                                :class="[companyOne.hasRprsYn === 'Y' ? 'gray-btn' : 'green-border-btn', 'large-btn ml0']"
                                                                :disabled="companyOne.hasRprsYn === 'Y'"
                                                                @click="innerStepForManager(companyOne, 'ROLE_CO_MANAGER', 1, false)">기업관리자신청</button>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr v-if="companyList.length == 0">
                                                <td colspan="5" class="text-ct data-none">등록된 정보가 존재하지 않습니다.</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <PaginationButton :className="'admin-pagination'"
                                        v-model:currentPage="search.currentPage" :pagination="pagination"
                                        :click="companySelectList" />
                                    <div class="btn-zone flex justify-end">
                                        <div class="gd-2 pl0 pr0">
                                            <button class="large-btn blue-btn ml0" title="기업 신규 신청"
                                                @click="alertModalOpen">기업 신규
                                                신청</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 일반회원 두루두루 사용 -->
                        <div class="border pd30 " role="tabpanel"
                            v-show="(userActive === 0 && innerStep === 1) || (userActive === 1 && innerStep === 0 && userTypedisable)"
                            ref="form">
                            <div class="flex justify-between align-center border-b mb30">
                                <div class="middle-title pb10">
                                    <h4>회원정보</h4>
                                </div>
                                <p class="small-text"><span class="red-text">*</span>는 필수 입력 항목입니다.</p>
                            </div>
                            <div class="form-table-style">
                                <table class="form-table mb10">
                                    <tr>
                                        <td class="text-lf">
                                            <div class="gd-12 pl0 pr0">
                                                <div class="mb16">
                                                    <label for="panel2" class="form-title ">아이디</label>
                                                    <p class="small-text"> 영문 소문자, 숫자 , 기호 -, _ 만 사용하여 5~ 20자리</p>
                                                </div>
                                                <div class="flex justify-start align-center">
                                                    <div class="gd-6 pl0">
                                                        <input type="text" class="full-input" placeholder="아이디를 입력하세요."
                                                            v-model="user_info.lgnId" id="panel2" autocomplete='off'
                                                            aria-required="true" />
                                                    </div>
                                                    <div class="gd-2 pl0 pr0">
                                                        <button class="large-btn blue-border-btn" title="중복확인"
                                                            @click="userIdDuplicationCheck()">중복확인</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-lf">
                                            <div class="gd-8 pl0">
                                                <div class="mb16">
                                                    <label for="user_pw" class="form-title ">비밀번호</label>
                                                    <p class="small-text">영문, 숫자, 특수문자 조합된 6~20자리</p>
                                                </div>
                                                <input type="password" class="full-input" placeholder="비밀번호를 입력하세요."
                                                    v-model="user_info.mbrEncptPswd" id="user_pw" autocomplete='off'
                                                    aria-required="true" />
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-lf">
                                            <div class="gd-8 pl0">
                                                <div class="mb16">
                                                    <label for="user_pw_check" class="form-title ">비밀번호확인</label>
                                                    <div
                                                        v-if="user_info.mbrEncptPswd !== null && user_info.user_pw_check !== null">
                                                        <p v-show="this.user_info.mbrEncptPswd === this.user_info.user_pw_check"
                                                            class="suc-text">비밀번호
                                                            일치합니다.</p>
                                                        <p v-show="this.user_info.mbrEncptPswd !== this.user_info.user_pw_check"
                                                            class="red-text">
                                                            비밀번호가 일치하지 않습니다.</p>
                                                    </div>
                                                </div>
                                                <input type="password" class="full-input"
                                                    placeholder="비밀번호를 한번 더 입력하세요." v-model="user_info.user_pw_check"
                                                    id="user_pw_check" autocomplete='off' aria-required="true" />
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-lf pd0">
                                            <div class="flex justify-start align-center">
                                                <div class="gd-5 pl0 pt10 pb10">
                                                    <label for="user_nm" class="form-title mb16">이름</label>
                                                    <input type="text" class="full-input" placeholder="이름을 입력하세요."
                                                        v-model="user_info.mbrEncptFlnm" id="user_nm" readonly
                                                        disabled />
                                                </div>
                                                <div class="gd-5 pl0 pr0 pt10 pb10" v-show="userActive !== 1">
                                                    <label for="mbr_jbgd" class="fw-bold mb16">직위(직급)</label>
                                                    <input type="text" class="full-input" placeholder="직급을 입력하세요."
                                                        v-model="user_info.mbrJbgdNm" id="mbr_jbgd" />
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-lf">
                                            <div class="gd-6 pl0 pr0">
                                                <label for="user_tel1" class="form-title mb16">전화번호</label>
                                                <div class="flex justify-start no-gutters">
                                                    <div class="gd-2 pl0 pr0">
                                                        <input type="text" v-model="user_tel1" id="user_tel1" readonly
                                                            disabled autocomplete='off' class="full-input" />
                                                    </div>
                                                    <div class="pd10">-</div>
                                                    <div class="gd-2 pl0 pr0">
                                                        <label for="user_tel2" class="visually-hidden">전화번호
                                                            두번째자리</label>
                                                        <input type="text" v-model="user_tel2" id="user_tel2" readonly
                                                            disabled autocomplete='off' class="full-input" />
                                                    </div>
                                                    <div class="pd10">-</div>
                                                    <div class="gd-2 pl0 pr0">
                                                        <label for="user_tel3" class="visually-hidden">전화번호
                                                            세번째자리</label>
                                                        <input type="text" v-model="user_tel3" id="user_tel3" readonly
                                                            disabled autocomplete='off' class="full-input" />
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-lf">
                                            <div class="gd-12 pl0 pr0">
                                                <label for="email_id" class="form-title mb16">이메일</label>
                                                <div class="flex justify-start">
                                                    <div class="gd-2 pl0 pr0">
                                                        <input type="text" class="full-input" id="email_id"
                                                            v-model="email_id" autocomplete='off'
                                                            aria-required="true" />
                                                    </div>
                                                    <div class="pd10">@</div>
                                                    <div class="gd-2 pl0 pr0">
                                                        <label for="email_dns" class="visually-hidden">이메일 도메인자리</label>
                                                        <input type="text" class="full-input" v-model="email_dns"
                                                            id="email_dns" autocomplete='off' aria-required="true" />
                                                    </div>
                                                    <div class="gd-2">
                                                        <label for="email" class="visually-hidden">이메일 주소</label>
                                                        <select name="" id="email" class="full-select ml0"
                                                            v-model="select_email_dns">
                                                            <option value="null">직접 입력</option>
                                                            <option value="naver.com">naver.com</option>
                                                            <option value="hanmail.net">hanmail.net</option>
                                                            <option value="gmail.com">gmail.com</option>
                                                            <option value="daum.net">daum.net</option>
                                                        </select>
                                                    </div>
                                                    <div class="gd-2 pl0 pr0">
                                                        <button class="large-btn blue-border-btn" title="중복확인"
                                                            @click="emailDuplicateCheck()">중복확인</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr v-show="userActive !== 1">
                                        <td class="text-lf">
                                            <div class="flex justify-start align-center">
                                                <div class="gd-12 pl0 pr0">
                                                    <div class="mb16">
                                                        <span class="form-title">재직증명서</span>
                                                        <p class="small-text red-text">※ 재직증명서 내 주민등록번호를 반드시 마스킹하여 업로드
                                                            해야
                                                            합니다.</p>
                                                    </div>
                                                    <Attachment @emitFiles="emitFiles" :type="'certification'"
                                                        @file-deleted="handleFileDeleted" :text="'재직증명서를 첨부해주세요.'"
                                                        :options="{ allowedExtensions: ['pdf'] }" />
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="flex justify-start align-center subscribe-zone">
                                                <input type="checkbox" name="" id="sub" v-model="user_info.rcptnAgreYn">
                                                <label for="sub" class="ml5 detail-text">통합지원센터 소식 구독서비스 동의</label>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="border pd30 join-wraite mt40"
                            v-show="(userActive === 0 && innerStep === 1 && user_info.authrtId === 'ROLE_CO_MANAGER' && ent_info.isEntRegist === true)">
                            <div class="flex justify-between align-center  border-b mb30">
                                <div class="middle-title pb10">
                                    <h4>기업정보</h4>
                                </div>
                                <p><span class="red-text">*</span>는 필수 입력 항목입니다.</p>
                            </div>
                            <div class="form-table-style">
                                <table class="form-table mb10">
                                    <tr>
                                        <td class="text-lf">
                                            <div class="gd-12 pl0 pr0">
                                                <div class="mb16">
                                                    <span class="form-title ">기업로고</span>
                                                </div>
                                                <div class="gd-6 pl0 mb10">
                                                    <div class="logo-zone border flex justify-center radius">
                                                        <img v-if="logoPreview" :src="logoPreview" class="inline" />
                                                        <p v-else class="text-ct detail-bold">Logo</p>
                                                    </div>
                                                </div>
                                                <ul class="mb10">
                                                    <li class="small-text">&#8251; 이미지는 340*120 사이즈를 권장합니다.</li>
                                                </ul>
                                                <div class="gd-6 pl0">
                                                    <label for="logoImg" class="cursor upload-btn pd5">찾아보기</label>
                                                    <input type="file" accept="image/*" name="logoImg" id="logoImg"
                                                        @change="logoUpload" style="display: none;" />
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-lf">
                                            <div class="gd-12 pl0 pr0">
                                                <div class="mb16">
                                                    <label for="ent_nm" class="form-title ">기업명</label>
                                                </div>
                                                <div class="gd-6 pl0">
                                                    <input type="text" class="full-input" placeholder="기업명을 입력하세요."
                                                        v-model="ent_info.entNm" id="ent_nm" autocomplete='off'
                                                        aria-required="true" />
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-lf">
                                            <div class="gd-12 pl0 pr0">
                                                <div class="mb16">
                                                    <label for="brno" class="form-title ">사업자등록번호</label>
                                                </div>
                                                <div class="flex justify-start align-center">
                                                    <div class="gd-6 pl0">
                                                        <input type="text" class="full-input"
                                                            placeholder="사업자등록번호를 숫자만 입력해주세요." v-model="ent_info.brno"
                                                            id="brno" autocomplete='off' aria-required="true" />
                                                    </div>
                                                    <div class="gd-2 pl0 pr0">
                                                        <button class="large-btn blue-border-btn" title="사업자등록번호 확인"
                                                            @click="checkBusinessId()">사업자등록번호 확인</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-lf">
                                            <div class="gd-12 pl0">
                                                <div class="mb16">
                                                    <label for="ent_intrcn_smry" class="fw-bold">한 줄 소개</label>
                                                    <p class="small-text">20자 이내로 회사를 소개 해주세요.</p>
                                                </div>
                                                <input type="text" class="full-input" maxlength="20"
                                                    placeholder="한 줄 소개를 입력하세요." v-model="ent_info.entIntrdSmryCn"
                                                    id="ent_intrcn_smry" autocomplete='off' />
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-lf">
                                            <div class="gd-12 pl0 pr0">
                                                <div class="mb16">
                                                    <label for="ent_addr" class="form-title ">주소</label>

                                                </div>
                                                <div class="flex justify-start align-center mb5">
                                                    <div class="gd-2 pl0">
                                                        <input type="text" class="full-input" placeholder="우편번호"
                                                            readonly disabled v-model="ent_info.zip"
                                                            autocomplete='off' />
                                                    </div>
                                                    <div class="gd-2 pl0 pr0">
                                                        <button class="large-btn blue-border-btn" title="주소 찾기"
                                                            @click="openPostcode()">
                                                            찾기</button>
                                                    </div>
                                                </div>
                                                <div class="gd-4 mb5 pl0 pr0">
                                                    <input type="text" class="full-input" placeholder="주소" readonly
                                                        disabled v-model="ent_info.entAddr" id="ent_addr" />
                                                </div>
                                                <div class="gd-4 pl0 pr0">
                                                    <label for="ent_daddr" class="visually-hidden">상세주소</label>
                                                    <input type="text" class="full-input" placeholder="상세주소"
                                                        v-model="ent_info.entDaddr" id="ent_daddr" autocomplete='off'
                                                        aria-required="true" />
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-lf">
                                            <div class="gd-8 pl0">
                                                <div class="mb16">
                                                    <label for="hmpg_url" class="form-title ">홈페이지</label>
                                                </div>
                                                <input type="text" class="full-input" placeholder="홈페이지를 입력해주세요."
                                                    v-model="ent_info.hmpUrl" id="hmpg_url" autocomplete='off'
                                                    aria-required="true" />
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-lf">
                                            <div class="gd-12 pl0 pr0">
                                                <label for="ent_tel1" class="form-title mb16">대표전화</label>
                                                <div class="flex justify-start no-gutters">
                                                    <div class="gd-2 pl0 pr0">
                                                        <select name="" id="ent_tel1" v-model="ent_tel1"
                                                            class="full-select ml0">
                                                            <option value="null">선택하세요.</option>
                                                            <option value="02">02</option>
                                                            <option value="031">031</option>
                                                            <option value="032">032</option>
                                                            <option value="033">033</option>
                                                            <option value="041">041</option>
                                                            <option value="042">042</option>
                                                            <option value="043">043</option>
                                                            <option value="044">044</option>
                                                            <option value="051">051</option>
                                                            <option value="052">052</option>
                                                            <option value="053">053</option>
                                                            <option value="054">054</option>
                                                            <option value="055">055</option>
                                                            <option value="061">061</option>
                                                            <option value="062">062</option>
                                                            <option value="063">063</option>
                                                            <option value="064">064</option>
                                                            <option value="070">070</option>
                                                        </select>
                                                    </div>
                                                    <div class="pd10">-</div>
                                                    <div class="gd-2 pl0 pr0">
                                                        <label for="ent_tel2" class="visually-hidden">대표전화 두번째자리</label>
                                                        <input type="text" class="full-input" v-model="ent_tel2"
                                                            id="ent_tel2" autocomplete='off' aria-required="true" />
                                                    </div>
                                                    <div class="pd10">-</div>
                                                    <div class="gd-2 pl0 pr0">
                                                        <label for="ent_tel3" class="visually-hidden">대표전화 세번째자리</label>
                                                        <input type="text" class="full-input" v-model="ent_tel3"
                                                            id="ent_tel3" autocomplete='off' aria-required="true" />
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="gd-12 pl0 pr0">
                                                <div class="mb16">
                                                    <span class="form-title ">기업 출원 정보</span>
                                                </div>
                                                <div class="flex align-center mb15">
                                                    <!-- <div class="gd-2 pl0">
                                                        <input type="radio" name="first_info" id="expected" value="expected" v-model="ent_info.ent_se_nm" />
                                                        <label for="expected">출원예정</label>
                                                    </div>
                                                    <div class="gd-2 pl0">
                                                        <input type="radio" name="first_info" id="interest" value="interest" v-model="ent_info.ent_se_nm" />
                                                        <label for="interest">단순 관심</label>
                                                    </div>
                                                    <div class="flex align-center gd-4 pl0">
                                                        <div class="gd-2">
                                                            <input type="radio" name="first_info" id="etc" value="etc" v-model="ent_info.ent_se_nm" />
                                                            <label for="etc">기타</label>
                                                        </div>
                                                    </div> -->
                                                    <div v-for="(item, index) in ctgryCdList" :key="index"
                                                        class="gd-2 pl0" role="group">
                                                        <input type="radio" :name="`first_info_${index}`"
                                                            :id="item.cdId" :value="item.cdId"
                                                            v-model="ent_info.entSeNm" />
                                                        <label :for="item.cdId" class="ml10">{{ item.cdNm }}</label>
                                                    </div>
                                                </div>
                                                <div class="flex align-center mb15">
                                                    <label for="com_info" class="visually-hidden">기업출원추가정보</label>
                                                    <select name="" id="com_info"
                                                        :disabled="ent_info.entSeNm !== 'applPrnmnt'" class="gd-2"
                                                        v-model="ent_info.mainApplEntYn">
                                                        <option value="">선택</option>
                                                        <option value="Y">주 출원사</option>
                                                        <option value="N">보조 출원사</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-lf">
                                            <div class="gd-12 pl0 pr0">
                                                <div class="mb16">
                                                    <p class="form-title ">우리회사 키워드</p>
                                                    <p class="small-text">최소 3개에서 최대 6개를 선택해주세요.</p>
                                                </div>
                                                <div class="keyword-wrap flex justify-start align-center">
                                                    <div v-for="(keyword, index) in keywords" :key="keyword.cdId"
                                                        class="gd-2 mb5">
                                                        <input type="checkbox" :id="`keyword-${keyword.cdId}`"
                                                            :value="keyword.cdId" v-model="ent_info.selectedKeywords"
                                                            class="keyword-label" :disabled="isCheckboxDisabled(index)"
                                                            style="display: none;" />
                                                        <label :for="`keyword-${keyword.cdId}`"
                                                            class="keyword text-ct">#{{ keyword.cdNm }}</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-lf">
                                            <div class="flex justify-start align-center">
                                                <div class="gd-12 pl0 pr0">
                                                    <span class="form-title mb16">기업인증</span>
                                                    <Attachment @emitFiles="emitFiles" :type="'registration'"
                                                        @file-deleted="handleFileDeleted" :text="'사업자등록증명원을 첨부해주세요.'"
                                                        :options="{ allowedExtensions: ['pdf'] }" />
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-lf">
                                            <div class="flex justify-start align-center">
                                                <div class="gd-12 pl0 pr0">
                                                    <div class=" mb16">
                                                        <span class="form-title mb10">기업등록신청서</span>
                                                        <div class="gd-2 pl0 pr0">
                                                            <button class="large-btn blue-border-btn"
                                                                title="기업등록신청서 다운로드"
                                                                @click="$downloadFileByIdNoAuthCheck('FILE_0000000002', 'CMMN_FILE_0000000002', 'AI 디지털교과서 통합지원센터 신규 기업등록신청서(양식).hwp', 'BBS_0000000032')">
                                                                기업등록신청서</button>
                                                        </div>
                                                    </div>
                                                    <Attachment @emitFiles="emitFiles" :type="'applyForm'"
                                                        @file-deleted="handleFileDeleted"
                                                        :text="'작성하신 기업등록 신청서를 첨부해주세요.'"
                                                        :options="{ allowedExtensions: ['pdf'] }" />
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="mt15"
                            v-show="(userActive === 0 && innerStep === 1) || (userActive === 1 && innerStep === 0) && userTypedisable">

                            <div class="flex justify-between align-center btn-zone">
                                <div class="gd-1 pl0 pr0">
                                    <!-- <button class="large-btn darkg-border-btn">이전</button> -->
                                </div>
                                <div class="gd-1 pl0 pr0">
                                    <button class="large-btn blue-btn ml0" title="회원가입"
                                        @click="joinRequest()">회원가입</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <Completed v-show="PageNumber === 4" :type="user_info.authrtId" />
            </div>
        </div>
    </div>
    <!-- 관리자로 회원가입이 된다는 팝업문구 -->
    <div v-if="alert" class="modal-wrapper" role="dialog" aria-modal="true">
        <div :class="{ 'modal-container ': true, 'small-modal': userTypeCheckAlert !== null }">
            <div class="modal-title border-none">
                <div class="flex justify-between align-center">
                    <h2 v-if="userTypeCheckAlert !== null"></h2>
                    <h2 class="page-sub-title" v-else>신규 기업 등록 시 유의 사항</h2>
                    <button class="icon-btn black" @click="modalClose" aria-label="closeButton" id="closeButton"
                        ref="firstFocusableElement" title="닫기">
                        <svg-icon type="mdi" :path="closePath" aria-labelledby="closeButton"></svg-icon>
                    </button>
                </div>
            </div>
            <div class="modal-content-monthly">
                <div v-if="userTypeCheckAlert === '일반회원' || userTypeCheckAlert === '기업회원'">
                    <p class="detail-text text-ct">회원유형을 {{ userTypeCheckAlert }}으로 선택하셨습니다.<br />회원가입 중간에 회원유형 변경은
                        안되며,<br /> 변경을 원하실 경우 가입 처음 단계부터 재시작 하셔야합니다.<br />{{ userTypeCheckAlert }}으로 가입을 하시겠습니까?
                    </p>
                </div>
                <div v-else>
                    <div class="mb30">
                        <h3 class="admin-sec-title  mb10">&lt;기업 등록에 따른 관리자 권한 자동 부여 안내&gt;</h3>
                        <p class="detail-text mb5">최초로 <span>신규 기업 등록</span>을 진행하는 회원은 <strong>기업 관리자</strong>
                            권한으로 자동
                            등록됩니다. </p>
                        <p>&#8251; 기업관리자란? 동일 기업의 '기업회원'에 대한 회원관리 권한을 가진 자</p>
                        <p>&#8251; 기업 관리자는 KERIS가 정보 검토 후 승인되며, 향후 관리자 변경(양도) 시 별도 문의가 필요합니다.
                        </p>
                    </div>
                    <div class="pb30 border-b">
                        <h3 class="admin-sec-title  mb10">기업등록 유의 사항</h3>
                        <p class="detail-text mb10">AI 디지털교과서 통합지원센터는 사업자 등록번호를 보유한 경우 기업 등록이 가능하며,<br /> 사업자
                            등록번호가 없는
                            해외 사업자는 별도 기업 인증 후 가입
                            가능합니다.</p>
                        <div class="terms-table mb10">
                            <table>
                                <thead>
                                    <tr>
                                        <th>가입 대상</th>
                                        <th>기업 등록 구분</th>
                                        <th>제출 서류</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>발행사/개발사</td>
                                        <td>사업자등록번호</td>
                                        <td>사업자등록증명원</td>
                                    </tr>
                                    <tr>
                                        <td>해외 기업</td>
                                        <td>사업자 번호 없음</td>
                                        <td>별도 문의(aidt@keris.or.kr)</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <p>&#8251; 사업자등록증명원은 최근 90일 이내 발급 받은 사업자등록증명원을 첨부해 주시기 바랍니다.<br />(사업자
                            등록증명원은 홈택스를 통해 발급받을 수
                            있습니다.)</p>
                    </div>
                    <div class="flex justify-end align-center new-check-zone">
                        <p class="mr30" style="font-weight: 700;">신규 기업 등록 시 유의 사항 문구를 확인했습니까?</p>
                        <div class="flex justify-start align-center">
                            <label for="noticeCheck" class="block mr5">예</label>
                            <input type="checkbox" name="noticeCheck" id="noticeCheck" v-model="noticeCheck"
                                aria-required="true" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-end flex justify-between align-center pd0">
                <div class="gd-6 pl0">
                    <button @click="modalClose" class="large-btn gray-btn ml0" title="취소">취소</button>
                </div>
                <div class="gd-6 pl0 pr0" v-if="userTypeCheckAlert === '일반회원' || userTypeCheckAlert === '기업회원'">
                    <button class="large-btn blue-btn ml0" title="확인" @click="typedisable">확인</button>
                </div>
                <div class="gd-6 pl0 pr0" v-else>
                    <button class="large-btn blue-btn ml0" title="확인"
                        @click="innerStepForManager(null, 'ROLE_CO_MANAGER', 1, true)">확인</button>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import PageNavigationBar from '../../../component/pagenavigationbar/PageNavigationBar.vue';
import PaginationButton from '../../../component/pagination/PaginationButton.vue';
import COMMON_UTIL from '../../../../resources/js/commonUtil';
import ProgressBar from '../../../component/progressbar/ProgressBar.vue';
import Attachment from '../../../component/file/Attachment.vue';
import Terms from './Terms.vue'
import Completed from './Completed.vue';
import NiceM from '../../../component/nice/NiceM.vue';
import axios from 'axios';
import { useStore } from "vuex";
import { defaultSearchParams } from "../../../../resources/js/defaultSearchParams";
import { toRaw } from 'vue'
import queryParams from '../../../../resources/js/queryParams';
import { mdiWindowClose } from '@mdi/js';
import { entInfoSelectList } from "../../../../resources/api/entInfo";

export default {
    mixins: [queryParams],
    data() {
        return {
            closePath: mdiWindowClose,
            step: ["이용약관 동의", "본인인증", "회원정보 입력", "가입완료 및 승인대기"],
            userType: [{ tabId: 'usertype1', panel: 'panel1', label: "기업회원" }, { tabId: 'usertype2', panel: 'panel2', label: "일반회원" }],
            userActive: null,
            businessNumberCheckResult: false,
            businessNumber: null,
            zonecode: null,
            roadAddress: null,
            // keywords: ['#수학', '#영어', '#정보', '#초등', '#중등', '#고등', '#AI튜터', '#블록코딩', '#패턴인식', '#대시보드', '#학습분석', '#보편적학습설계', '#클라우드', '#AI보조교사', '#음성인식', '#학습맵', '#맞춤형콘텐츠'],
            keywords: [],
            PageNumber: 1,
            innerStep: 0,
            alert: false,
            userTypeCheckAlert: null,
            userTypedisable: false,
            noticeCheck: false,
            lastFocusedElement: null,// 이전 포커스 요소 저장
            /**
             * 페이지네이션 변경 
             * 
            */
            // 검색 정보 담는 객체
            search: { ...defaultSearchParams },
            pagination: {},

            //기업목록 조회 조건
            companyListSearch: {
                currentPage: 1,
                pageSize: 5,
                searchType: 'name',
                searchText: null,
            },

            //기업목록
            companyList: [],
            companyListCount: 0,
            logoPreview: null,

            //기업상세
            ent_info: {
                entId: null,
                brno: null,
                entNm: null,
                entChcCnt: null,
                entMtchCnt: null,
                inqCnt: null,
                entIntrdSmryCn: null,
                zip: null,
                entAddr: null,
                entDaddr: null,
                hmpUrl: null,
                entTelno: null,
                stdgCd: null,
                fileMngId: null,
                aprvAplySttsCd: null,
                autzrId: null,
                aprvDt: null,
                rjctCn: null,
                rtrnrId: null,
                rjctDt: null,
                frstRegDt: null,
                selectedKeywords: [],
                isEntRegist: false,
                entSeNm: null,
                mainApplEntYn: ''
            },
            //유저상세
            user_info: {
                lgnId: null,
                mbrEncptPswd: null,
                user_pw_check: null,
                mbrEncptFlnm: null,
                mbrJbgdNm: null, //회원직급명
                mbrEncptTelno: null,
                mbrEncptEmad: null,
                authrtId: null,
                neisPridtfCd: null,
                //구독여부
                rcptnAgreYn: false,
                //개인정보 활용 동의(선택)
                prvcRlsYn: false,

            },
            //사용자 전화번호 3자리
            user_tel1: null,
            user_tel2: null,
            user_tel3: null,
            //기업 전화번호 3자리
            ent_tel1: null,
            ent_tel2: null,
            ent_tel3: null,

            //이메일
            email_id: null,
            email_dns: null,
            select_email_dns: null,

            //재직증명서
            employmentCertificate: null,
            //사업자등록증
            businessRegistration: null,
            //기업신청양식
            businessApllicationForm: null,
            //회사소개서
            companyProfile: null,
            //아이디 중복검사
            idCheck_boolean: false,
            //이메일 중복검사
            emlCheck_boolean: false,
            //사업자등록번호 중복검사
            brnoCheck_boolean: false,
            //파일
            file: new FormData(),
            //로고파일
            logoFile: {},
            store: useStore(),
            ctgryCdList: [],

        }
    },
    methods: {
        // 개인정보 수집 이용 동의(선택) 을 포함한 화면 스테이터스 변경
        pageStatusWithAgree(num, prvcRlsYn) {
            this.PageNumber = num
            this.user_info.prvcRlsYn = prvcRlsYn === true ? true : false;
        },

        getScrollPosition: function () {
            if (window.innerWidth < 768) {
                return 1400;
            } else if (window.innerWidth >= 768 && window.innerWidth < 1200) {
                return 1400;
            } else {
                return 747;
            }
        },

        // 화면 스테이터스 변경 
        pageStatus(num) {
            this.PageNumber = num;
        },
        // 내부 스텝 
        innerStepGo: function (companyOne, authrtId, num) {
            if (companyOne !== null) {
                this.ent_info.entId = companyOne.entId;
            }
            this.user_info.authrtId = authrtId;
            this.alert = false
            this.innerStep = num;
            this.$nextTick(() => {
                this.$refs.form.scrollIntoView({ behavior: 'smooth' });
            });
        },


        // 관리자를 위한 내부스텝
        innerStepForManager: function (companyOne, authrtId, num, type) {
            if (companyOne !== null) {
                this.ent_info.entId = companyOne.entId;
            } else if (companyOne === null) {
                if (!this.noticeCheck) {
                    alert('유의 사항 문구 확인에 체크를 하셔야 다음 단계로 넘어갈 수 있습니다.')
                    return
                }
            }
            this.ent_info.isEntRegist = type;
            this.user_info.authrtId = authrtId;
            this.alert = false
            this.innerStep = num;
            this.$nextTick(() => {
                this.$refs.form.scrollIntoView({ behavior: 'smooth' });
            });
        },

        // 모달확인
        alertModalOpen: function () {
            this.userTypeCheckAlert = null;
            this.alert = true;
        },
        modalClose: function () {
            this.noticeCheck = false;
            this.alert = false;
        },

        userTypeActive: function (index, uerType) {
            this.lastFocusedElement = document.activeElement; // 이전 포커스 요소 저장
            this.userTypeCheckAlert = uerType;
            this.alert = true;
            this.userActive = index
            if (index === 1) {
                this.user_info.authrtId = 'ROLE_USER'
            }
            this.$nextTick(() => {
                // 모달이 열린 후 첫 번째 포커스 가능한 요소로 이동
                if (this.$refs.firstFocusableElement) {
                    this.$refs.firstFocusableElement.focus();
                }
            });
        },
        typedisable: function () {
            this.userTypedisable = true;
            this.alert = false;
            this.$nextTick(() => {
                document.getElementById(this.userType[this.userActive].panel).focus();
            });
        },
        //DAUM 주소 API 주소검색
        openPostcode: function () {

            // this.ent_info.zip = '38541'; //우편코드
            // this.ent_info.ent_addr ='경북 경산시 대학로 280'; //주소코드
            // this.ent_info.ent_daddr = '영남대학교 창업보육센터 신관 217호'
            // this.ent_info.stdg_cd = '4729011500' //법정동코드4


            let width = 500; //팝업의 너비
            let height = 600; //팝업의 높이
            new daum.Postcode({
                oncomplete: (data) => {
                    width: width;
                    height: height;
                    this.ent_info.zip = data.zonecode; //우편코드
                    this.ent_info.entAddr = data.roadAddress; //주소코드
                    this.ent_info.stdgCd = data.bcode //법정동코드
                },
            }).open({
                left: (window.screen.width / 2) - (width / 2),
                top: (window.screen.height / 2) - (height / 2)
            });
        },
        isCheckboxDisabled(index) {
            // // 선택 가능한 체크박스 개수를 6개로 제한 
            let isSelected = this.ent_info.selectedKeywords.includes(this.keywords[index].cdId);
            return this.ent_info.selectedKeywords.length >= 6 && !isSelected;
        },

        // NICE 인증 결과 확인
        requestEvent: async function (eventType, niceObj) {
            const vm = this;
            // alert(eventType)
            // 턴값 반환 있음 
            if (eventType == 'request') {
                // niceObj.sErrorCode   빈값일때 정상 반환 
                // niceObj.sMobileNo    폰번호 
                // niceObj.sName        이름 
                // niceObj.sBirthDate   생년원일(14세 미만은 가입 불가)
                // niceObj.sDupInfo     중복확인값(개인 고유 번호64Byte)             

                // 반환값이 있는 경우 만 14세 검사
                if (!vm.checkAgeUnderFourteen(niceObj.sBirthDate)) {
                    alert("만 14세 이하는 가입할 수 없습니다. 메인페이지로 이동합니다.");
                    vm.$router.push({ path: '/' });
                    return;
                }

                const res = await vm.isNiceDuplicated(niceObj.sDupInfo)
                if (!res.data.success) {
                    alert("이미 가입이 완료된 회원입니다. 로그인 페이지로 이동합니다")
                    vm.$router.push({ path: '/login.page' })
                    return
                }

                vm.user_info.mbrEncptFlnm = niceObj.sName;
                if (niceObj.sMobileNo && niceObj.sMobileNo.length === 11) {
                    vm.user_tel1 = niceObj.sMobileNo.substring(0, 3);
                    vm.user_tel2 = niceObj.sMobileNo.substring(3, 7);
                    vm.user_tel3 = niceObj.sMobileNo.substring(7, 11);
                }
                vm.user_info.neisPridtfCd = niceObj.sDupInfo
                // this.innerStep = 3;
                this.PageNumber = 3;
                this.companySelectList();

            } else {
                // 윈도우 Close 처리
                //this.innerStep = 2;
            }
        },

        //본인인증 중복 검사
        isNiceDuplicated: async function (sDupInfo) {
            const vm = this;

            try {
                const response = await axios({
                    url: "/mbr/nice.json",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json;",
                    },
                    data: { 'neisPridtfCd': sDupInfo }
                });
                return response;
            } catch (error) {
                alert("본인인증 중복검사 오류, 다시 시도해주세요.");
            }
        },

        //만14세 이하 여부 확인
        checkAgeUnderFourteen: function (birthDateString) {
            const birthDate = new Date(birthDateString.substring(0, 4), birthDateString.substring(4, 6) - 1, birthDateString.substring(6, 8));
            const today = new Date();
            const fourteenYearLater = new Date(birthDate.getFullYear() + 14, birthDate.getMonth(), birthDate.getDate());
            return fourteenYearLater < today;
        },

        // //기업 목록 조회
        companySelectList: function () {
            const vm = this;
            this.search.searchFilter = 'join'
            axios({
                url: "/cmmn/ent/entInfoSelectList.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json;",
                },
                data: vm.search
            }).then(function (res) {
                vm.companyList = res.data.data.list;
                vm.search = res.data.data.pagination;
                vm.pagination = res.data.data.pagination;

            }).catch(function (error) {
                alert("기업목록 조회 오류, 다시 시도해주세요.")
            });
        },


        //기업 목록 검색
        companySelectListSearch: function () {
            this.search.currentPage = 1;
            this.companySelectList()
        },



        //아이디 중복여부 검사
        userIdDuplicationCheck: function () {
            const vm = this;
            //유효성검사
            let userIdRegex = /^[a-z0-9_-]{5,20}$/;
            if (!userIdRegex.test(vm.user_info.lgnId)) {
                alert('아이디는 5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.')
                document.getElementById("panel2").focus();
                return false;
            }

            axios({
                url: '/mbr/findByCheckLoginId.json',
                method: 'post',
                headers: {
                    'Content-Type': "application/json;",
                },
                data: vm.user_info
            }).then(function (res) {
                if (res.status == 200) {
                    alert(res.data.message)
                    vm.idCheck_boolean = true;
                }
            })
                .catch(function (error) {
                    alert(error.response.data.message);
                    vm.idCheck_boolean = false;
                });
        },

        //이메일 유효성 검사
        emailValidationCheck: function () {
            this.email_id = this.email_id ? this.email_id.trim() : null
            this.email_dns = this.email_dns ? this.email_dns.trim() : null
            this.user_info.mbrEncptEmad = this.email_id + '@' + this.email_dns;
            if (!COMMON_UTIL.checkEmail(this.user_info.mbrEncptEmad)) {
                alert("유효하지 않은 이메일입니다.");
                document.getElementById("email_id").focus();
                return false;
            }

            return true;
        },

        //이메일 중복검사
        emailDuplicateCheck: function () {
            const vm = this;

            if (!vm.emailValidationCheck()) return;

            let data = {
                "mbrEncptEmad": vm.email_id + '@' + vm.email_dns
            }

            axios({
                url: '/mbr/findByCheckEmail.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json;',
                },
                data: data
            }).then(function (res) {
                if (res.status == 200) {
                    alert(res.data.message)
                    vm.emlCheck_boolean = true;
                }
            }).catch(function (error) {
                alert(error.response.data.message);
                vm.emlCheck_boolean = false;
            });
        },

        //사업자등록번호 중복검사
        brnoDuplicateCheck: function () {
            const vm = this;
            axios({
                url: '/cmmn/ent/isBrnoCheck.json',
                method: 'post',
                headers: {
                    'Content-Type': "application/json;",
                },
                data: vm.ent_info
            }).then(function (res) {
                if (res.status == 200) {
                    alert(res.data.message)
                    vm.brnoCheck_boolean = true;
                }
            }).catch(function (error) {
                alert(error.response.data.message);
                vm.brnoCheck_boolean = false;
            });
        },

        // 사업자등록번호 유효성 검사
        checkBusinessId: function () {
            let brnoRegex = /^\d{10}$/;
            if (!brnoRegex.test(this.ent_info.brno)) {
                alert('사업자등록번호는 10자리의 숫자만 입력할 수 있습니다.')
                document.getElementById("brno").focus();
                return;
            }

            // this.brnoDuplicateCheck();

            let serviceKey = "tv%2BMQ3E5HDTJC%2FIesanH6vabhvAikzVV3P5%2F5UhoEuCTMWjNnWhPy36jCpn13qPP5tmN%2Fx2eEg0WAK73VZv5tA%3D%3D"
            axios({
                url: "https://api.odcloud.kr/api/nts-businessman/v1/status?serviceKey=" + serviceKey,
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json"
                },
                data: { "b_no": [this.ent_info.brno] },
            }).then(response => {
                if (response.data.match_cnt > 0) {
                    this.brnoDuplicateCheck();
                } else {
                    alert('유효하지 않은 사업자 번호입니다.')
                }
            }).catch(error => {
                alert('API 요청에 실패하였습니다.')
            });

        },

        //파일목록 받아오기
        emitFiles: function (files) {
            this.file.append(files.type, files.filelist[0])
        },

        //회원가입
        joinRequest: function () {
            const vm = this;

            //1. 권한별 유효성 검사
            if (!vm.validationByAuth()) return;

            //임시
            // vm.user_info.neisPridtfCd = "1234567890";

            const requestFormData = new FormData();
            if (vm.file !== null) {
                for (const key of vm.file.keys()) {
                    requestFormData.append(key, vm.file.get(key));
                }
            }

            requestFormData.append("user_info", JSON.stringify(vm.user_info));
            if (vm.user_info.authrtId !== 'ROLE_USER') {
                requestFormData.append("ent_info", JSON.stringify(vm.ent_info));
            }

            if (vm.user_info.authrtId === 'ROLE_CO_MANAGER') {
                requestFormData.append('logo', vm.logoFile);
            }

            this.$setLoading(true);
            axios({
                // url: '/user/userInsert.file',
                url: '/mbr/joinProc.file',
                method: 'post',
                headers: {
                    'Content-Type': 'multipart/form-data; charset=UTF-8',
                },
                data: requestFormData
            }).then(function (response) {
                if (response.status === 200) {
                    vm.pageStatus(4)
                }
            }).catch(function (error) {
                alert('회원등록 오류, 관리자에게 문의 해주세요.');
            }).finally(function () {
                vm.$setLoading(false);
            });

        },


        //일반회원 유효성 검사
        commonUserValidation: function () {
            //1.아이디
            //1-1.null검사
            this.user_info.lgnId = this.user_info.lgnId ? this.user_info.lgnId.trim() : null;
            if (!this.user_info.lgnId) {
                alert('ID를 입력해주세요.');
                document.getElementById("panel2").focus()
                return false;
            }
            //1-2.5~20자의 영문 소문자, 숫자, 특수기호 _ - 
            if (!COMMON_UTIL.idCheck(this.user_info.lgnId)) {
                alert('아이디는 5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.')
                document.getElementById("panel2").focus()
                return false;
            }
            //1-3.아이디 중복검사
            if (!this.idCheck_boolean) {
                alert("ID 중복검사를 완료해주세요.")
                document.getElementById("panel2").focus()
                return false;
            }
            //2.비밀번호 정규식
            let passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{6,20}$/;
            if (!passwordRegex.test(this.user_info.mbrEncptPswd)) {
                alert('비밀번호는 영문, 숫자, 특수문자 조합된 6~20자리 조합만 가능합니다.');
                document.getElementById("user_pw").focus()
                return false;
            }
            //2-1. 비밀번호와 동일한지 확인
            if (this.user_info.mbrEncptPswd !== this.user_info.user_pw_check) {
                alert('비밀번호가 일치하지 않습니다.')
                document.getElementById("user_pw_check").focus()
                return false;
            }
            //4.이름 
            this.user_info.mbrEncptFlnm = this.user_info.mbrEncptFlnm ? this.user_info.mbrEncptFlnm.trim() : null
            if (!COMMON_UTIL.checkName(this.user_info.mbrEncptFlnm)) {
                alert('유효하지 않은 이름입니다.')
                document.getElementById("user_nm").focus()
                return false;
            }

            //5.전화번호
            let tel1Regex = /^\d{2,3}$/;
            let tel2Regex = /^\d{3,4}$/;
            let tel3Regex = /^\d{4}$/;
            this.user_tel1 = this.user_tel1 ? this.user_tel1.trim() : null;
            this.user_tel2 = this.user_tel2 ? this.user_tel2.trim() : null;
            this.user_tel3 = this.user_tel3 ? this.user_tel3.trim() : null;

            if (!tel1Regex.test(this.user_tel1)) {
                alert("첫 번째 번호는 2~3자리 숫자여야 합니다.");
                document.getElementById("user_tel1").focus();
                return false;
            }

            if (!tel2Regex.test(this.user_tel2)) {
                alert("두 번째 번호는 3~4자리 숫자여야 합니다.");
                document.getElementById("user_tel2").focus();
                return false;
            }

            if (!tel3Regex.test(this.user_tel3)) {
                alert("세 번째 번호는 4자리 숫자여야 합니다.");
                document.getElementById("user_tel3").focus();
                return false;
            }

            //전화검증완료시 저장
            this.user_info.mbrEncptTelno = this.user_tel1 + this.user_tel2 + this.user_tel3;

            //6.이메일 중복검사
            if (!this.emlCheck_boolean) {
                alert("이메일 중복검사를 완료해주세요.");
                document.getElementById("email_id").focus();
                return false;
            }
            //7. 이메일 유효성검사
            this.email_id = this.email_id ? this.email_id.trim() : null
            this.email_dns = this.email_dns ? this.email_dns.trim() : null
            this.user_info.mbrEncptEmad = this.email_id + '@' + this.email_dns;
            if (!COMMON_UTIL.checkEmail(this.user_info.mbrEncptEmad)) {
                alert("유효하지 않은 이메일입니다.");
                document.getElementById("email_id").focus();
                return false;
            }

            return true;
        },
        //2. 기업회원 유효성 검사
        companyUserValidation: function () {
            //직급이 있는경우 길이 검사

            if (this.user_info.mbrJbgdNm) {
                this.user_info.mbrJbgdNm = this.user_info.mbrJbgdNm.trim()
                if (this.user_info.mbrJbgdNm.length > 30) {
                    alert("직급은 30자를 초과할 수 없습니다.");
                    return false;
                }
            }
            //재직 증명서
            if (!this.file.has("certification")) {
                alert("재직증명서를 첨부해주세요.");
                return false;
            }
            return true;
        },
        //3. 기업관리자 유효성 검사
        companyManagerValidation: function () {
            //기업로고 
            if (this.logoFile.size === undefined) {
                alert('회사로고 파일 등록은 필수입니다.')
                return false;
            }
            //기업명
            this.ent_info.entNm = this.ent_info.entNm ? this.ent_info.entNm.trim() : null
            if (!this.ent_info.entNm) {
                alert("기업명을 입력해주세요.");
                document.getElementById("ent_nm").focus();
                return false;
            }
            let entNameRegex = /^[가-힣A-Za-z0-9\s()]{2,50}$/;
            if (!entNameRegex.test(this.ent_info.entNm)) {
                alert("유효하지 않은 기업명입니다.");
                document.getElementById("ent_nm").focus();
                return false;
            }
            //사업자등록번호
            if (!COMMON_UTIL.businessNumber(this.ent_info.brno)) {
                alert("유효하지 않은 사업자등록번호입니다.");
                document.getElementById("brno").focus();
                return false;
            }
            //사업자등록번호 중복검사
            if (!this.brnoCheck_boolean) {
                alert("사업자등록번호 중복검사는 필수입니다.");
                document.getElementById("brno").focus();
                return false;
            }
            //주소
            if (!this.ent_info.entAddr) {
                alert("주소입력은 필수입니다.");
                document.getElementById("ent_addr").focus();
                return false;
            }
            //상세주소 유효성검사
            this.ent_info.entDaddr = this.ent_info.entDaddr ? this.ent_info.entDaddr.trim() : null

            if (!this.ent_info.entDaddr) {
                alert("상세주소를 입력해주세요.");
                document.getElementById("ent_daddr").focus();
                return false;
            }

            var entAddrRegex = /^[가-힣A-Za-z0-9\s\-\/]{1,100}$/;
            if (!entAddrRegex.test(this.ent_info.entDaddr)) {
                alert("유효하지 않은 상세주소입니다.");
                document.getElementById("ent_daddr").focus();
                return false;
            }
            //홈페이지
            this.ent_info.hmpUrl = this.ent_info.hmpUrl ? this.ent_info.hmpUrl.trim() : null
            if (!this.ent_info.hmpUrl) {
                alert("홈페이지 주소를 입력해주세요.");
                document.getElementById("hmpg_url").focus();
                return false;
            }
            if (this.ent_info.hmpUrl.length > 200) {
                alert("홈페이지 주소는 200자까지 입력가능합니다.");
                document.getElementById("hmpg_url").focus();
                return false;
            }
            //홈페이지의 기본적인 유효성 검사
            // let urlRegex = /^(www\.)?([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$/;
            let urlRegex = /^(https?:\/\/)?([\w\d-]+\.)+[\w\d-]{2,}(\/[\w\d-./?%&=]*)?$/i
            if (!urlRegex.test(this.ent_info.hmpUrl)) {
                alert("유효하지 않은 홈페이지 주소입니다.");
                document.getElementById("hmpg_url").focus();
                return false;
            }

            //대표전화 유효성 검사
            let tel1Regex = /^\d{2,3}$/;
            let tel2Regex = /^\d{3,4}$/;
            let tel3Regex = /^\d{4}$/;
            this.ent_tel1 = this.ent_tel1 ? this.ent_tel1.trim() : null
            this.ent_tel2 = this.ent_tel2 ? this.ent_tel2.trim() : null
            this.ent_tel3 = this.ent_tel3 ? this.ent_tel3.trim() : null
            //대표전화 null검사
            if ((this.ent_tel1 == null) || (this.ent_tel2 == null) || (this.ent_tel3 == null)) {
                alert("대표전화 번호를 입력해주세요.");

                // 각각의 경우에 맞는 포커스 지정
                if (this.ent_tel1 == null) {
                    document.getElementById("ent_tel1").focus();
                } else if (this.ent_tel2 == null) {
                    document.getElementById("ent_tel2").focus();
                } else if (this.ent_tel3 == null) {
                    document.getElementById("ent_tel3").focus();
                }
                return false;
            }


            if (!tel1Regex.test(this.ent_tel1)) {
                alert("첫 번째 번호는 2~3자리 숫자여야 합니다.");
                document.getElementById("ent_tel1").focus();
                return false;
            }

            if (!tel2Regex.test(this.ent_tel2)) {
                alert("두 번째 번호는 3~4자리 숫자여야 합니다.");
                document.getElementById("ent_tel2").focus();
                return false;
            }

            if (!tel3Regex.test(this.ent_tel3)) {
                alert("세 번째 번호는 4자리 숫자여야 합니다.");
                document.getElementById("ent_tel3").focus();
                return false;
            }

            //대표전화검증완료시 저장
            this.ent_info.entTelno = this.ent_tel1 + this.ent_tel2 + this.ent_tel3;

            //기업 출원 정보 확인
            if (!this.ent_info.entSeNm) {
                alert("기업 출원 정보를 입력해주세요.")
                return false;
            }

            //출원 예정을 선택 시 주출원사여부 검사
            if (this.ent_info.entSeNm === 'applPrnmnt') {
                if (!this.ent_info.mainApplEntYn) {
                    alert("출원사 유형을 선택해주세요.")
                    return false;
                }
            } else {
                this.ent_info.mainApplEntYn = null
            }

            //키워드 검사
            if (this.ent_info.selectedKeywords.length !== 0) {
                if (this.ent_info.selectedKeywords.length < 3) {
                    alert("키워드를 선택 시 최소 3개를 선택하셔야 합니다.");
                    return false;
                }
            }

            //사업자증명원 첨부파일
            if (!this.file.has("registration")) {
                alert("사업자증명원를 첨부해주세요.");
                return false;
            }
            //기업신청양식 첨부파일
            if (!this.file.has("applyForm")) {
                alert("기업등록신청서가 업로드 되지 않았습니다.");
                return false;
            }

            return true;
        },
        //권한별 유효성 검사
        validationByAuth: function () {
            let auth = this.user_info.authrtId;

            //일반회원 유효성검사
            if (!this.commonUserValidation()) return false;

            //기업회원 유효성검사
            if (auth === 'ROLE_CO_USER' || auth === 'ROLE_CO_MANAGER') {
                if (!this.companyUserValidation()) return false;
            }
            //기업관리자 유효성검사
            if (auth === 'ROLE_CO_MANAGER' && this.ent_info.isEntRegist === true) {
                if (!this.companyManagerValidation()) return false;
            }

            return true;
        },
        //이미지 업로드 및 미리보기
        logoUpload: function (event) {
            const vm = this;

            const allowedExtensions = ['jpg', 'jpeg', 'png'];
            const files = event.target.files;
            const MAX_WIDTH = 340;
            const MAX_HEIGHT = 120;

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const fileExtension = this.getExtension(file.name).toLowerCase();

                if (allowedExtensions.includes(fileExtension)) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = new Image();
                        img.src = reader.result;
                        img.onload = function () {
                            // 이미지의 실제 크기 확인
                            var width = img.width;
                            var height = img.height;
                            // 정해진 크기보다 큰 경우 경고창 표시
                            if (width > MAX_WIDTH || height > MAX_HEIGHT) {
                                alert("로고 이미지 크기는 최대 " + MAX_WIDTH + "x" + MAX_HEIGHT + "입니다.");
                                vm.$refs.logoImg.value = '';
                            } else {
                                vm.logoPreview = reader.result;
                                vm.logoFile = file;
                            }
                        };
                    };
                    reader.readAsDataURL(file);
                } else {
                    // 허용되지 않는 확장자인 경우 경고 메시지 표시 등의 처리
                    alert(`${file.name}은 허용되지 않는 파일 형식입니다.`);
                }
            }

        },
        getExtension(filename) {
            const lastIndex = filename.lastIndexOf('.');
            return filename.substring(lastIndex + 1);
        },

        handleFileDeleted(deletedFileKey) {
            let newFormData = new FormData;
            for (let [key, value] of this.file.entries()) {
                if (key !== deletedFileKey) {
                    newFormData.append(key, value);
                }
            }

            // 새로운 FormData 객체로 업데이트
            this.file = newFormData;
        },

        //회원가입 메뉴얼 다운로드
        async downloadJoinManual() {
            const file = {
                'fileId': 'FILE_0000000407',
                'fileNm': '회원가입 메뉴얼',
                'extnNm': 'pdf',
            }

            await this.$downloadFileNoAuthCheck(file);
        },

        //기업등록신청서 다운로드
        async downloadApplyForm() {
            const file = {
                'fileId': 'FILE_0000000408',
                'fileNm': '기업등록신청서',
                'extnNm': 'pdf',
            }

            await this.$downloadFileNoAuthCheck(file);
        },

        //기업출원 카테고리코드
        async findAllCtgry() {
            this.ctgryCdList = await this.$getCommonCode('entApplCtgryCd');
        },
    },

    watch: {
        "user_info.lgnId": function () {
            this.idCheck_boolean = false;
        },
        "ent_info.selectedKeywords": function (newValue, oldValue) {
        },
        "select_email_dns": function () {
            this.email_dns = this.select_email_dns;
        },
        "email_dns": function () {
            this.emlCheck_boolean = false;
        },
        "email_id": function () {
            this.emlCheck_boolean = false;
        },
        "ent_info.brno": function () {
            this.brnoCheck_boolean = false;
        },
    },
    computed: {

    },
    components: {
        'PageNavigationBar': PageNavigationBar,
        'ProgressBar': ProgressBar,
        'Attachment': Attachment,
        'Terms': Terms,
        'Completed': Completed,
        'NiceM': NiceM,
        'PaginationButton': PaginationButton,
    },
    created() {
        const vm = this;
        axios({
            url: "/ent/keyword.json",
            method: "post",
            headers: {
                "Content-Type": "application/json",
            },
        }).then(function (res) {
            vm.keywords = res.data.data
        }).catch(function (error) {
            alert("키워드 조회 오류, 관리자에게 문의해주세요.")
        });
    },
    mounted() {
        this.findAllCtgry()
        if (this.search.searchType == '') {
            this.search.searchType = 'name';
        }
    }
}
</script>
