<template>
    <div class="join-wrap">
        <div class="login-logo mb50">
            <img src="../../../resources/img/content/login_logo.svg" alt="로고">
        </div>
        <div class="login-box join-box">
            <div class="tbl-wrap">
                <table class="tbl data">
                    <colgroup>
                        <col style="width: 180px;">
                        <col style="width: auto;">
                    </colgroup>
                    <tbody>
                        <tr>
                            <th style="background-color: #eff1fa;">아이디</th>
                            <td>
                                <div class="input-group">
                                    <input type="text" class="form-control sm" placeholder="3-15자 영문/숫자 조합으로 입력해주세요"
                                        v-model="loginId">
                                    <button class="btn sm black" @click="checkIdProc">중복확인</button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th style="background-color: #eff1fa;">비밀번호</th>
                            <td><input type="password" class="form-control sm" placeholder="3-16자 영문/숫자 조합으로 입력해주세요"
                                    v-model="password"></td>
                        </tr>
                        <tr>
                            <th style="background-color: #eff1fa;">비밀번호 확인</th>
                            <td><input type="password" class="form-control sm mb10"
                                    placeholder="3-16자 영문/숫자 조합으로 입력해주세요" v-model="passwordCheck">
                                <div class="error-message " v-if="passwordFail">
                                    <p><img src="../../../resources/img/component/common/ico_invalid_error_20.svg"
                                            alt="">비밀번호가 일치하지 않습니다</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tbl-wrap">
                <table class="tbl data">
                    <colgroup>
                        <col style="width: 180px;">
                        <col style="width: auto;">
                    </colgroup>
                    <tbody>
                        <tr>
                            <th style="background-color: #eff1fa;">이름</th>
                            <td><input type="text" class="form-control sm" placeholder="한글 15자, 영문 30자까지 가능합니다."
                                    v-model="memberName"></td>
                        </tr>
                        <tr>
                            <th style="background-color: #eff1fa;">이메일</th>
                            <td>
                                <div class="input-group">
                                    <input type="text" class="form-control sm" placeholder="유효한 이메일 주소를 입력해주세요"
                                        v-model="email">
                                    <button class="btn sm black" @click="checkEmailProc">중복확인</button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tbl-wrap last-table">
                <table class="tbl data">
                    <colgroup>
                        <col style="width: 180px;">
                        <col style="width: auto;">
                    </colgroup>
                    <tbody>
                        <tr>
                            <th style="background-color: #eff1fa;border-radius: 1rem 0 0 1rem; ">전화번호</th>
                            <td>
                                <div class="input-group mb10">
                                    <input type="text" class="form-control sm" placeholder="-제외 휴대전화 번호를 입력해주세요"
                                        v-model="phoneNumber">
                                    <button class="btn sm black">인증번호 발송</button>
                                </div>
                                <div class="input-group">
                                    <input type="text" class="form-control sm" placeholder="인증번호 6자리 숫자를 입력해주세요"
                                        style="background-color: #ebebeb;" v-model="vertifiCode">
                                    <button class="btn sm black" style="min-width: 119px;"
                                        @click="vertifyCode">확인</button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="layout center justify-center">
                <button class="btn lg netx-btn" @click="registProc">다음</button>
            </div>

        </div>
    </div>
</template>

<script>
import { errorMessages } from 'vue/compiler-sfc';
import { registProc, checkIdProc, checkEmailProc } from '../../../resources/api/auth';

export default {
    inject: ['$alert'],
    data() {
        return {
            loginId: null,
            password: null,
            passwordCheck: null,
            memberName: null,
            email: null,
            phoneNumber: null,
            vertifiCode: null,
            passwordFail: false,
            checkId: false,
            checkEmail: false,
            errorMessage: "",
        };
    },
    methods: {
        // 회원가입 
        async registProc() {
            const vm = this;
            vm.passwordFail = false;
            vm.errorMessage = "";

            // 아이디 검증
            const idRegex = /^[a-zA-Z0-9]{3,15}$/;
            if (!vm.loginId || !idRegex.test(vm.loginId)) {
                vm.$alert({ message: '아이디는 영문+숫자 조합의 3~15자여야 합니다.' });
                return;
            }
            if (vm.checkId === false) {
                vm.$alert({ message: '아이디 중복 확인을 해야합니다.' });
                return;
            }

            // 비밀번호 검증
            const pwRegex = /^[a-zA-Z0-9]{3,16}$/;
            if (!vm.password || !pwRegex.test(vm.password)) {
                vm.$alert({ message: '비밀번호는 영문+숫자 조합의 3~16자여야 합니다.' });
                return;
            }

            // 비밀번호 확인
            if (vm.password !== vm.passwordCheck) {
                vm.passwordFail = true;
                return;
            }

            // 이름 검증
            const name = vm.memberName;
            if (!name || !(name.length <= 15 || name.length <= 30)) {
                vm.$alert({ message: '이름을 입력해주세요.' });
                return;
            }

            // 이메일 검증
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!vm.email || !emailRegex.test(vm.email)) {
                vm.$alert({ message: '올바른 이메일 형식을 입력해주세요.' });
                return;
            }
            if (vm.checkEmail === false) {
                vm.$alert({ message: '이메일 중복 확인을 해야합니다.' });
                return;
            }

            // 전화번호 검증
            const phoneRegex = /^01[016789][0-9]{7,8}$/;
            if (!vm.phoneNumber || !phoneRegex.test(vm.phoneNumber)) {
                vm.$alert({ message: '전화번호는 "-" 없이 10~11자리 숫자로 입력해주세요.' });
                return;
            }

            // 인증 코드 검증
            const codeRegex = /^[0-9]{6}$/;
            if (!vm.vertifiCode || !codeRegex.test(vm.vertifiCode)) {
                vm.$alert({ message: '인증번호는 6자리 숫자여야 합니다.' });

                return;
            }

            const loginData = {
                loginId: vm.loginId,
                password: vm.password,
                memberName: vm.memberName,
                email: vm.email,
                phoneNumber: vm.phoneNumber
            }
            try {
                const res = await registProc(loginData);
                if (res.status === 200) {
                    vm.$alert({ message: '회원가입이 완료되었습니다.' });

                    vm.$router.push({ path: "/login.page" });
                }

            } catch (error) {
                vm.errorMessage = '장애가 발생했습니다.\n';
                vm.showAlert();
            }
        },
        // 아이디 중복 확인
        async checkIdProc() {
            const vm = this;
            vm.checkId = false;
            // 아이디 검증
            const idRegex = /^[a-zA-Z0-9]{3,15}$/;
            if (!vm.loginId || !idRegex.test(vm.loginId)) {
                vm.$alert({ message: '아이디는 영문+숫자 조합의 3~15자여야 합니다.' });
                return;
            }

            const checkIdData = {
                loginId: vm.loginId,
            }
            try {
                const res = await checkIdProc(checkIdData);
                if (res.status === 200) {
                    if (res.data.result > 0) {
                        vm.$alert({ message: '중복된 아이디입니다.' });
                    } else {
                        vm.checkId = true;
                        vm.$alert({ message: '사용 가능한 아이디입니다.' });
                    }
                }

            } catch (error) {
            }
        },

        // 이메일 중복 확인
        async checkEmailProc() {
            const vm = this;
            vm.checkEmail = false;

            // 이메일 검증
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!vm.email || !emailRegex.test(vm.email)) {
                vm.$alert({ message: '올바른 이메일 형식을 입력해주세요.' });
                return;
            }

            const checkEmailData = {
                email: vm.email,
            }
            try {
                const res = await checkEmailProc(checkEmailData);
                if (res.status === 200) {
                    if (res.data.result > 0) {
                        vm.$alert({ message: '중복된 이메일입니다.' });
                    } else {
                        vm.checkEmail = true;
                        vm.$alert({ message: '사용 가능한 이메일입니다.' });
                    }
                }

            } catch (error) {
            }
        },

        // 인증번호 발송 - 비용이 드는 것이기에 생략
        async sendMail(){

        },

        // 인증번호 확인 - 발송과 마찬가지로 생략
        async checkCode() {

        },

    },
    watch: {
        // 아이디, 이메일 변경 시 중복 확인 초기화
        loginId(newVal, oldVal) {
            this.checkId = false;
        },
        email(newVal, oldVal) {
            this.checkEmail = false;
        },
    },
    computed: {},
    components: {},
    created() { },
    mounted() { },
    beforeUnmount() { },
};

</script>