<template>
  <div class="container">
    <div class="page-titleZone flex justify-between align-center" style="width: 25%; margin: 0 auto">
      <p class="main-title flex80">비밀번호 변경</p>
    </div>
    <br />
    <div class="row form-box" style="width: 25%; margin: 0 auto">
      <div class="content-titleZone">
        <p class="box-title">비밀번호 수정</p>
      </div>
      <div class="table-zone">
        <table class="form-table2">
          <colgroup>
            <col style="width: 30%" />
            <col style="width: 70%" />
          </colgroup>
          <tbody>
            <tr>
              <th>현재 비밀번호</th>
              <td>
                <input type="password" class="full-input" id="userPassword" v-model="userEditData.userPassword" />
              </td>
            </tr>
            <tr>
              <th>새 비밀번호</th>
              <td>
                <input type="password" class="full-input" id="changePassword" v-model="changePw" />
              </td>
            </tr>
            <tr>
              <th>새 비밀번호 확인</th>
              <td>
                <input type="password" class="full-input" id="" v-model="changePwConfirm" />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="flex justify-end">
        <button class="blue-btn small-btn" @click="checkUserPassword">저장</button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import store from "../AppStore";

export default {
  data() {
    return {
      userId: store.state.loginUser.user_id,
      userEditData: {
        userId: null,
        userPassword: null,
        userNm: null,
        userEmail: null,
      },
      userOriginData: {},
      changePw: null,
      changePwConfirm: null,
    };
  },
  methods: {
    getUserData: function () {
      var vm = this;
      axios({
        url: "/mypage/" + vm.userId,
        method: "get",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
      })
        .then(function (response) {
          vm.userEditData = response.data.resultData.selectUserData;
          vm.userOriginData = Object.assign({}, vm.userEditData);
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
    checkUserPassword: async function () {
      var vm = this;
      if (vm.$isEmpty(vm.userEditData.userPassword)) {
        vm.$showAlert("비밀번호 수정", "현재 비밀번호를 입력해주세요.");
        document.getElementById("changePassword").focus();
        return;
      }
      if (vm.$isEmpty(vm.changePw)) {
        vm.$showAlert("비밀번호 수정", "새 비밀번호를 입력해주세요.");
        document.getElementById("changePassword").focus();
        return;
      }
      if (vm.$isEmpty(vm.changePwConfirm)) {
        vm.$showAlert("비밀번호 수정", "새 비밀번호 확인을 해주세요.");
        return;
      }
      if (!vm.$pwCheck(vm.changePw)) {
        vm.$showAlert("비밀번호 수정", "새 비밀번호 형식이 올바르지 않습니다.");
        document.getElementById("changePassword").focus();
        return;
      }
      if (vm.changePw !== vm.changePwConfirm) {
        vm.$showAlert(
          "비밀번호 확인",
          "새 비밀번호가 일치하지 않습니다. 다시 입력해주세요."
        );
        return;
      }
      if (vm.userEditData.userPassword === vm.changePw) {
        vm.$showAlert("내정보 수정", "수정된 정보가 없습니다.");
        return;
      }
      axios({
        url: "/mypage",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.userEditData,
      })
        .then(function (response) {
          if (response.data.resultData.checkUserPassword >= 1) {
            vm.updateUserPassword();
          } else {
            vm.$showAlert(
              "비밀번호 수정",
              "현재 비밀번호가 일치하지 않습니다."
            );
            document.getElementById("userPassword").focus();
          }
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
    updateUserPassword: function () {
      var vm = this;

      vm.userEditData.userPassword = vm.changePw;
      axios
        .put("/mypage/password", vm.userEditData)
        .then(function (response) {
          vm.$showAlert("비밀번호 수정", "비밀번호가 수정되었습니다.");
          vm.userEditData.userPassword = null;
          vm.changePw = null;
          vm.changePwConfirm = null;
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
  },
  mounted() {
    this.getUserData();
  },
};
</script>
