<template>
    <div class="pt100 pb100">
        <div class="w1280">
            <div class="selectlist-zone mb30">
                <div class="mb30">
                    <div class="mb15">
                        <h2 class="page-sub-title">회사 검색</h2>
                    </div>
                    <div class="apply-search flex justify-between align-center no-gutters">
                        <div class="autocomplete gd-6">
                            <div class="company-search gd-12 pd0">
                                <input type="text" class="full-input" v-model="search.searchText" autocomplete="off"
                                    placeholder="기업명을 검색해주세요." @keyup.enter="companySelectListSearch()" />
                                <button class="icon-btn search-btn" aria-label="searchButton"  title="검색"  id="searchButton" @click="companySelectListSearch()"> <svg-icon
                                        type="mdi" :path="searchPath" role="img"  aria-labelledby="searchButton"></svg-icon></button>
                            </div>
                            <ul v-if="filteredResults.length" class="company-list">
                                <li v-for="result in filteredResults" :key="result.CUSTCD"
                                    @click="selectResult(result)">
                                    {{ result.JSNAME }}
                                </li>
                            </ul>
                        </div>
                        <div class="btn-zone gd-6 flex justify-end align-center">
                            <div class="gd-3 pr0">
                                <button class="large-btn blue-border-btn ml0"  title="기업신규신청"  @click="alertModalOpen">기업신규신청</button>
                            </div>
                        </div>
                    </div>
                    <!-- 검색 버튼 누르면 나오는 기업명 -->
                    <div class="pt30 pb30">
                        <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 class="text-ct">{{ $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="innerStepGo(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 v-model:currentPage="companyListSearch.currentPage"
                            :perPage="companyListSearch.perPage" :totalCount="companyListCount" :maxRange="5"
                            :click="companySelectList" /> -->
                            <PaginationButton :className="'admin-pagination'" v-model:currentPage="search.currentPage"
                                :pagination="pagination" :click="fnViewList" />
                        </div>
                    </div>
                </div>
                <div class="border pd30 mb30" v-show="formShow" ref="form">
                    <div>
                        <h2 class="page-sub-title mb30">{{ ent_info.entNm }} {{ user_info.authrtId === 'ROLE_CO_USER'
                            ? '기업회원신청' : '기업관리자신청' }}</h2>
                        <div>
                            <div class="flex justify-between align-center  border-b mb30">
                                <div class="content-border-title">
                                    <h3>회원추가정보</h3>
                                </div>
                                <p><span class="red-text">*</span>필수사항 입니다.</p>
                            </div>
                            <div class="form-table-style">
                                <table class="form-table">
                                    <tr>
                                        <td class="text-lf">
                                            <div class="gd-6 pl0 pr0 mb30">
                                                <div class="mb15">
                                                    <label for="rank" class="fw-bold ">직위(직급)</label>
                                                </div>
                                                <input type="text" class="full-input" id="rank" placeholder="직급을 입력하세요."
                                                    v-model="user_info.mbrJbgdNm" autocomplete="off" />
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-lf">
                                            <div class="mb16">
                                                <label for="" class="form-title">재직증명서</label>
                                                <p class="detail-text red-text">※ 재직증명서 내 주민등록번호를 반드시 마스킹하여 업로드 해야
                                                    합니다.</p>
                                            </div>
                                            <Attachment :text="'재직증명서 파일을 첨부해주세요.'" @emitFiles="emitFiles"
                                                @file-deleted="handleFileDeleted" :type="'certification'"
                                                :options="{ allowedExtensions: ['pdf'] }" />
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div v-show="ent_info.isEntRegist === true">
                            <div class="flex justify-between align-center  border-b mb30">
                                <div class="content-border-title">
                                    <h3>기업정보</h3>
                                </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">
                                                    <label for="logoZone" class="form-title ">기업로고</label>
                                                </div>
                                                <div class="gd-6 pl0 mb10">
                                                    <div class="logo-zone border flex justify-center radius" id="logoZone">
                                                        <img v-if="logoPreview" :src="logoPreview" class="inline" />
                                                        <p v-else class="text-ct detail-bold">Logo</p>
                                                    </div>
                                                </div>
                                                <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" />
                                                </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" />
                                                    </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>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="우편번호"
                                                            disabled v-model="ent_info.zip" />
                                                    </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="주소" disabled
                                                        v-model="ent_info.entAddr" id="ent_addr" />
                                                </div>
                                                <div class="gd-4 pl0 pr0">
                                                    <input type="text" class="full-input" placeholder="상세주소"
                                                        v-model="ent_info.entDaddr" id="ent_daddr" autocomplete="off" />
                                                </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" />
                                            </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">
                                                        <input type="text" class="full-input" v-model="ent_tel2" id="ent_tel2"
                                                            autocomplete="off" />
                                                    </div>
                                                    <div class="pd10">-</div>
                                                    <div class="gd-2 pl0 pr0">
                                                        <input type="text" class="full-input" v-model="ent_tel3" id="ent_tel3"
                                                            autocomplete="off" />
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="gd-12 pl0 pr0">
                                                <div class="mb16">
                                                    <label for="CorporateApplication" class="form-title ">기업 출원 정보</label>
                                                </div>
                                                <div class="flex align-center mb15" id="CorporateApplication">
                                                    <div v-for="(item, index) in ctgryCdList" :key="index"
                                                        class="gd-2 pl0">
                                                        <input type="radio" :name="`first_info_${index}`"
                                                            :id="item.cdId" :value="item.cdId"
                                                            v-model="ent_info.entSeNm" />
                                                        <label :for="item.cdId">{{ item.cdNm }}</label>
                                                    </div>
                                                </div>
                                                <div class="flex align-center mb15">
                                                    <select name="" id="" :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">
                                                    <label for="keyword" class="fw-bold ">우리회사 키워드</label>
                                                    <p>최소 3개에서 최대 6개를 선택해주세요.</p>
                                                </div>
                                                <div class="keyword-wrap flex justify-start align-center" id="keyword">

                                                    <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">
                                                    <label for="file" class="form-title mb16">사업자증명원 첨부파일</label>
                                                    <Attachment @emitFiles="emitFiles" :type="'registration'"
                                                        @file-deleted="handleFileDeleted" :text="'사업자등록증명원을 첨부해주세요.'"
                                                        :options="{ allowedExtensions: ['pdf'] }" id="file"/>
                                                </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">
                                                        <label for="file2" class="form-title mb10">기업등록신청서</label>
                                                        <div class="gd-2 pl0 pr0">
                                                            <button class="large-btn blue-border-btn"  title="기업등록신청서 다운로드"   @click="$downloadFileByIdNoAuthCheck('FILE_0000000002', 'CMMN_FILE_0000000002', 'AI 디지털교과서 통합지원센터 신규 기업등록신청서(양식).pdf', 'BBS_0000000032')">기업등록신청서</button>
                                                        </div>
                                                    </div>
                                                    <Attachment @emitFiles="emitFiles" :type="'applyForm'"
                                                        @file-deleted="handleFileDeleted"
                                                        :text="'작성하신 기업등록 신청서를 첨부해주세요.'"
                                                        :options="{ allowedExtensions: ['pdf'] }" />
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btn-zone flex justify-end align-center" v-show="formShow">
                    <div class="gd-1 pr0 pl0" v-if="ent_info.isEntRegist === true">
                        <button class="large-btn blue-btn ml0" title="신청"  @click="joinRequest()">신청</button>
                    </div>
                    <div class="gd-1 pr0 pl0" v-if="ent_info.isEntRegist === false">
                        <button class="large-btn blue-btn ml0" title="신청"  @click="entjoinRequest()">신청</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 관리자로 회원가입이 된다는 팝업문구 -->
    <div v-show="alert" class="modal-wrapper" role="dialog" 
    aria-modal="true">
        <div class='modal-container'>
            <div class="modal-title">
                <div class="flex justify-between align-center">
                    <h2 class="page-sub-title">신규 기업 등록 시 유의 사항</h2>
                    <button class="icon-btn black" aria-label="closeButton" id="closeButton" @click="modalClose" title="닫기">
                        <svg-icon type="mdi" :path="closePath" role="img"  aria-labelledby="closeButton"></svg-icon>
                    </button>
                </div>
            </div>
            <div class="modal-content-monthly">
                <div>
                    <div class="mb30">
                        <p class="admin-sec-title  mb10">&lt;기업 등록에 따른 관리자 권한 자동 부여 안내&gt;</p>
                        <p class="detail-text mb5">최초로 <span>신규 기업 등록</span>을 진행하는 회원은 <strong>기업 관리자</strong>
                            권한으로 자동
                            등록됩니다. </p>
                        <p>&#8251; 기업관리자란? 동일 기업의 '기업회원'에 대한 회원관리 권한을 가진 자</p>
                        <p>&#8251; 기업 관리자는 KERIS가 정보 검토 후 승인되며, 향후 관리자 변경(양도) 시 별도 문의가 필요합니다.
                        </p>
                    </div>
                    <div class="pb30 border-b">
                        <p class="admin-sec-title  mb10">기업등록 유의 사항</p>
                        <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">
                        <p class="detail-text mr30">신규 기업 등록 시 유의 사항 문구를 확인했습니까?</p>
                        <div class="flex justify-start align-center">
                            <label for="noticeCheck" class="block mr5 detail-text">예</label>
                            <input type="checkbox" name="noticeCheck" id="noticeCheck" v-model="noticeCheck" />
                        </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">
                    <button class="large-btn blue-btn ml0"  title="확인" @click="StepGo()">확인</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import PageNavigationBar from '../../../component/pagenavigationbar/PageNavigationBar.vue';
import PaginationButton from '../../../component/pagination/PaginationButton.vue'
import Attachment from '../../../component/file/Attachment.vue';
import axios from "axios";
import COMMON_UTIL from '../../../../resources/js/commonUtil';
import { useStore } from "vuex";
import { mdiWindowClose, mdiMagnify } from '@mdi/js';
import { keywordFindAll } from '../../../../resources/api/companyApply';
import { detailProc } from '../../../../resources/api/userPage';
import { toRaw } from "vue";
import queryParams from '../../../../resources/js/queryParams';
import { defaultSearchParams } from '../../../../resources/js/defaultSearchParams';

export default {
    mixins: [queryParams],
    data() {
        return {
            search: '',
            filteredResults: [], // 필터링된 결과를 저장하는 변수
            mouseOverResult: false,
            closePath: mdiWindowClose,

            //세현

            //기업목록 조회 조건
            companyListSearch: {
                currentPage: 1,
                perPage: 5,
                searchType: 'name',
                searchText: null,
            },
            //기업목록
            companyList: [],
            companyListCount: 0,
            file: new FormData(),
            //기업상세
            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,
                isEntJoin: false,
                entSeNm: null,
                mainApplEntYn: ''
            },
            //유저상세
            user_info: {
                mbrId: null,
                lgnId: null,
                mbrEncptPswd: null,
                user_pw_check: null,
                mbrEncptFlnm: null,
                mbrJbgdNm: null, //회원직급명
                mbrEncptTelno: null,
                mbrEncptEmad: null,
                authrtId: null,
                //구독여부
                rcptnAgreYn: false,
                //개인정보 활용 동의(선택)
                prvcRlsYn: false,
            },

            //재직증명서
            employmentCertificate: null,
            formShow: false,

            //기업 전화번호 3자리
            ent_tel1: null,
            ent_tel2: null,
            ent_tel3: null,
            //파일
            file: new FormData(),
            //로고파일
            logoFile: {},
            //이메일 중복검사
            emlCheck_boolean: false,
            //사업자등록번호 중복검사
            brnoCheck_boolean: false,
            keywords: [],
            logoPreview: null,
            alert: false,
            noticeCheck: false,
            store: useStore(),

            // 검색 정보 담는 객체
            search: { ...defaultSearchParams },

            // 목록 조회 정보 담는 객체
            list: [],
            pagination: {},
            searchPath: mdiMagnify,
            // 기업 출원정보
            companyInfo: null
        };
    },
    methods: {
        // 모달확인
        alertModalOpen: function () {
            this.alert = true;
            this.ent_info.entId = null;
            this.ent_info.brno = null;
            this.ent_info.entNm = null;
            this.user_info.mbrJbgdNm = null;
        },
        modalClose: function () {
            this.noticeCheck = false;
            this.alert = false;
        },

        // new
        innerStepGo: function (companyOne, authrtId) {
            if (companyOne !== null) {
                this.ent_info.entId = companyOne.entId;
                this.ent_info.brno = companyOne.brno;
                this.user_info.authrtId = authrtId;
                this.ent_info.entNm = companyOne.entNm;
            }
            this.user_info.mbrJbgdNm = null;
            this.user_info.authrtId = authrtId;
            this.formShow = true;
            this.ent_info.isEntRegist = false;
            this.ent_info.isEntJoin = true;
            this.$nextTick(() => {
                this.$refs.form.scrollIntoView({ behavior: 'smooth' });
            });
        },


        //일반회원의 기업 등록
        StepGo: function () {
            if (!this.noticeCheck) {
                alert('유의 사항 문구 확인에 체크를 하셔야 다음 단계로 넘어갈 수 있습니다.')
                return
            }
            this.ent_info.isEntRegist = true;
            this.user_info.authrtId = 'ROLE_CO_MANAGER'
            this.formShow = true;
            this.alert = false;
            this.$nextTick(() => {
                this.$refs.form.scrollIntoView({ behavior: 'smooth' });
            });
        },

        filterResults() {
            if (this.search.length >= 0) {
                const filterText = this.search.toLowerCase();
                this.filteredResults = this.results.filter(item =>
                    item.JSNAME.toLowerCase().includes(filterText)
                );
            } else {
                this.filteredResults = this.results;
            }
        },
        selectResult(result) {
            this.search = result.JSNAME; // 선택된 결과를 입력창에 표시
            this.filteredResults = []; // 선택 후 결과 목록 숨김
        },

        hideResults() {
            // 결과 목록을 숨기는 로직
            this.filteredResults = [];
        },


        // axios: 기업 조회(목록)
        // async axiosSelectList() {
        //     this.saveQueryParams("queryParams", this.search); // 검색조건 저장
        //     // 실행
        //     try {
        //         const response = await entFindAll(toRaw(this.search));
        //         alert("response",response)
        //         // 객체 삽입
        //         this.list = response.data["data"]["list"];
        //         this.search = response.data["data"]["pagination"];
        //         this.pagination = response.data["data"]["pagination"];

        //     } catch (error) {  
        //         alert("기억 목록 조회에 실패했습니다.");
        //     }
        // },

        // 조회(목록)
        fnViewList() {
            this.companySelectList();
        },
        //기업 목록 조회
        companySelectList: function () {
            const vm = this;
            this.search.searchFilter = 'apply'
            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.companyListCount = res.data.data.totalCount;
                vm.search = res.data.data.pagination;
                vm.pagination = res.data.data.pagination;
            }).catch(function (error) {
                alert("기업목록 조회 오류, 다시 시도해주세요.")
            });
        },

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

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

        //기업회원 신청 유효성 검사
        entUserValidation: function () {
            //직급이 있는경우 길이 검사
            if (this.user_info.mbrJbgdNm) {
                if (this.user_info.mbrJbgdNm.length > 30) {
                    alert("직급은 30자를 초과할 수 없습니다.");
                    return false;
                }
            }
            //재직 증명서
            if (!this.file.has("certification")) {
                alert("재직증명서를 첨부해주세요.");
                return false;
            }
            return true;
        },

        //기업회원신청
        entjoinRequest: function () {
            const vm = this;

            //1. 유효성검사
            if (!vm.entUserValidation()) return;


            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));
            requestFormData.append("ent_info", JSON.stringify(vm.ent_info));

            vm.$store.commit('setLoading', true);
            axios({
                url: '/mbr/companyApply.file',
                method: 'post',
                headers: {
                    'Content-Type': 'multipart/form-data',
                },
                data: requestFormData
            }).then(function (res) {
                if (res.status === 200) {
                    alert("기업회원 신청에 성공하였습니다.")
                    vm.entSelectPage()
                }
            }).catch(function (error) {
                alert('회원등록 오류, 관리자에게 문의 해주세요.');
            }).finally(function () {
                vm.$store.commit('setLoading', false);
            });
        },

        //기업정보 조회페이지로 이동
        entSelectPage: function () {
            this.$emit('applySuccess');
        },

        //내정보 조회
        async init() {
            const vm = this;
            try {
                const res = await detailProc();
                if (res.status == 200) {
                    this.myInfo = res.data.data;
                    this.setInfo(res.data.data);
                }
            } catch (error) {
                alert(error.response.data.message)
                this.$router.push({ path: '/' })
            }
        },

        //내정보 셋팅
        setInfo: function (myInfo) {
            this.user_info.mbrId = myInfo.mbr_id;
            this.user_info.lgnId = myInfo.lgn_id;
        },

        //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개로 제한
            // return this.ent_info.selectedKeywords.length === 6 && !this.ent_info.selectedKeywords.includes(this.keywords[index]);   
            let isSelected = this.ent_info.selectedKeywords.includes(this.keywords[index].kywd_id);
            return this.ent_info.selectedKeywords.length >= 6 && !isSelected;
        },

        //사업자등록번호 중복검사
        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])
        },

        //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 (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);
        },

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

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


            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));
            requestFormData.append("ent_info", JSON.stringify(vm.ent_info));

            if (vm.ent_info.isEntRegist) {
                requestFormData.append('logo', vm.logoFile);
            }

            vm.$store.commit('setLoading', true);

            axios({
                url: '/mbr/companyApply.file',
                method: 'post',
                headers: {
                    'Content-Type': 'multipart/form-data; charset=UTF-8',
                },
                data: requestFormData
            }).then(function (res) {
                if (res.status === 200) {
                    alert("기업등록 신청에 성공하였습니다.")
                    vm.entSelectPage()
                }
            }).catch(function (error) {
                alert('기업등록 오류, 관리자에게 문의 해주세요.');
            }).finally(function () {
                vm.$store.commit('setLoading', false);
            });
        },

        entRegistDownload: function () {
            const vm = this;
            vm.$store.commit('setLoading', true);
            // let path = 'C:\\AIDT\\FILES\\KERIS/20240509_f8d82053-50b2-43bf-8132-45727h34asd.hwp'
            let path = '/AIDT/FILES/KERIS/20240509_f8d82053-50b2-43bf-8132-45727h34asd.hwp'
            axios({
                url: '/file/downloadFile.json',
                method: 'post',
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                responseType: 'blob',
                data: `file_path=${encodeURIComponent(path)}`
            }).then((response) => {
                const blob = new Blob([response.data]);
                const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

                if (isSafari) {
                    FileSaver.saveAs(blob, 'AI 디지털교과서 통합지원센터 신규 기업등록신청서(양식).hwp');
                } else {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    a.download = 'AI 디지털교과서 통합지원센터 신규 기업등록신청서(양식).hwp';
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                }
            }).catch(function (error) {
                // alert('파일 다운로드 실패, 다시 시도해주세요.');
                alert(vm.$getCmmnMessage("err024"))
            }).finally(function () {
                vm.$store.commit('setLoading', false);
            });
        },

        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 keywordSelectList() {
            try {
                const res = await keywordFindAll();
                this.keywords = res.data.data;
            } catch (error) {
                alert(error.response.data.message)
            }
        },

        fnKeywordViewList() {
            this.keywordSelectList()
        },

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

        // 휴대폰번호 표기 변환
        mblTelnoSplit(data) {
            return COMMON_UTIL.getMask(data);
        },
    },
    watch: {
        "ent_info.selectedKeywords": function (newValue, oldValue) {

        },
        "ent_info.brno": function () {
            this.brnoCheck_boolean = false;
        },
    },
    computed: {
        findElement: function () {
            if (this.searchCompany) {
                return this.dataList.filter(function (value) {
                    return (value.status.indexOf(this.searchCompany) > -1);
                }, this);
            } else {
                // this.findWord 가 공백일땐 리스트를 그대로 반환한다.
                return this.dataList;
            }
        },

        selectedCompanies() {
            return this.companyList.filter(companyOne => companyOne.checked);
        },

    },
    components: {
        'PageNavigationBar': PageNavigationBar,
        'Attachment': Attachment,
        'PaginationButton': PaginationButton,
    },
    created() {
        this.fnViewList();
        this.init();
        this.fnKeywordViewList();
        this.findAllCtgry();
    },
    mounted() { }
}
</script>
