<template>
    <div class="page">
        <div class="flex-column justify-center align-center content">
            <div class="login-wrap pd30 border">
                <h1 class="page-title text-ct mb30">아이디/비밀번호 찾기</h1>
                <div>
                    <ul class="search-nav flex justify-center align-center">
                        <div class="gd-6 cursor" v-for="(title, idx) in searchTitle" :key="idx"
                            @click="searchTypeClick(title.id)"
                            :class="{ 'text-ct content-title2': true, 'search-selceted': searchType === title.id }">
                            <li class="pd10">
                                {{ title.name }}
                            </li>
                        </div>
                    </ul>
                    <div class="content pt30">
                        <p class="detail-bold text-ct mb10" v-show="searchType === 'id'">본인인증으로 아이디찾기</p>
                        <p class="detail-bold text-ct mb10" v-show="searchType === 'pw'">본인인증으로 비밀번호찾기</p>
                        <div class="find-img mb30">
                            <img src="../../../resources/img/find.png" alt="본인인증 찾기 아이콘" class="ma" />
                        </div>
                        <div v-if="!isSearch">
                            <div v-show="searchType === 'id'" class="mb30">
                                <p class="explanation pd10 small-text">
                                    1. 본인임을 확인할 수 있는 휴대폰 본인 인증을 통해 아이디를 찾으실 수 있습니다.<br /><br />
                                    2. 휴대폰 인증의 경우, 통신사 사정으로 메시지를 받지 못하는 경우가 발생될 수 있습니다.<br /><br />
                                    3. 입력하신 정보는 본인확인용으로만 제공되며, 저장되지 않습니다.
                                </p>
                            </div>
                            <div v-show="searchType === 'pw'" class="mb30">
                                <p class="explanation pd10 mb30 small-text">
                                    1. 가입하신 아이디와 본인임을 확인할 수 있는 휴대폰 본인 인증을 통해 비밀번호를 변경하실 수 있습니다.<br /><br />
                                    2. 휴대폰 인증의 경우, 통신사 사정으로 메시지를 받지 못하는 경우가 발생될 수 있습니다.<br /><br />
                                    3. 입력하신 정보는 본인확인용으로만 제공되며, 저장되지 않습니다.
                                </p>
                            </div>
                            <div class="flex justify-center no-gutters">
                                <NiceM :service="'prov'" @revData="requestEvent" />
                                <!--  prov = 실제 호출  devf = 실패시 테스트, devs = 성공테스트 -->
                            </div>
                        </div>
                        <div v-else>
                            <div v-if="searchType === 'id'">
                                <p class="content-sub-title text-ct mb20">본인인증이 성공적으로 완료되었습니다!</p>
                                <p class="detail-text text-ct mb30">ID : <strong>{{ searchId }}</strong></p>
                                <div class="flex justify-center">
                                    <div class="gd-4">
                                        <button class="large-btn blue-btn ml0" title="로그인" @click="loginPage()">로그인
                                            <!-- <router-link :to="{ path: '/login.page' }">로그인</router-link> -->
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div v-else>
                                <div class="mb15">
                                    <label for="id" class="detail-bold mb10 block">변경할 비밀번호</label>
                                    <input type="password" v-model="changePwd" class="full-input" />
                                </div>
                                <div class="mb15">
                                    <label for="pw" class="detail-bold mb10 block">변경할 비밀번호 확인</label>
                                    <input type="password" v-model="changePwdCheck" class="full-input" @keyup.enter="checkPwd()" />
                                </div>
                                <button @click="checkPwd()" title="비밀번호 변경" class="large-btn blue-btn ml0">비밀번호 변경하기</button>
                            </div>
                        </div>
                    </div>
                </div>

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

<script>
import ProgressBar from '../../component/progressbar/ProgressBar.vue';
import NiceM from '../../component/nice/NiceM.vue';
import axios from 'axios';
import COMMON_UTIL from '../../../resources/js/commonUtil.js';

export default {
    props: {
        type: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            searchTitle: [{ id: 'id', name: '아이디찾기' }, { id: 'pw', name: '비밀번호찾기' }],
            searchType: null,
            isSearch: false,
            mbrInfo: {
                neis_pridtf_cd: null,
                mbr_encpt_pswd: null
            },
            searchId: null,

            changePwd: null,
            changePwdCheck: null
        };
    },
    methods: {
        searchTypeClick: function (type) {
            this.isSearch = false;
            this.mbrInfo.neis_pridtf_cd = null;
            this.searchType = type;
        },

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

      
                const res = await vm.isNiceDuplicated(niceObj.sDupInfo);
                if(!res.data.success){
                    vm.mbrInfo.neis_pridtf_cd = niceObj.sDupInfo;
                    if (vm.searchType === 'id') {
                        vm.idSearch();
                    } else {
                        vm.isSearch = true;
                    }
                } else {
                    alert("사용자 정보가 없습니다.")
                }
             
            }
        },

        loginPage: function() {
            this.$router.push({ path: "/login.page"});
        },

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

        idSearch: function () {
            const vm = this;

            axios({
                url: '/mbr/idSearch.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8',
                },
                data: vm.mbrInfo
            }).then(function (res) {
                if(res.status == 200){
                    vm.searchId = res.data.data.lgn_id; 
                    vm.isSearch = true;
                } 
            }).catch(function (error) { 
                alert(error.response.data.message);
            });
        },

        checkPwd: function () {
            const vm = this;

            if (!COMMON_UTIL.isEmpty(vm.changePwd) || vm.changePwd == '') {
                alert("변경할 비밀번호를 입력해주세요.")
                return;
            } else if (!COMMON_UTIL.isEmpty(vm.changePwdCheck) || vm.changePwdCheck == '') {
                alert("비밀번호 확인을 입력해주세요.")
                return;
            } else if (vm.changePwd !== vm.changePwdCheck) {
                alert("비밀번호가 불일치합니다.");
                return;
            } else if (!COMMON_UTIL.pwCheck(vm.changePwd)) {
                alert('비밀번호는 영문, 숫자, 특수문자를 포함한 6~20자이어야 합니다.')
                return;
            }

            vm.mbrInfo.mbr_encpt_pswd = vm.changePwd;

            axios({
                url: '/mbr/pwSearch.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8',
                },
                data: vm.mbrInfo
            }).then(function (res) {
                if(res.status == 200) {
                    alert('비밀번호 변경에 성공하였습니다. 로그인화면으로 이동합니다.')
                    vm.changePwd = null;
                    vm.changePwdCheck = null;
                    vm.$router.push({ path: '/login.page' });
                }
            }).catch(function (error) { 
                alert(error.response.data.message);
            });
        },

    },
    watch: {},
    computed: {},
    components: {
        'ProgressBar': ProgressBar,
        'NiceM': NiceM,
    },
    created() {
        // const type = this.$route.params.type;
        const type = this.$route.query.type;
        if (type === 'id') {
            this.searchType = type
        } else if (type === 'pw') {
            this.searchType = type
        }
    },
    mounted() {

    },
    beforeDestroy() {

    },
};

</script>
