<template>
  <div class="sidemenu">
    <div class="myinfo profile">
      <div class="name-box">
        <div class="img-area">
          <div class="img">
            <img :src="croppedImg || placeholder" alt="미리보기 이미지" />
            <button class="close-btn" @click="removeImage">&#215;</button>
          </div>
          <div class="info">
            <div class="file">
              <label for="fileUpload" class="file-label">
                <img :src="file" alt="">
                <button @click="showCropModal = true">
                  <p>업로드</p>
                </button>
              </label>
            </div>
          </div>
        </div>
        <ImageCropper :key="cropperKey" field="avatar" v-model="showCropModal" :width="200" :height="200"
          img-format="png" lang-type="ko" @crop-success="cropSuccess" :no-square="true" :round-cropping="true"
          :max-size="1024" />
      </div>
    </div>
  </div>
  <div class="content">

    <div class="d-flex justify-content-center py-4">
      <a href="index.html" class="logo d-flex align-items-center w-auto">
      </a>
    </div><!-- End Logo -->

    <div class="card mb-3">
      <p class="require"><img :src="require" alt=""> 필수입력</p>
      <div class="card-body">

        <form class="row g-3 needs-validation " :class="{ 'was-validated': formSubmitted }"
          @submit.prevent="handleRegister" novalidate>
          <div class="col-12">
            <label for="loginId" class="form-label">아이디</label>
            <input v-model="selectedUser.loginId" type="text" name="name" class="form-control" id="yourName" required
              readonly placeholder="admin">
          </div>
          <div class="col-12 ">
            <div class="col-12 border-x">
              <label for="userNm" class="form-label ">
                <p>이름
                <p class="require"><img :src="require" alt=""></p>
                </p>
              </label>
              <input v-model="requestDTO.userNm" type="text" name="username" class="form-control" id="youremail"
                required>
            </div>

            <div class="col-12 border-x">
              <label for="deptNm" class="form-label">부서</label>
              <input v-model="selectedUser.deptNm" type="password" name="password" class="form-control"
                id="yourPassword" required readonly placeholder="부서">
            </div>
          </div>
          <div class="col-12">
            <div class="col-12 border-x">
              <label for="clsfNm" class="form-label">직급</label>
              <input v-model="selectedUser.clsfNm" type="text" name="username" class="form-control" id="youremail"
                required readonly placeholder="직급">
            </div>

            <div class="col-12 border-x">
              <label for="rspofcNm" class="form-label">직책</label>
              <input v-model="selectedUser.rspofcNm" type="password" name="password" class="form-control"
                id="yourPassword" required readonly placeholder="직책">
            </div>
          </div>
          <div class="col-12">
            <label for="mbtlnum" class="form-label">연락처</label>
            <input v-model="requestDTO.mbtlnum" type="text" name="name" class="form-control" id="yourName" required>
          </div>
          <div class="col-12">
            <label for="brthdy" class="form-label">생년월일</label>
            <input v-model="requestDTO.brthdy" type="text" name="name" class="form-control" id="yourName" required>
          </div>
          <div class="col-12">
            <label for="yourName" class="form-label">입사일</label>
            <input v-model="requestDTO.encpn" type="text" name="name" class="form-control" id="yourName" required
              readonly placeholder="2025-01-01">
          </div>
          <div class="col-12">
            <label for="oldPassword" class="form-label">현재 비밀번호</label>
            <input v-model="updatePasswordDTO.oldPassword" type="password" name="name" class="form-control"
              id="yourName" required>
          </div>
          <div class="col-12">
            <label for="newPassword" class="form-label">새 비밀번호</label>
            <div class="box">
              <input v-model="updatePasswordDTO.newPassword" type="password" name="name" class="form-control"
                id="yourName" required>
              <div class="invalid-feedback">※ 비밀번호는 6~12자의 영문자와 숫자, 특수기호조합으로 작성해주세요.</div>
            </div>
          </div>
        </form>
        <div class="buttons">
          <button class="btn sm btn-red " type="submit" @clcick="submitDeleteForm">회원탈퇴</button>
          <button class="btn sm secondary " type="submit" @click="submitUpdateForm">수정</button>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import ImageCropper from 'vue-image-crop-upload'; //이미지 자르기기
import { findUsersDetProc, updateUsersProc, updatePassword } from "../../../resources/api/user";

export default {
  data() {
    return {
      previewImg: null,
      placeholder: "/client/resources/img/img1.png",
      require: "/client/resources/img/require.png",
      file: "/client/resources/img/file.png",
      acceptTerms: false,
      formSubmitted: false,
      userData: null,
      croppedImg: null,     // 최종 크롭되어 표시될 이미지의 Data URL 또는 서버 이미지 URL
      cropperKey: 0,
      showCropModal: false, // ImageCropper 모달을 보여줄지 말지 결정하는 변수
      selectedUser: {}, //내정보 
      requestDTO: {
        loginId: null,      // @NotBlank, @Size, @Pattern
        clsf: null,         // 선택된 직급의 코드 (예: "RESP_JRM")
        rspofc: null,       // 선택된 직책의 코드 (예: "RSP_DR")
        userNm: null,       // @NotBlank, @Size
        password: null,     // @NotBlank, @Size, @Pattern (이 화면에서 password 받는다면)
        mbtlnum: null,      // 휴대폰
        telno: null,        // 전화번호 (현재 화면에 없으면 null 유지)
        email: null,        // 이메일 (현재 화면에 없으면 null 유지)
        zip: null,          // 우편번호 (현재 화면에 없으면 null 유지)
        adres: null,        // 주소 (현재 화면에 없으면 null 유지)
        detailAdres: null,  // 상세주소 (현재 화면에 없으면 null 유지)
        fileId: null,       // 파일 아이디 (파일 저장 후 백엔드에서 반환될 값, 직접 입력X)
        brthdy: null,       // 생년월일 (YYYY-MM-DD 문자열)
        encpn: null,        // 입사일 (YYYY-MM-DD 문자열)
        authorList: [],     // 선택된 권한의 ID들을 담을 배열 (UserAuthorVO 리스트 형태로 변환하여 전송)
      },
      updatePasswordDTO: {
        oldPassword: "",
        newPassword: "",
        resetAt: false,
      },
    };
  },
  components: {
    ImageCropper, findUsersDetProc, updateUsersProc, updatePassword
  },
  methods: {
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    //사용자 정보 상세 조회
    async searchUser() {
      try {
        const response = await findUsersDetProc(this.userData.userId);
        if (response.status === 200) {
          this.selectedUser = response.data.data.user; // API 응답에서 카테고리 목록을 가져옴

          this.requestDTO = {
            userNm: this.selectedUser.userNm,
            clsf: this.selectedUser.clsf,
            rspofc: this.selectedUser.rspofc || '',
            mbtlnum: this.selectedUser.mbtlnum,
            telno: this.selectedUser.telno,
            email: this.selectedUser.email,
            zip: this.selectedUser.zip,
            adres: this.selectedUser.adres,
            detailAdres: this.selectedUser.detailAdres,
            brthdy: this.selectedUser.brthdy,
            encpn: this.selectedUser.encpn,
            userSttus: this.selectedUser.userSttus,
            useAt: this.selectedUser.useAt,
            fileId: this.selectedUser.fileId, // 기존 파일 ID 보존
            authorList: this.selectedUser.authorList
          }
          this.croppedImg = this.selectedUser.thumbnail?.filePath || null;

          console.log("유저 아이디", this.selectedUser);
        }
      } catch (error) {
        console.error("검색 중 오류 발생:", error);
      }
    },
    //이미지 지우기
    removeImage() {
      this.croppedImg = null;
      this.cropperKey++;
    },
    //이미지 저장
    cropSuccess(imgDataUrl) {
      this.croppedImg = imgDataUrl;
      this.showCropModal = false;
    },
    //회원탈퇴
    async submitDeleteForm() {
      const confirmDelete = confirm("정말로 사용자를 탈퇴시키겠습니까?\n이 작업은 되돌릴 수 없습니다.");

      if (!confirmDelete) { // 사용자가 '아니오'를 눌렀을 때
        alert("사용자 탈퇴가 취소되었습니다.");
        return; // 함수 실행 중단
      }

      // 2. FormData 객체 생성
      const formData = new FormData();

      // 수정용 DTO 생성 (기존 데이터 + 수정 데이터)
      const updateDTO = {
        userNm: this.selectedUser.userNm,
        useAt: "N",
        fileId: this.selectedUser.fileId,
      };

      formData.append('updateUserDTO', new Blob([JSON.stringify(updateDTO)], {
        type: 'application/json'
      }));

      // 4. API 통신
      try {
        const response = await updateUsersProc(this.$route.query.id, formData);

        if (response.status === 200) {
          alert('사용자 탈퇴퇴가 성공적으로 저장되었습니다!');
        }
      } catch (error) {
        console.error("사용자 정보 저장 중 오류 발생:", error);
        alert("사용자 정보 저장 중 오류가 발생했습니다.");
        if (error.response && error.response.data && error.response.data.message) {
          alert(`오류: ${error.response.data.message}`);
        }
      }
    },
    //수정용
    async submitUpdateForm() {
      // 1. 기본 유효성 검사
      if (this.$isEmpty(this.requestDTO.userNm)) {
        alert("이름을 입력해 주세요.");
        return;
      }

      const oldPwEmpty = this.$isEmpty(this.updatePasswordDTO.oldPassword);
      const newPwEmpty = this.$isEmpty(this.updatePasswordDTO.newPassword);

      // 2. 비밀번호 입력 상황별 분기 처리
      if (!oldPwEmpty && newPwEmpty) {
        alert("새 비밀번호를 입력해주세요.");
        return;
      }

      if (oldPwEmpty && !newPwEmpty) {
        alert("기존 비밀번호를 입력해주세요.");
        return;
      }

      if (oldPwEmpty && newPwEmpty) {
        const confirmUpdate = confirm("비밀번호 변경 없이 내 정보를 수정하시겠습니까?");
        if (!confirmUpdate) {
          return; // 취소 시 함수 종료
        }
      }
      console.log("비밀번호 변경 여부:", !oldPwEmpty && !newPwEmpty);

      // 2. FormData 객체 생성
      const formData = new FormData();

      const updateDTO = {
        ...this.requestDTO,
      };

      formData.append('updateUserDTO', new Blob([JSON.stringify(updateDTO)], {
        type: 'application/json'
      }));

      // 3. 파일 처리
      // 기존 파일이 그대로 유지되는 경우 (fileId만 전송)
      if (this.selectedUser.fileId && !this.croppedImg.startsWith('data:')) {
        // 기존 파일 ID 유지
        updateDTO.fileId = this.selectedUser.fileId;
      }
      // 새로운 파일이 업로드된 경우
      else if (this.croppedImg && this.croppedImg.startsWith('data:')) {
        const profileImageFile = this.dataURLtoFile(this.croppedImg, 'profile_image.png');
        formData.append("multipartFiles", profileImageFile);
        // 기존 파일 ID 제거 (새 파일로 교체)
        updateDTO.fileId = null;
      }

      // 4. API 통신
      try {
        const response = await updateUsersProc(this.userData.userId, formData);

        if (response.status === 200) {
          if (!oldPwEmpty && !newPwEmpty) {
            await this.resetPassword();
          } else {
            alert('사용자 정보가 성공적으로 저장되었습니다!');
          }
        }
      } catch (error) {
        console.error("사용자 정보 저장 중 오류 발생:", error);
        alert("사용자 정보 저장 중 오류가 발생했습니다.");
        if (error.response && error.response.data && error.response.data.message) {
          alert(`오류: ${error.response.data.message}`);
        }
      }
    },

    async resetPassword() {
      try {
        const response = await updatePassword(this.userData.userId, this.updatePasswordDTO);
        if (response.status === 200) {
          alert("내 정보가 수정되었습니다.");
        }
      } catch (error) {
        console.error("검색 중 오류 발생:", error);
      }
    },
  },
  created() {
    const storedData = localStorage.getItem('vuex'); // 'vuex' 키로 바꿔야 함
    if (storedData) {
      const parsedData = JSON.parse(storedData);
      // vuex 스토어 구조에 따라 userInfo 경로 찾아야 함
      if (parsedData && parsedData.userInfo) {
        this.userData = parsedData.userInfo;
        console.log("userData 확인:", this.userData);
      } else {
        console.log("vuex 스토어에 userInfo가 없습니다.");
      }
    } else {
      console.log("로컬스토리지에 vuex 데이터가 없습니다.");
    }
  },
  mounted() {
    this.searchUser();
  },
};
</script>

<style scoped>
.profile-container {
  padding: 20px;
  text-align: center;
}

.info {
  margin-bottom: 20px;
}

.profile-image-area {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  /* 원형으로 만들게 */
  overflow: hidden;
  /* 영역 밖으로 넘치는 이미지 자르기 */
  margin: 0 auto 20px;
  /* 가운데 정렬 및 아래 여백 */
  border: 2px solid #eee;
  /* 테두리 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  /* 기본 배경색 */
}

.cropped-profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 이미지를 영역에 꽉 채우되 비율 유지 */
}

.default-profile-icon {
  font-size: 60px;
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.remove-btn {
  display: inline-block;
  /* 버튼 형태로 보이기 위해 */
  padding: 10px 20px;
  margin: 5px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.file-label.upload-btn:hover,
.remove-btn:hover {
  background-color: #0056b3;
}

.remove-btn {
  background-color: #dc3545;
}

.remove-btn:hover {
  background-color: #c82333;
}
</style>