<template>
  <div class="find-wrap">
    <div class="login-logo mb50">
        <img src="../../../resources/img/content/login_logo.svg" alt="로고">
    </div>
    <div class="login-box">
        <p v-if="type === 'id'" class="find-title mb30">아이디 찾기</p>
        <p v-else-if="type === 'pw'" class="find-title mb30">비밀번호 찾기</p>
        <div class="error-message mb30">
            <p>
                <img src="../../../resources/img/component/common/ico_invalid_error_20.svg" alt=""> 
                <span v-if="type === 'id' && step === 1">아이디 찾을 방법을 선택해주세요.</span>
                <span v-if="type === 'pw' && step === 1">비밀번호 찾을 방법을 선택해주세요.</span> 
                <span v-if="type === 'id' && step === 2">아이디를 찾았습니다.</span>
                <span v-if="type === 'pw' && step === 2">변경할 비밀번호를 입력해주세요.</span> 
            </p>
        </div>
        <div class="find-methods" v-if="step === 1">
            <div class="form-check">
                <input type="radio" id="find-phone" name="find-method" value="phone"  v-model="selectedMethod"/>
                <label for="find-phone">회원 정보에 등록한 휴대전화로 인증</label>
                <!-- 휴대폰 인증 영역 -->
                <div v-if="selectedMethod === 'phone'" class="auth-form phone-auth">
                    <p class="warning">회원정보에 등록한 휴대전화 번호와 입력된 휴대전화번호가 같아야, 인증번호를 받을 수 있습니다.</p>
                    <input type="text" placeholder="이름"  class="form-control sm mb10"/>
                    <div class="input-group mb10">
                            <input type="tel" placeholder="휴대전화 번호"  class="form-control sm "/>
                            <button class="btn sm black" @click="certification">인증번호 받기</button>
                    </div>
                    <input type="text" placeholder="인증번호 입력"  class="form-control sm" style="background-color: #ebebeb;"/>
                </div>
            </div>
            <div class="form-check">
                <input type="radio" id="find-email" name="find-method" value="email"  v-model="selectedMethod"/>
                <label for="find-email">본인 확인 이메일로 인증</label>
                <!-- 이메일 인증 영역 -->
                <div v-if="selectedMethod === 'email'" class="auth-form email-auth">
                    <!-- <p class="warning">회원정보에 등록한 휴대전화 번호와 입력된 휴대전화번호가 같아야, 인증번호를 받을 수 있습니다.</p> -->
                    <input type="text" placeholder="이름"  class="form-control sm mb10"/>
                    <div class="input-group mb10">
                            <input type="tel" placeholder="이메일 주소"  class="form-control sm "/>
                            <button class="btn sm black">인증번호 받기</button>
                    </div>
                    <input type="text" placeholder="인증번호 입력"  class="form-control sm" style="background-color: #ebebeb;"/>
                </div>
            </div>
        </div>
        <div class="find-methods" v-else-if="step === 2">
            <div v-if="type === 'id'">
                <div class="input-group">
                    <label for="id">아이디</label>
                    <input type="text" id="id" class="form-control sm" disabled/>
                </div>
            </div>
            <div v-else-if="type === 'pw'">
                <div class="input-group">
                    <label for="pw" class="newpw">새 비밀번호</label>
                    <input type="password" id="pw" placeholder="8-16자의 영문/ 숫자 조합으로 입력해주세요." class="form-control sm mb10"/>
                </div>
                <div class="input-group">
                    <label for="pwCk" class="newpw">새 비밀번호 확인</label>
                    <input type="password" id="pwCk" placeholder="다시 입력해주세요." class="form-control sm mb10"/>
                </div>
            </div>
        </div>
        <div class="btn-zone">
            <button class="btn lg netx-btn" @click="stepGo(2)">다음</button>
        </div>

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

<script>

export default {
    props: ['type'],
    inject: ['$alert'],
    data() {
        return {
            step: 1, // 단계 관리 (1: 방법 선택, 2: 인증 입력 등)
            selectedMethod: '', // 선택된 인증 방법
        };
    },
    methods: {
        stepGo() {
            if (this.step === 1 && !this.selectedMethod) {
                this.$alert({ message: '인증 방법을 선택해주세요.',icon:require('../../../resources/img/component/common/ico_invalid_error_20.svg') });
                return;
            }else{
                this.step = 2; // 다음 단계로 이동
            }   
        },
        certification() {
            // 인증번호 받기 로직 구현
            this.$alert(
                { message: '인증번호가 발송되었습니다.',
                    icon:require('../../../resources/img/content/ico_certification.svg') ,
                    subMessage: '인증번호가 오지 않으면 입력하신 정보가 회원정보와 일치하는지 확인해주세요.'
                 }
            );
        }

    },
    watch: {},
    computed: {},
    components: {},
    created() {},
    mounted() {
    },
    beforeUnmount() {},
};

</script>