<template>
    <div class="content">
        <div class="sub-title-area mb-110">
            <h2>내 정보 수정</h2>
            <div class="breadcrumb-list">
                <ul>
                    <li><img :src="homeicon" alt="Home Icon"></li>
                    <li><img :src="righticon" alt="Home Icon"></li>
                    <li>내 정보 수정</li>
                </ul>
            </div>
        </div>
        <h3>기본정보</h3>
        <form action="" class="info-form mb-50">
            <dl>
                <dd>
                    <label for="id" class="require">아이디</label>
                    <input type="text" id="id" v-model="$store.state.loginId" readonly>
                </dd>
                <div class="hr"></div>

                <dd>
                    <label for="name" class="require">이름</label>
                    <input type="text" id="name" v-model="userInfo.userNm">

                </dd>

            </dl>
        </form>
        <h3>비밀번호 변경</h3>
        <form action="" class="pwchange-form mb-50">
            <dl>
                <dd>
                    <label for="id">현재 비밀번호</label>
                    <input type="password" id="id" placeholder="비밀번호를 입력하세요." v-model="userPassword.oldPassword">
                </dd>
                <div class="hr"></div>
                <dd>
                    <label for="pw">새 비밀번호</label>
                    <input type="password" id="pw" placeholder="새 비밀번호를 입력하세요." v-model="userPassword.newPassword"
                        @input="validatePassword">
                    <div class="invalid-feedback" v-if="!isPasswordValid && userPassword.newPassword !== null">
                        <img :src="erroricon" alt="">
                        <span>영문, 숫자, 특수문자를 최소 한 가지씩 조합하고 8자 이상 ~ 20자 이내로 입력해주세요.</span>
                    </div>
                </dd>
                <div class="hr"></div>
                <dd>
                    <label for="pwCheck">새 비밀번호 확인</label>
                    <input type="password" id="pwCheck" placeholder="새 비밀번호를 입력하세요." v-model="newPasswordCheck">
                    <div class="invalid-feedback" v-if="newPasswordCheck !== null && !passwordsMatch">
                        <img :src="erroricon" alt=""><span>비밀번호가 일치하지 않습니다.</span>
                    </div>
                </dd>
            </dl>
        </form>
        <div class="btn-group flex-end">
            <button class="signout" type="button" @click="fnDeleteUser">회원탈퇴</button>
            <button class="update" type="button" @click="fnUpdateUser">수정</button>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import { updateUsers, logOutProc, updatePassword } from "../../../resources/api/user"
export default {
    data() {
        return {
            // Define the image sources
            homeicon: 'client/resources/images/icon/home.png',
            erroricon: 'client/resources/images/icon/error.png',
            righticon: 'client/resources/images/icon/right.png',

            userInfo: {
                userNm: this.$store.state.userNm,
                userSttus: "1",
                useAt: "Y"
            },

            userPassword: {
                oldPassword: null,
                newPassword: null
            },
            newPasswordCheck: null,
            isPasswordValid: false // 비밀번호 유효성 체크를 위한 변수

        };
    },
    methods: {
        resetForm() {
            // 사용자 정보 초기화
            this.userPassword = {
                oldPassword: null,
                newPassword: null,
            };
            this.newPasswordCheck = null; // 비밀번호 확인 초기화
        },
        validatePassword() {
            // 빈 문자열이나 null 체크
            if (!this.userPassword.newPassword) {
                this.isPasswordValid = false; // 빈 문자열일 경우 유효성 false
                return;
            }

            // 정규식: 영문, 숫자, 특수문자를 최소 한 가지씩 조합하고 8자 이상 20자 이내
            const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,20}$/;
            this.isPasswordValid = passwordRegex.test(this.userPassword.newPassword);
        },
        async fnDeleteUser() {
            try {
                this.userInfo.userSttus = "0";
                this.userInfo.useAt = "N";
                // 사용자 정보를 업데이트하는 API 호출
                const response = await updateUsers(this.$store.state.userId, this.userInfo);

                console.log(response); // 응답 확인

                if (response.status === 200) {
                    logOutProc()
                        .then(() => {
                            console.log('로그아웃 성공 - 서버 측 쿠키 삭제 완료');
                            this.$store.commit('setStoreReset'); // 로그아웃 성공 후 스토어 초기화
                            this.$router.push({ path: '/Login.page' }); // 로그인 페이지로 리다이렉트
                        })
                        .catch(err => {
                            console.error('로그아웃 처리 중 오류:', err);
                            this.$store.commit('setStoreReset'); // 오류가 있어도 스토어는 초기화
                            this.$router.push({ path: '/Login.page' }); // 로그인 페이지로 리다이렉트
                        });
                }
            } catch (error) {
                console.error("User error:", error); // 에러 로그
                const message = error.response?.data?.message || "회원탈퇴퇴에 실패했습니다.";
                alert(message);
            }
        },
        //사용자 이름 벨류데이션 체크
        isValidationUser() {
            return this.userInfo.userNm == null || this.userInfo.userNm == '';
        },
        //사용자 비밀번호 벨류데이션 체크
        isValidationPasswdord() {
            return this.userPassword.oldPassword == null || this.userPassword.oldPassword == '' || this.userPassword.newPassword == null || this.userPassword.newPassword == '' || this.newPasswordCheck == null || this.newPasswordCheck == ''
        },
        async fnUpdateUser() {
            if (this.isValidationUser()) {
                if (this.isValidationPasswdord()) {
                    alert("수정 할 내용이 없습니다.");
                } else {
                    if (confirm("비밀번호 변경을 하시겠습니까?")) {
                        try {
                            const response = await updatePassword(this.$store.state.userId, this.userPassword);
                            if (response.status === 200) {
                                this.resetForm();
                                alert("비밀번호가 변경되었습니다.");
                                window.location.reload(); // 페이지 새로 고침
                            }
                        } catch (error) {
                            if (error.response && error.response.status === 401) {
                                alert("비밀번호 변경이 실패하였습니다.");
                                window.location.reload(); // 페이지 새로 고침
                            }
                        }
                    }
                }
            } else {
                if (this.$store.state.userNm !== this.userInfo.userNm) {
                    if (this.isValidationPasswdord()) {
                        if (confirm("회원정보를 변경을 하시겠습니까?")) {
                            try {
                                const response = await updateUsers(this.$store.state.userId, this.userInfo);
                                if (response.status === 200) {
                                    this.$store.commit("setUserNm", this.userInfo.userNm);
                                    this.resetForm();
                                    alert("회원정보가 변경되었습니다.");
                                    window.location.reload(); // 페이지 새로 고침
                                }
                            } catch (error) {
                                if (error.response && error.response.status === 401) {
                                    alert("회원정보 변경이 실패하였습니다.");
                                    window.location.reload(); // 페이지 새로 고침
                                }
                            }
                        }
                    } else {
                        if (confirm("회원과 비밀번호를 변경하시겠습니까?")) {
                            try {
                                const res = await updateUsers(this.$store.state.userId, this.userInfo);
                                const response = await updatePassword(this.$store.state.userId, this.userPassword);
                                if (res.status === 200 && response.status === 200) {
                                    this.resetForm();
                                    alert("회원과 비밀번호를 변경되었습니다.");
                                    window.location.reload(); // 페이지 새로 고침
                                }
                            } catch (error) {
                                if (error.response && error.response.status === 401) {
                                    alert("회원 및 비밀번호 변경이 실패하였습니다.");
                                    window.location.reload(); // 페이지 새로 고침
                                }
                            }
                        }
                    }
                } else {
                    if (this.isValidationPasswdord()) {
                        alert("수정 할 내용이 없습니다.");
                    } else {
                        if (confirm("비밀번호 변경을 하시겠습니까?")) {
                            try {
                                const response = await updatePassword(this.$store.state.userId, this.userPassword);
                                if (response.status === 200) {
                                    this.resetForm();
                                    alert("비밀번호가 변경되었습니다.");
                                    window.location.reload(); // 페이지 새로 고침
                                }
                            } catch (error) {
                                if (error.response && error.response.status === 401) {
                                    alert("비밀번호 변경이 실패하였습니다.");
                                    window.location.reload(); // 페이지 새로 고침
                                }
                            }
                        }
                    }
                }
            }
        }
    },
    watch: {},
    computed: {
        passwordsMatch() {
            return this.userPassword.newPassword === this.newPasswordCheck;
        }
    },
    components: {},
    mounted() { },
};
</script>