<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>{{ userEditData.userId }}</td>
            </tr>
            <tr>
              <th>이름</th>
              <td>
                <input type="text" class="full-input" id="userNm" v-model="userEditData.userNm" />
              </td>
            </tr>
            <tr>
              <th>이메일</th>
              <td>
                <input type="text" class="full-input" id="email" v-model="userEditData.userEmail" />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="flex justify-end">
        <button class="blue-btn small-btn" @click="updateUserData">저장</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(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
    updateUserData: async function () {
      var vm = this;
      if (
        JSON.stringify(vm.userEditData) === JSON.stringify(vm.userOriginData)
      ) {
        vm.$showAlert("내정보 수정", "수정된 정보가 없습니다.");
        return;
      }
      if (vm.$isEmpty(vm.userEditData.userNm)) {
        vm.$showAlert("내정보 수정", "이름을 입력해주세요.");
        document.getElementById("userNm").focus();
        return;
      }
      if (vm.$isEmpty(vm.userEditData.userEmail)) {
        vm.$showAlert("내정보 수정", "이메일을 입력해주세요.");
        document.getElementById("email").focus();
        return;
      }
      if (vm.userEditData.userEmail && !vm.$email(vm.userEditData.userEmail)) {
        vm.$showAlert("내정보 수정", "이메일 형식이 올바르지 않습니다.");
        document.getElementById("email").focus();
        return false;
      }

      axios
        .put("/mypage", vm.userEditData)
        .then(function (response) {
          vm.$showAlert("내정보 수정", "내정보가 수정되었습니다.");
          vm.getUserData();
        })
        .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>
