인서트

<template>
  <div class="content admin-style overflow-y">
    <div class="admin-page-title point-font2 mb30">
      <p>관리자 관리</p>
    </div>
    <details open class="form-table-style mb30">
      <summary class="point-font2">
        <p class="summary-style pl10">기본정보</p>
      </summary>
      <div class="pt10 pb10">
        <table class="form-table">
          <colgroup>
            <col width="50%" />
            <col width="50%" />
          </colgroup>
          <tr>
            <td>
                <label for="" class="form-title point-font2 mb10">아이디</label>
                <div class="flex align-center">
                  <div class="gd-10 pl0">
                    <input
                      type="text"
                      class="full-input"
                      ref="lgnId"
                      v-model="mberVO['lgnId']"
                      minlength="5"
                      maxlength="20"
                      placeholder="아이디를 입력하세요."
                      :disabled="editMode == 'update'"
                      @change="isIdDupCheck = false"
                    />
                  </div>
                  <div class="gd-2 pl0 pr0" v-show="editMode == 'create'">
                    <button class="large-btn blue-border-btn"
                        @click="fnIdDuplication()">중복확인</button>
                  </div>
                </div>
            </td>
            <td>
              <div class="gd-12 pr0">
                <label for="" class="form-title point-font2 mb10">이름</label>
                <input
                  type="text"
                  class="full-input"
                  ref="mbrNm"
                  v-model="mberVO.mbrEncptFlnm"
                  minlength="2"
                  maxlength="50"
                  placeholder="이름을 입력하세요."
                />
              </div>
            </td>
          </tr>
          <tr v-if="editMode == 'create'">
            <td>
              <div class="gd-12 pl0">
                <label for="" class="form-title point-font2 mb10">
                  <span>비밀번호</span>
                </label>
                <span
                  :class="{ 'inline-block ml20': true, 'red-text': errorPwd }"
                  >영문, 숫자, 특수문자를 조합하여 입력해주세요.(6~20자)</span
                >
                <input
                  type="password"
                  class="full-input"
                  ref="newPswd"
                  v-model="pswd.newPswd"
                  minlength="9"
                  placeholder="영문, 숫자, 특수문자 조합된 6~20자리"
                />
              </div>
            </td>
            <td>
              <div class="gd-12 pr0">
                <label for="" class="form-title point-font2 mb10">
                  <span >비밀번호확인</span>
                </label>
                <input
                  type="password"
                  :class="{ 'full-input': true, 'err-border': pswdChk }"
                  ref="newPswdChk"
                  v-model="pswd.newPswdChk"
                  minlength="9"
                  placeholder='비밀번호 확인을 입력하세요.'
                />
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="gd-12 pl0">
                <label for="" class="form-title point-font2 mb10">
                  권한
                </label>
                <select name="" id="" class="full-select ml0" ref="authrt_cd"
                    v-model="mberVO.authrtId">
                    <option :value=null disabled>선택하세요</option>
                    <option v-for="(authority, idx) in authorityList" :key="idx"
                        :value=authority.authrtId>
                        {{ authority.authrtNm }}
                    </option>
                </select>
              </div>
            </td>
            <td>
              <div class="gd-12 pr0">
                <p class="form-title">소속기관</p>
                <input
                  type="text"
                  class="full-input"
                  ref="telno"
                  v-model="mberVO.ogdpInstNm"
                  placeholder="소속기관을 입력하세요."
                />
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <label for="email" class="form-title point-font2 mb10">이메일</label>
              <div class="flex align-center">
                <div class="gd-3 pl0">
                  <input
                    type="text"
                    id="email"
                    class="full-input"
                    ref="emailId"
                    v-model="email.id"
                    placeholder="이메일을 입력하세요."
                    @change="isEmlDupCheck = false"
                  />
                </div>
                <div>@</div>
                <div class="gd-3" v-if="email.select == 'self'">
                  <input
                    type="text"
                    class="full-input"
                    ref="emailAddress"
                    v-model="email['address']"
                    @change="isEmlDupCheck = false"
                  />
                </div>
                <div class="gd-3">
                  <select
                    class="full-select"
                    ref="emailSelect"
                    v-model="email.select"
                    @change="isEmlDupCheck = false"
                  >
                    <option value="">선택하세요</option>
                    <option value="self">직접입력</option>
                    <option value="naver.com">naver.com</option>
                    <option value="google.com">google.com</option>
                    <option value="hanmail.net">hanmail.net</option>
                    <option value="nate.com">nate.com</option>
                    <option value="kakao.com">kakao.com</option>
                  </select>
                </div>
                <div class="gd-1 pl0 pr0">
                  <button class="large-btn blue-border-btn"
                      @click="fnEmlDuplication()" v-if="editMode == 'create'">중복확인</button>
                  <button class="large-btn blue-border-btn"
                      @click="fnEmlDuplication()" v-if="editMode == 'update' && (originalEmailId != email.id || originalEmailSelect != email.select || originalEmailAddress != email.address)">중복확인</button>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </details>

    <div class="flex justify-end align-center no-gutters">
      <div class="gd-1 mr10">
        <button
          class="large-btn blue-btn"
          @click="fnInsert"
          v-if="editMode == 'create' && pageAuth.wrAuthrtYn == 'Y'"
        >
          등록
        </button>
        <button
          class="large-btn blue-btn"
          @click="fnUpdate"
          v-if="editMode == 'update' && pageAuth.mdfcnAuthrtYn == 'Y'"
        >
          수정
        </button>
      </div>
      <div class="gd-1">
        <button class="large-btn gray-btn" @click="fnList">취소</button>
      </div>
    </div>
  </div>
</template>

<script>
// api
import {
  adminJoinProc,
  findByMbr,
  updateAdmProc,
  idDupProc,
  emlDupProc
} from "../../../../../resources/api/mbrInfo";

import { findAdminAuthority } from "../../../../../resources/api/authrt.js"
export default {
  data() {
    return {
      // 페이지 권한 객체
      pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,

      // id
      pageId: this.$route.query.pageId,

      // 글 작성 모드
      // create - 등록 (기본)
      // update - 수정
      editMode: "create",

      // 상세조회 정보 담는 객체
      mberVO: {
        mbrId: this.pageId,
        lgnId: null,
        mbrEncptFlnm: null,
        mbrEncptPswd: null,
        authrtId: null,
        ogdpInstNm: null,
        mbrEncptEmad: null,
      },

      pswd: {
        newPswd: null,
        newPswdChk: null,
      },
      errorPwd: null,
      pswdChk: null,
      email: {
        id: null,
        select: "",
        address: null,
      },

      //아이디 중복검사 여부
      isIdDupCheck: false,
      //이메일 중복검사 여부
      isEmlDupCheck: false,
      //권한리스트
      authorityList: []
    };
  },
  created() {
    // pageId 확인
    if (this.pageId != null) {
      this.editMode = "update";
      this.fnViewDetail();
    }

    //권한리스트 불러오기
    this.adminAuthorityList();
  },
  methods: {
    // 등록
    fnInsert() {
      // 유효성검사
      if (this.valiadtion() == false) {
        return;
      }

      //등록(공통메세지)
      if(!confirm(this.$getCmmnMessage("cnf003"))) return

      // 데이터 세팅
      const data = { ...this.mberVO };
      // 비밀번호 추가
      data.mbrEncptPswd = this.pswd.newPswd;
      // 이메일 합체
      data.mbrEncptEmad = this.emailSum();
      this.axiosInsert(data);
    },

    // 조회(상세)
    fnViewDetail() {
      this.axiosViewDetail();
    },

    // 수정
    fnUpdate() {
      // 유효성검사
      if (this.valiadtion() == false) {
        return;
      }

      // 데이터 세팅
      const data = this.mberVO;
      // 이메일 합체
      data.mbrEncptEmad = this.emailSum();
      
      if(JSON.stringify(data) === JSON.stringify(this.originalAdminData)) {
        alert("수정된 정보가 없습니다.");
        return;
      } else {
        //수정(공통메세지)
        if(!confirm(this.$getCmmnMessage("cnf004"))) return;
        else this.axiosUpdate(data);
      }
    },

    // 목록
    fnList() {
      if (!confirm(this.$getCmmnMessage('cnf008'))) return;
      this.$router.push({
        name: "admAdminManagementSelectList"
      });
    },

    //아이디중복 검사
    fnIdDuplication() {
      //유효성검사
      if(!this.idValidation()) {
        this.$refs.lgnId.focus()
        return;
      } else {
        this.axiosIdDuplication();
      }
    },

    //이메일 중복 검사
    fnEmlDuplication() {
      //유효성검사
      let email = this.emailSum();
      if (!this.mailValidation(email)) {
        return;
      } else {
        this.axiosEmlDuplication(email);
      }
    },

    //아이디 유효성 검사
    idValidation: function () {
      // 아이디 입력 여부
      this.mberVO.lgnId = this.mberVO.lgnId != null ? this.mberVO.lgnId.trim() : null
      if (this.$isEmpty(this.mberVO.lgnId)) {
        alert("아이디를 입력해주세요.");
        this.$refs.lgnId.focus();
        return false;
      }

      // 아이디 길이
      if (this.mberVO.lgnId.length < 5) {
        alert("아이디는 5자 이상으로 입력해주세요.");
        this.$refs.lgnId.focus();
        return false;
      }

      if (this.mberVO.lgnId.length > 20) {
        alert("아이디는 20자 이하로 입력해주세요.");
        this.$refs.lgnId.focus();
        return false;
      }

      // 아이디 영어와 숫자만 사용 여부
      this.mberVO.lgnId = this.mberVO.lgnId ? this.mberVO.lgnId.trim() : null
      if (!this.$idCheck(this.mberVO.lgnId)) {
        alert("아이디는 한개 이상의 소문자 알파벳, 숫자, 특수기호(_),(-)만 사용 가능합니다.")
        this.$refs.lgnId.focus()
        return false;
      }

      return true;
    },

    //이메일 유효성 검사
    mailValidation: function (email) {
        //1.null검사
        this.email.id = this.email.id ? this.email.id.trim() : null
        if (this.$isEmpty(this.email.id)) {
            alert('이메일 ID를 입력해주세요.');
            this.$refs.emailId.focus()
            return false;
        }
        // 이메일 선택 여부
        if (this.$isEmpty(this.email.select)) {
          alert("도메인을 선택하세요.");
          this.$refs.emailSelect.focus();
          return false;
        }
        // 이메일 직접입력 입력 여부
        if (this.email.select == "self") {
          this.email.address = this.email.address ? this.email.address.trim() : null
          if (this.$isEmpty(this.email.address)) {
            alert("도메인을 입력해주세요.");
            this.$refs.emailAddress.focus();
            return false;
          }
        }
        
        //2.정규식 검사
        if (!this.$email(email)) {
            alert('이메일 형식을 확인해 주세요.');
            this.$refs.emailId.focus()
            return false;
        }
        return true;
    },

    // 비밀번호 유효성 검사
    pswdValiadtion() {
      if (this.$isEmpty(this.pswd.newPswd)) {
          alert("비밀번호를 입력해주세요.")
          this.$refs.newPswd.focus();
          return false;
      } else if (this.$isEmpty(this.pswd.newPswdChk)) {
          alert("비밀번호 확인을 입력해주세요.")
          this.$refs.newPswdChk.focus();
          return false;
      } else if (this.pswd.newPswd !== this.pswd.newPswdChk) {
          alert("비밀번호가 불일치합니다.");
          this.$refs.newPswd.focus();
          return false;
      } else if (!this.$pwCheck(this.pswd.newPswd)) {
          alert('비밀번호는 영문, 숫자, 특수문자를 포함한 6~20자이어야 합니다.')
          this.$refs.newPswd.focus();
          return false;
      }
      return true;
    },

    // 유효성 검사
    valiadtion() {

      //아이디 중복검사 여부
      if(this.editMode === 'create') {
        if(this.isIdDupCheck === false) {
          alert("ID중복검사를 완료해주세요.")
          this.$refs.lgnId.focus()
          return false;
        }
      }

      if(!this.idValidation()) return;

      // 아이디 영어와 숫자만 사용 여부
      this.mberVO.lgnId = this.mberVO.lgnId ? this.mberVO.lgnId.trim() : null
      if(!this.$idCheck(this.mberVO.lgnId)) {
          alert("아이디는 5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.")
          this.$refs.lgnId.focus()
          return;
      }

      // 이름 입력 여부
      this.mberVO.mbrEncptFlnm = this.mberVO.mbrEncptFlnm != null ? this.mberVO.mbrEncptFlnm.trim() : null
      if(this.$isEmpty(this.mberVO.mbrEncptFlnm)) {
        alert("이름을 입력해주세요.");
        this.$refs.mbrNm.focus();
        return false;
      }

      //이름 한글,영문 체크
      if(!this.$checkName(this.mberVO.mbrEncptFlnm)) {
        alert("성명에는 한글, 영문만 포함할 수 있습니다.")
        this.$refs.mbrNm.focus()
        return false;
      }

      if(this.editMode === 'create') {
        // 비밀번호 유효성 검사
        if(!this.pswdValiadtion()) return false;
      }
      
      //권한 유효성 검사
      if(this.$isEmpty(this.mberVO.authrtId)) {
        alert("권한을 선택해주세요.")
        return false;
      }

      // 소속기관 유효성 검사
      if(this.$isEmpty(this.mberVO.ogdpInstNm)) {
        alert("소속기관을 입력해주세요.")
        return false;
      }

      //이메일 변경사항 없으면 중복검사 true
      if(this.originalEmailId === this.email.id &&
        this.originalEmailSelect === this.email.select &&
        this.originalEmailAddress === this.email.address) this.isEmlDupCheck = true;

      // if(JSON.stringify(this.originalEmail) === JSON.stringify(this.email)) this.isEmlDupCheck = true;

      //이메일 중복검사 여부
      if(this.isEmlDupCheck === false) {
          alert("이메일 중복검사를 완료해주세요.")
          this.$refs.emailId.focus()
          return false;
      }

      let email = this.emailSum();
      //이메일 유효성 검사
      if(!this.mailValidation(email)) return false;
      
      return true;
    },

    // 이메일 합체
    emailSum() {
      if (this.email.select != "self") {
        return this.email.id + "@" + this.email.select;
      } else {
        return this.email.id + "@" + this.email.address;
      }
    },

    // 이메일 분리
    emailSplit(data) {
      const email = data.mbrEncptEmad.split("@");
      this.email.id = email[0];
      switch (email[1]) {
        case "naver.com":
        case "google.com":
        case "hanmail.net":
        case "nate.com":
        case "kakao.com":
          this.email.select = email[1];
          break;
        default:
          this.email.select = "self";
          this.email.address = email[1];
          break;
      }
    },

    // 비밀번호 검증
    pswdCheck() {
      if (!this.$isEmpty(this.pswd.newPswd)) {
        if (
          !this.$pwCheck(this.pswd.newPswd) ||
          !this.pswd.newPswd ||
          this.pswd.newPswd.length < 9 ||
          this.pswd.newPswd.length > 20
        ) {
          this.errorPwd = true;
        } else if (!this.$isEmpty(this.pswd.newPswd)) {
          this.errorPwd = false;
        }
      } else {
        this.errorPwd = null;
      }
    },

    //아이디 중복 검사
    async axiosIdDuplication() {
      // 데이터 세팅
      const data = this.mberVO;
      // 실행
      this.$store.commit('setLoading', true);
      try {
        const response = await idDupProc(data);

        // axios 결과
        alert(response.data.message);

        if(response.data.success) this.isIdDupCheck = true;
      } catch (error) {
        const errorData = error.response.data;
        if (errorData.message != null && errorData.message != "") {
          alert(error.response.data.message);
        } else {
          // alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
          alert(this.$getCmmnMessage('err005'));
        }
      } finally {
        this.$store.commit('setLoading', false);
      }
    },

    //이메일 중복 검사
    async axiosEmlDuplication(email) {
      // 데이터 세팅
      const data = {'mbrEncptEmad' : email};

      // 실행
      this.$store.commit('setLoading', true);
      try {
        const response = await emlDupProc(data);

        // axios 결과
        alert(response.data.message);
        if(response.data.success) this.isEmlDupCheck = true;

      } catch (error) {
        const errorData = error.response.data;
        if (errorData.message != null && errorData.message != "") {
          alert(error.response.data.message);
        } else {
          // alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
          alert(this.$getCmmnMessage('err005'));
        }
      } finally {
        this.$store.commit('setLoading', false);
      }
    },
    // axios: 등록
    async axiosInsert(data) {
      this.$store.commit('setLoading', true);
      try {
        const response = await adminJoinProc(data);

        alert(this.$getCmmnMessage('msg001'));

        const mbrId = response.data.data;
        if (response.status == 200) {
          this.$router.push({
            name: "admAdminManagementSelectOne",
            query: {
              pageId: mbrId,
            },
          });
        }
      } catch (error) {
        const errorData = error.response.data;
        if (errorData.message != null && errorData.message != "") {
          alert(error.response.data.message);
        } else {
          // alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
          alert(this.$getCmmnMessage('err005'));
        }
      } finally {
        this.$store.commit('setLoading', false);
      }
    },
    // axios: 조회(상세)
    async axiosViewDetail() {
      // 데이터 세팅
      const data = { mbrId: this.pageId };
      // 실행
      try {
        const response = await findByMbr(data);

        // 객체 삽입
        this.mberVO = response.data.data;
        this.emailSplit(response.data.data);

        if(this.editMode === 'update') {
          this.originalAdminData = Object.assign({}, response.data.data);
          this.originalEmailId = this.email.id;
          this.originalEmailSelect = this.email.select;
          this.originalEmailAddress = this.email.address
        }

      } catch (error) {
        const errorData = error.response.data;
        if (errorData.message != null && errorData.message != "") {
          alert(error.response.data.message);
        } else {
          // alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
          alert(this.$getCmmnMessage('err005'));
        }
      }
    },
    // axios: 수정
    async axiosUpdate(data) {
      this.$store.commit('setLoading', true);
      try {
        const response = await updateAdmProc(data);

        alert(this.$getCmmnMessage('msg002'));

        if (response.status == 200) {
          this.$router.push({
            name: "admAdminManagementSelectOne",
            query: {
              'pageId': this.pageId,
            },
          });
        }
      } catch (error) {      
        const errorData = error.response.data;
        if (errorData.message != null && errorData.message != "") {
          alert(error.response.data.message);
        } else {
          // alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
          alert(this.$getCmmnMessage('err005'));
        }
      } finally {
        this.$store.commit('setLoading', false);
      }
    },

    async adminAuthorityList() {
      try {
        const response = await findAdminAuthority();

        this.authorityList = response.data.data;
      } catch(error) {
        const errorData = error.response.data;
        if (errorData.message != null && errorData.message != "") {
          alert(error.response.data.message);
        } else {
          // alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
          alert(this.$getCmmnMessage('err005'));
        }
      }
    },
  },
  watch: {
    "pswd.newPswd"() {
      this.pswdCheck();
    },
  },
  computed: {},
  components: {},
  mounted() {},
};
</script>