<template>
    <div class="w1400">
        <section class="join-logo">
            <h1>회원가입</h1>
        </section>
        <section class="join-b">
            <div class="join-b-button">
                <input type="radio" id="company" v-model="selectedMembership" value="company">
                <label for="company" class="radio-t t1"
                    :style="{ backgroundColor: selectedMembership === 'company' ? '#86868644' : '#e2ecfc' }">기관회원
                    <img src="../../../../resources/jpg/join-bt2.png" alt=""></label>
                <input type="radio" id="two" v-model="selectedMembership" value="two">
                <label for="two" class="radio-t t2"
                    :style="{ backgroundColor: selectedMembership === 'common' ? '#86868644' : '#e6fff1' }">일반회원
                    <img src="../../../../resources/jpg/join-bt.png" alt=""></label>
            </div>
        </section>
        <div v-if="selectedMembership === 'company'">
            <div class="login-info2">
                <div>
                    <h3>회사소개</h3>
                    <hr>
                </div>
                <div class="login-info-grid">
                    <div class="login-info-grid-1">
                        <section class="join-sec0">
                            <div>
                                <p id="logoImg" ref="logoImg">logo</p>
                                <img id="logoImg" ref="logoImg" style="height:250px;" />

                                <input type="file" accept="image/*" name="logoImg" id="logoImg" style="display: none;" />
                                <label for="logoImg">파일선택</label>
                            </div>
                        </section>
                    </div>
                    <div class="login-info-grid-2">
                        <section class="join-sec1 joinsub0">
                            <div class="join-sec-sub ">
                                <span>사업자등록번호</span>
                            </div>
                            <div>
                                <input type="text" v-model="company['company_id']" placeholder="사업자등록번호를 입력하세요.">
                            </div>
                            <div>
                                <button @click="companyIdCheck">중복확인</button>
                            </div>
                            <!-- <div v-if="this.companyIdCheck_boolean" style="color:chartreuse"></div>
                            <div v-else style="color:red">사업자등록번호: 이미 등록되어있는 사업자등록번호 입니다.</div> -->
                        </section>
                        <section class="join-sec1 joinsub0-1">
                            <div class="join-sec-sub ">
                                <span>회사명</span>
                            </div>
                            <div>
                                <input type="text" v-model="company['company_nm']" placeholder="회사명을 입력해주세요.">
                            </div>
                        </section>
                        <section class="join-sec2 joinsub">

                            <div class="join-sec-sub">
                                <span>우리회사 키워드</span>
                            </div>
                            <div class="join-sub-input">
                                <input type="text">
                            </div>
                        </section>
                        <section class="join-sec3 joinsub j-s-3">
                            <div class="join-sec-sub">
                                <span>회사소개글</span>
                            </div>
                            <div class="join-sub-input">
                                <input type="text" v-model="company['company_info']">
                            </div>
                        </section>
                        <section class="join-sec4 joinsub">
                            <div class="join-sec-sub join-sec-1">
                                <span>회사소개서 첨부파일</span>
                            </div>
                            <div class="join-sub-input">
                                <input type="file" name="companyProfile" id="companyProfile" ref="companyProfile"
                                    @change="companyProfileUpload" />
                            </div>
                        </section>
                    </div>
                </div>
            </div>
            <div class="login-info">
                <div>
                    <h3>회원정보</h3>
                    <p>※ 기업회원의 경우 담당자 1인만 가입할 수 있습니다. 이미 가입한 기업은 중복 계정 생성이 불가합니다.
                    </p>
                    <hr>
                </div>
                <section class="join-sec1 joinsub0">
                    <div class="join-sec-sub ">
                        <span>아이디</span>
                    </div>
                    <div>
                        <input type="text" v-model="user['user_id']" placeholder="아이디를 입력하세요.">
                    </div>
                    <div>
                        <button @click="userIdCheck">중복확인</button>
                    </div>
                </section>
                <section class="join-sec3 joinsub">
                    <div class="join-sec-sub">
                        <span>비밀번호</span>
                    </div>
                    <div class="join-sub-input">
                        <input type="text" v-model="user['user_pw']" @change="passwordSyncCheck()" placeholder="비밀번호 입력">
                    </div>
                </section>
                <section class="join-sec4 joinsub">
                    <div class="join-sec-sub">
                        <span>비밀번호 확인</span>
                    </div>
                    <div class="join-sub-input">
                        <input type="text" v-model="pwCheck" @change="passwordSyncCheck()" placeholder="비밀번호 확인">
                    </div>
                    <div v-if="this.passwordCheckFlag" style="color:chartreuse">비밀번호 일치</div>
                    <div v-else style="color:red">비밀번호 불일치</div>
                </section>
                <section class="join-sec5 joinsub">
                    <div class="join-sec-sub">
                        <span>담당자명<span>(필수)</span></span>
                    </div>
                    <div>
                        <input type="text" v-model="user['user_nm']">
                    </div>
                </section>
                <section class="join-sec4 joinsub">
                    <div class="join-sec-sub join-sec-1">
                        <span>담당자 명함</span>
                    </div>
                    <div class="join-sub-input">
                        <input type="file" accept="image/*" name="imgFile" id="businessCardImg" ref="businessCardImg"
                            @change="businessCardUpload" />
                    </div>
                </section>
                <section class="join-sec6">
                    <div class="join-sec-sub">
                        <span>이메일<span>(필수)</span></span>
                    </div>
                    <div class="email-sec">
                        <div>
                            <input type="text" name="email_id" id="email_id" v-model="email_id">
                        </div>
                        <div>@</div>
                        <div>
                            <input v-if="select_email_dns == null" type="text" name="email_dns" id="email_dns"
                                v-model="email_dns">
                            <input v-else type="text" name="email_dns" id="email_dns" v-model="select_email_dns">
                        </div>
                        <div>
                            <select name="email_sel" id="email_sel" 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">google.com</option>
                            </select>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div v-else>
            <div class="login-info">
                <div>
                    <h3>회원정보</h3>
                    <hr>
                </div>
                <section class="join-sec1 joinsub0">
                    <div class="join-sec-sub ">
                        <span>아이디</span>
                    </div>
                    <div>
                        <input type="text" v-model="user['user_id']" placeholder="아이디를 입력하세요.">
                    </div>
                    <div>
                        <button @click="userIdCheck">중복확인</button>
                    </div>
                </section>
                <!-- <section class="join-sec2 joinsub">

                    <div class="join-sec-sub">
                        <span>기관업체</span>
                    </div>
                    <div class="join-sub-input">
                        <input type="text">

                    </div>

                </section> -->
                <section class="join-sec3 joinsub">
                    <div class="join-sec-sub">
                        <span>비밀번호</span>
                    </div>
                    <div class="join-sub-input">
                        <input type="text" v-model="user['user_pw']" @change="passwordSyncCheck()" placeholder="비밀번호 입력">

                    </div>
                </section>
                <section class="join-sec4 joinsub">
                    <div class="join-sec-sub">
                        <span>비밀번호 확인</span>
                    </div>
                    <div class="join-sub-input">
                        <input type="text" v-model="pwCheck" @change="passwordSyncCheck()" placeholder="비밀번호 확인">
                    </div>
                    <div v-if="this.passwordCheckFlag" style="color:chartreuse">비밀번호 일치</div>
                    <div v-else style="color:red">비밀번호 불일치</div>
                </section>
                <section class="join-sec5 joinsub">
                    <div class="join-sec-sub">
                        <span>이름</span>
                    </div>
                    <div>
                        <input type="text" v-model="user['user_nm']">
                    </div>
                </section>
                <section class="join-sec6">
                    <div class="join-sec-sub">
                        <span>이메일</span>
                    </div>
                    <div class="email-sec">
                        <div>
                            <input type="text" name="email_id" id="email_id" v-model="email_id">
                        </div>
                        <div>@</div>
                        <div>
                            <input v-if="select_email_dns == null" type="text" name="email_dns" id="email_dns"
                                v-model="email_dns">
                            <input v-else type="text" name="email_dns" id="email_dns" v-model="select_email_dns">
                        </div>
                        <div>
                            <select name="email_sel" id="email_sel" v-model="select_email_dns">
                                <option value="">직접 입력</option>
                                <option value="naver.com">naver.com</option>
                                <option value="hanmail.net">hanmail.net</option>
                                <option value="gmail.com">google.com</option>
                            </select>
                        </div>
                    </div>
                </section>
            </div>
        </div>



        <!---------------------------------------------------------------------------------------------------------------->



        <div class="join-w1400">

            <section class="join-email-bt">
                <input type="checkbox">
                <span>E-mail 구독서비스를 신청하시겠습니까?</span>
            </section>

            <section class="join-end-bt">
                <button>이전</button>

                <button v-if="selectedMembership === 'company'" @click="commonFileInsert">회원가입</button>
                <button v-else @click="userInsert">회원가입</button>
            </section>
        </div>

    </div>



    <!-- 회원가입 완료 모달 -->
    <div class="joinmodal" v-if="isVisible">
        <section class="join-modal-a">
            <div>
                <h1>회원가입 안내</h1>
            </div>
            <div>
                <p>회원가입이 완료되었습니다.
                    승인 결과는 작성해주신 이메일로 발송될 예정입니다.

                    회원가입 승인 전까지 특정 서비스는 이용하실 수 없으며,
                    승인 이후 모든 서비스를 이용하실 수 있습니다.
                    또한, 해당 기업은 같은 기업명으로 중복 계정 생성이 불가합니다.

                </p>
            </div>
            <div>
                <button @click="hideDiv">확인</button>
            </div>
        </section>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            company: {
                company_id: null,
                company_nm: null,
                company_info: null,
                file_id: null,
            },
            user: {
                user_id: null,
                user_pw: null,
                user_eml: null,
                user_auth: null,
            },
            file: null,
            keyword: {

            },
            logo_img: null,
            business_card_img: null,
            company_profile: null,
            //기업 ID 중복 확인
            companyIdCheck_boolean: null,
            //사용자 ID 중복 확인
            userIdCheck_boolean: null,
            //PW 확인
            pwCheck: null,
            passwordCheckFlag: null,
            email_id: null,
            email_dns: null,
            select_email_dns: null,
            selectedMembership: 'company',
            isVisible: false,
        }
    },
    methods: {
        //비밀번호 매칭 확인
        passwordSyncCheck: function () {
            console.log("this.user.user_pw : ", this.user.user_pw);
            console.log("this.pwCheck : ", this.pwCheck);

            if (this.user.user_pw != this.pwCheck) this.passwordCheckFlag = false;
            else this.passwordCheckFlag = true;
        },
        //company ID 중복 검사
        companyIdCheck: function () {
            const vm = this;
            axios({
                url: '/company/companySelectOne.json',
                method: 'post',
                herders: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.company
            }).then(function (response) {
                // console.log("idCheck - response : ", response.data);
                if (response.data != null) {
                    alert("중복된 사업자등록번호 입니다.");
                    vm.companyIdCheck_boolean = false;
                    return false;
                } else {
                    alert("사용가능한 사업자등록번호 입니다.");
                    vm.companyIdCheck_boolean = true;
                    return true;
                }
            }).catch(function (error) {
                console.log("companyIdCheck - error : ", error);
                alert("중복검사 오류, 다시 시도해주세요.");
            });
        },

        //user ID 중복 검사
        userIdCheck: function () {
            const vm = this;
            axios({
                url: '/user/userSelectOne.json',
                method: 'post',
                herders: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: vm.user
            }).then(function (response) {
                // console.log("idCheck - response : ", response.data);
                if (response.data != null) {
                    alert("중복된 ID 입니다.");
                    vm.userIdCheck_boolean = false;
                    return false;
                } else {
                    alert("사용가능한 ID 입니다.");
                    vm.userIdCheck_boolean = true;
                    return true;
                }
            }).catch(function (error) {
                console.log("userIdCheck - error : ", error);
                alert("중복검사 오류, 다시 시도해주세요.");
            });
        },

        userInsert: function () {
            this.user.user_auth = this.selectedMembership;
            const vm = this;
            axios({
                url: "/user/userInsert.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: vm.user,
            }).then(function (response) {
                console.log("userInsert - response: ", response.data);
                vm.isVisible = true;
                vm.loginPage();
            }).catch(function (error) {
                console.log("userInsert - error : ", error);
            });
        },

        //회원가입 등록
        companyInsert: function () {
            const vm = this;
            axios({
                url: "/company/companyInsert.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: vm.company,
            }).then(function (response) {
                console.log("companyInsert - response: ", response.data);
                vm.userInsert();
            }).catch(function (error) {
                console.log("companyInsert - error : ", error);
            });
        },
        joinInsert: function () {
            if (this.selectedMembership == "company") {
                this.companyInsert();
            }
            else {
                this.userInsert();
            }
        },
        //file 등록
        commonFileInsert: function () {
            const vm = this;
            //this.post를 문자열로 변경 후, 바이너리 형태로 변형한 다음, FormData에 담을 필요 없음
            //vm.formData.append('params', new Blob([JSON.stringify(this.post)],{type: 'application/json'}));
            //문자열로만 변경한 후, FormData에 담기

            vm.file.append('params', JSON.stringify(this.company));

            // if (this.joinInsertCheck()) {
            //     return;
            // };
            axios({
                url: "/commonFile/commonFileInsert.file",
                method: "post",
                headers: {
                    "Content-Type": "multipart/form-data; charset=UTF-8",
                },
                data: vm.file,
            }).then(function (response) {
                console.log("commonFileInsert - response : ", response.data);

                vm.company["file_id"] = response.data;
                console.log("ok check : ");
                // vm.joinInsert();
            }).catch(function (error) {
                console.log("commonFileInsert - error : ", error);
            });

        },

        //로고 이미지 등록
        logoUpload: function (e) {
            const vm = this;

            for (const file of e.target.files) {
                vm.file.append('logo_img', file);
                var reader = new FileReader();
                reader.onload = function (e) {
                    var output = document.getElementById("logoImg");
                    output.src = reader.result;
                };
                reader.readAsDataURL(file);

            }
        },

        //명함 이미지 등록
        businessCardUpload: function (e) {
            const vm = this;

            for (const file of e.target.files) {
                vm.file.append('business_card_img', file);
                var reader = new FileReader();
                reader.onload = function (e) {
                    var output = document.getElementById("businessCardImg");
                    output.src = reader.result;
                };
                reader.readAsDataURL(file);

            }
        },
        companyProfileUpload: function (e) {
            const vm = this;
            for (const file of e.target.files) {
                vm.file.append('company_profile', file);
            }
        },

        // companyProfileUpload: function (e) {
        //     const vm = this;
        //     vm.company_profile = new FormData()

        //     for (const file of e.target.files) {
        //         vm.company_profile.append('company_profile', file);
        //     }
        // },

        //유효성 검사
        joinInsertCheck: function () {
            if (COMMON_UTIL.isEmpty(this.post["main_number"]) == true) {
                alert("구간을 선택해주세요");
                // this.$refs["main_number"].focus();
                return true;
            }
            if (COMMON_UTIL.isEmpty(this.post["sub_number"]) == true) {
                alert("구간번호를 입력해주세요");
                // this.$refs["sub_number"].focus();
                return true;
            }
            if (COMMON_UTIL.isEmpty(this.post["season"]) == true) {
                alert("계절을 선택해주세요");
                // this.$refs["season"].focus();
                return true;
            }
            // if(COMMON_UTIL.isEmpty(this.post["main_number"])==true){
            //     alert("항공뷰 ID를 입력해주세요");
            //     this.$refs["main_number"].focus();
            // }
        },

        showDiv: function () {
            this.isVisible = true;
        },
        hideDiv: function () {
            this.isVisible = false;
        }
    },
    watch: {
        "email_id": function () {
            this.user["user_eml"] = this.email_id + "@" + this.email_dns;
        },
        "email_dns": function () {
            this.user["user_eml"] = this.email_id + "@" + this.email_dns;
        },
        "select_email_dns": function () {
            this.user["user_eml"] = this.email_id + "@" + this.select_email_dns;
        },
    },
    computed: {

    },
    mounted() {
        console.log('Join mounted');
        this.file = new FormData()

    }
}
</script>

<style scoped>
/* 모달 */
.joinmodal {
    width: 100%;
    height: 100%;
    background-color: #33333324;
    margin: 0 auto;
    text-align: center;
    padding: 3rem;
    position: fixed;
    top: 0;
    left: 0;
}

.join-modal-a {
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 4rem;
    border-radius: 2rem;
    background-color: #f9f9f9;
    transform: translate(-50%, -50%);
    /* margin: 0 auto; */
    box-shadow: 2px 2px 5px #86868644;

    width: 25%;
}

.join-modal-a h1 {
    font-size: 2rem;
    padding: 3rem 0 0 0;
}

.join-modal-a p {
    width: 85%;
    margin: 0 auto;
    font-size: 1.5rem;
    padding: 3rem;
    text-align: left;
}

.join-modal-a button {
    width: 20%;
    background-color: #3f87f7;
    border-radius: 1.5rem;
    color: white;
    font-family: "Pretendard-Regular";


}

/* ----------------------------------- */
.join-b {
    width: 100%;

    /* border: 1px solid red; */
}

.join-logo {
    padding: 6rem;
}

.login-info p {
    color: rgb(255, 0, 0);
    padding: 0 1rem;
    font-size: 1.5rem;
}

.join-logo h1 {
    font-family: SBaggroM;
    color: #0e0077;
    font-size: 4rem;
}

.join-b-button {
    width: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    gap: 6rem;
    flex-direction: row;
    /* padding: 9rem; */
}

.join-b-button input[type="radio"] {
    display: none;
}

.join-b-button button {
    height: 20rem;
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 2rem;
    text-align: center;
    box-shadow: 2px 2px 5px #86868644;
    /* padding: 1rem; */
}

.join-b-button button p {
    padding: 3rem 0 0;
    /* padding: 3rem 0rem 1rem 3rem; */
    font-size: 3rem;
    font-family: SBaggroM;
    color: #014099;

}

.join-b-button button img {
    width: 200px;
    height: 100px;
    text-align: center;
    margin: 0 auto;
    /* border: 1px solid red; */
    background-position: center;
}


.background {
    background-color: #000000;

}

.join-b-button button:nth-child(1).background {
    background-color: #000000;
}


.light {
    z-index: 1;
    background-color: #ff0000;
}

.join-b-button button:nth-child(2) {
    background-color: #e6fff1;
}

.join-b-button button:nth-child(2) img {
    width: 100px;
}

.join-b-button button:nth-child(2) p {
    color: #0e5e2e;
}

.radio-t {
    padding: 3rem;
    height: 25rem;
    font-size: 3rem;
    border-radius: 2rem;
    font-family: SBaggroM;
    margin: 0 auto;
    box-shadow: 2px 2px 5px #33333330;
    text-align: center;
}

.t1 {
    padding: 6rem 0;
    color: #014099;
    background-color: #e2ecfc;
}

.t1 img {
    padding: 1rem;
    width: 90%;
    margin: 0 auto;
}

.t2 img {
    padding: 1rem;
    width: 50%;
    margin: 0 auto;

}

.t2 {
    padding: 6rem 0;
    color: #0e5e2e;
    background-color: #e6fff1;
}

/* 공통요소-------------------------------------------------------------------------*/
hr {
    margin: 1rem 0 3rem 0;
    border: 1px solid #cbcbcb;
}

section div span {
    font-size: 1.5rem;
    font-family: "Pretendard-Regular";

    /* float: left; */
    color: #3f87f7;
    padding: 1rem 1rem 1rem 5rem;
}

section div span span {
    padding: 0rem;
    color: #a6a6a6;
}

section div input {
    width: 100%;
    padding: 1rem;
    border: 1px solid #cbcbcb;
    color: #cbcbcb;
    border-radius: 0.5rem;
}

section div button {
    width: 100%;
    padding: 1rem;
    cursor: pointer;
    border-radius: 0.5rem;
}

section div select {
    width: 100%;
    padding: 1rem;
    border: 1px solid #cbcbcb;
    border-radius: 0.5rem;
    color: #6b6b6b;
    font-family: "Pretendard-Regular";

}


/* -------------------------------------------------------------------------------- */






.login-info,
.login-info2 {
    width: 50%;
    margin: 0 auto;

}

.login-info2 {
    display: block;
}

.login-info2.Chacked {
    display: none;
}

.login-info h3,
.login-info2 h3 {
    color: #0e0077;

    font-size: 2rem;
    font-family: "Pretendard-Regular";

    padding: 3rem 1rem 1rem 1rem;
}

.joinsub0 {
    padding: 1rem;
    display: grid;
    grid-template-columns: 200px 2fr 1fr;
    gap: 1rem;
}

.j-s-3 {
    display: grid;
    grid-template-rows: 30rem;
}

.j-s-3 input {
    height: 100%;
}

.join-sec1 button {
    font-size: 1.5rem;
    color: white;
    font-family: "Pretendard-Regular";

    background-color: #3f87f7;
}

.joinsub {
    padding: 1rem;
    display: grid;
    grid-template-columns: 200px 2fr;
    gap: 1rem;
}

.join-sec6 {
    padding: 1rem;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
}

.join-sec6 div:nth-child(3) {
    padding: 1rem 0;
    font-size: 1.5rem;
    font-family: "Pretendard-Regular";

}

.login-info-grid {
    display: grid;
    grid-template-columns: 100px 1fr;

}

.join-sec0 {
    display: grid;
    padding: 2rem;
    grid-row: 1 / span 3;

}

.join-sec0 div p {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    color: #333;
    font-size: 2.5rem;
    font-family: "Pretendard-Regular";
    background-color: #b5b5b5;
    /* border: 1px solid red; */
    box-shadow: 2px 2px 5px #33333328;
}

.joinsub0-1 {
    padding: 1rem;
    display: grid;
    grid-template-columns: 209px 2fr;

}

.join-w1400 {
    width: 50%;
    margin: 0 auto;

}

.join-email-bt {
    font-size: 1.6rem;
    padding: 3rem 3rem 3rem 0rem;
}

.join-email-bt input[type=checkbox] {
    margin: 1rem;
    /* border: 1px solid red; */
    transform: scale(1.5);
}

.join-email-bt span {
    color: #898989;
    font-family: "Pretendard-Regular";

}

.join-end-bt {
    display: grid;
    grid-template-columns: 25% 73%;
    gap: 1rem;
    padding: 6rem 0rem 6rem 0rem;
}

.join-end-bt button {
    padding: 2rem;
    cursor: pointer;
    border-radius: 1.2rem;
    font-size: 1.5rem;
    font-family: "Pretendard-Regular";

}

.join-end-bt button:nth-child(2) {
    background-color: #3f87f7;
    color: white;


}

.login-info2 {
    width: 50%;
}

.email-sec {
    display: grid;

    grid-template-columns: 1fr 30px 1fr 1fr;
}

.email-sec div {
    /* padding: 2rem; */
    padding: 1rem 0;
    font-size: 1.5rem;
    font-family: "Pretendard-Regular";
    /* border: 1px solid red; */
    text-align: center;
    gap: 1rem;
}

.email-sec div:nth-child(2) {
    padding: 2rem 0;
}







@media all and (min-width: 767px) and (max-width: 1023px) {}

@media all and (min-width: 1023px) and (max-width: 1268px) {
    .email-sec {
        width: 100%;
        display: grid;
        /* border: 1px solid red; */

        grid-template-columns: 1fr 30px 1fr 1fr;
    }

    .email-sec div {
        /* padding: 2rem; */
        padding: 1rem 0;
        font-size: 1.5rem;
        font-family: "Pretendard-Regular";
        /* border: 1px solid red; */
        text-align: center;
        gap: 1rem;
    }

    .email-sec div:nth-child(2) {
        padding: 2rem 0;
    }

    .login-info2 {
        width: 50%;
    }
}
</style>