<template>
  <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>
            <div class="gd-12 pl0">
              <label for="" class="form-title point-font2 mb10">아이디</label>
              <input
                type="text"
                class="full-input"
                v-model="mbrVO.lgnId"
                disabled
              />
            </div>
          </td>
          <td>
            <div class="gd-12 pr0">
              <label for="" class="form-title point-font2 mb10">이름</label>
              <input
                type="text"
                class="full-input"
                v-model="mbrVO.mbrNm"
                disabled
              />
            </div>
          </td>
        </tr>
        <tr v-if="showOpt.isMblNo || showOpt.isTelNo">
          <td>
            <div v-if="showOpt.isMblNo" class="gd-12 pl0">
              <label for="" class="form-title point-font2 mb10">
                휴대폰번호
              </label>
              <input
                type="text"
                class="full-input"
                v-model="mbrVO.mblTelno"
                disabled
              />
            </div>
          </td>
          <td>
            <div v-if="showOpt.isTelNo" class="gd-12 pr0">
              <label for="" class="point-font2 mb10">전화번호</label>
              <input
                type="text"
                class="full-input"
                v-model="mbrVO.telno"
                disabled
              />
            </div>
          </td>
        </tr>
        <tr v-if="showOpt.isEml || showOpt.isSmsAgree || showOpt.isEmlAgree">
          <td>
            <div v-if="showOpt.isEml" class="gd-12 pl0">
              <label for="" class="form-title point-font2 mb10">이메일</label>
              <div class="flex align-center">
                <div class="gd-3 pl0">
                  <input
                    type="text"
                    class="full-input"
                    v-model="email.id"
                    disabled
                  />
                </div>
                <div>@</div>
                <div class="gd-3">
                  <select class="full-select" v-model="email.select" disabled>
                    <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-3" v-show="email.select == 'self'">
                  <input
                    type="text"
                    class="full-input"
                    v-model="email.address"
                    disabled
                  />
                </div>
              </div>
            </div>
          </td>
          <td>
            <div class="gd-12 pr0">
              <div class="flex">
                <div v-if="showOpt.isSmsAgree" class="gd-6 pl0 pr0">
                  <label for="" class="form-title point-font2 mb10">
                    문자수신
                  </label>
                  <div class="flex align-center no-gutters">
                    <div class="gd-4">
                      <input
                        type="radio"
                        name="smsRcptnAgreYn"
                        id="smsY"
                        class="mr5"
                        v-model="mbrVO.smsRcptnAgreYn"
                        value="Y"
                        disabled
                      />
                      <label for="smsY">수신</label>
                    </div>
                    <div class="gd-4">
                      <input
                        type="radio"
                        name="smsRcptnAgreYn"
                        id="smsN"
                        class="mr5"
                        v-model="mbrVO.smsRcptnAgreYn"
                        value="N"
                        disabled
                      />
                      <label for="smsN">미수신</label>
                    </div>
                  </div>
                </div>
                <div v-if="showOpt.isEmlAgree" class="gd-6 pl0 pr0">
                  <label for="" class="form-title point-font2 mb10">
                    이메일수신
                  </label>
                  <div class="flex align-center no-gutters">
                    <div class="gd-4">
                      <input
                        type="radio"
                        name="emlRcptnAgreYn"
                        id="y"
                        class="mr5"
                        v-model="mbrVO.emlRcptnAgreYn"
                        value="Y"
                        disabled
                      />
                      <label for="y">수신</label>
                    </div>
                    <div class="gd-4">
                      <input
                        type="radio"
                        name="emlRcptnAgreYn"
                        id="n"
                        class="mr5"
                        v-model="mbrVO.emlRcptnAgreYn"
                        value="N"
                        disabled
                      />
                      <label for="n">미수신</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <template v-if="showOpt.isAddr">
          <tr>
            <td>
              <div class="gd-12 pl0">
                <label for="" class="form-title point-font2 mb10">
                  우편번호
                </label>
                <div class="flex align-center">
                  <div class="gd-10 pl0 pr0">
                    <input
                      type="text"
                      class="full-input"
                      v-model="mbrVO.zip"
                      disabled
                    />
                  </div>
                </div>
              </div>
            </td>
            <td>
              <div class="gd-12 pr0">
                <label for="" class="form-title point-font2 mb10">주소</label>
                <input
                  type="text"
                  class="full-input"
                  v-model="mbrVO.addr"
                  disabled
                />
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="gd-12 pl0 pr0">
                <label for="" class="form-title point-font2 mb10">
                  상세주소
                </label>
                <input
                  type="text"
                  class="full-input"
                  v-model="mbrVO.daddr"
                  disabled
                />
              </div>
            </td>
          </tr>
        </template>
        <tr v-if="showOpt.isStts && pageRole == 'adm'">
          <td>
            <div class="flex gd-12 pl0">
              <div class="gd-6 pl0">
                <label for="" class="form-title point-font2 mb10">
                  회원상태
                </label>
                <select class="full-select" v-model="mbrVO.mbrStts" disabled>
                  <option value="1">승인</option>
                  <option value="2">승인대기</option>
                  <option value="0">탈퇴</option>
                  <option value="3">차단</option>
                </select>
              </div>
              <div class="gd-6 pr0">
                <label for="" class="point-font2 mb10">차단일</label>
                <input
                  type="date"
                  class="full-input"
                  v-model="mbrVO.cntrlDt"
                  disabled
                />
              </div>
            </div>
          </td>
          <td>
            <div class="gd-12 pr0">
              <label for="" class="point-font2 mb10">차단 사유</label>
              <input
                type="text"
                class="full-input"
                v-model="mbrVO.cntrlRsn"
                disabled
              />
            </div>
          </td>
        </tr>
        <tr v-if="showOpt.isAuthor && pageRole == 'adm'">
          <td colspan="2">
            <UserAuthorList :mbrVO="mbrVO" editMode="view" />
          </td>
        </tr>
      </table>
    </div>
  </details>

  <div class="flex justify-end align-center no-gutters">
    <div v-if="pageRole == 'adm'" class="gd-1 mr10">
      <button class="large-btn gray-border-btn" @click="fnList">목록</button>
    </div>
    <div class="gd-1 mr10">
      <button
        v-if="pageAuth.mdfcnAuthrt == 'Y'"
        :class="{
          'large-btn': true,
          'blue-border-btn': pageRole == 'adm',
          'green-border-btn': pageRole == 'government',
        }"
        @click="fnUpdate"
      >
        수정
      </button>
    </div>
    <div v-if="pageRole == 'adm' && pageAuth.delAuthrt == 'Y'" class="gd-1">
      <button class="large-btn red-border-btn" @click="fnDelete">삭제</button>
    </div>
  </div>
</template>

<script>
// RESOURCES
import {
  defaultAdminInfoParams,
  defaultUserInfoParams,
} from "../../../resources/js/defaultUserInfoParams";

// COMPONENT
import UserAuthorList from "./UserAuthorList.vue";

// API
import { mbrDetailProc } from "../../../resources/api/mbrInfo";
import { mbrDeleteProc } from "../../../resources/api/mbrInfo";

export default {
  components: { UserAuthorList },
  props: {
    pageId: {
      type: String,
    },
    pageNm: {
      type: String,
      default: "user",
    },
  },
  data() {
    return {
      pageRole: this.$store.state.userType, // 유저 권한
      pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth, // 페이지 권한

      mbrVO: {},
      showOpt: { ...defaultUserInfoParams }, // 유저정보 표시 여부 객체
      email: {
        id: null,
        select: "",
        address: null,
      },
    };
  },
  created() {
    this.fnMbrViewDetail();
    if (this.pageNm == "adm" && this.pageRole == "adm") {
      this.showOpt = defaultAdminInfoParams;
    }
  },
  computed: {
    routerPaths() {
      return {
        list: this.$store.state.path + "/list.page",
        view: this.$store.state.path + "/view.page",
        insert: this.$store.state.path + "/insert.page",
      };
    },
  },
  methods: {
    // axios: 조회(상세)
    async fnMbrViewDetail() {
      // 데이터 세팅
      const data = { mbrId: this.pageId };
      // 실행
      try {
        const response = await mbrDetailProc(data);
        if (this.pageRole == "government") {
          for (let author of response.data.data.authorList) {
            if (author.authrtCd == "ROLE_ADMIN") {
              this.showOpt = defaultAdminInfoParams;
            }
          }
        }
        this.mbrVO = response.data.data;
        this.changeFormat(); // 휴대폰번호, 전화번호, 이메일 표기변경
      } catch (error) {
        alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
      }
    },

    // 표기변경
    changeFormat() {
      // 휴대폰 번호
      if (this.mbrVO.mblTelno != null) {
        this.mbrVO["mblTelno"] = this.telnoReplace(this.mbrVO.mblTelno);
      }
      // 전화번호
      if (this.mbrVO.telno != null) {
        this.mbrVO["telno"] = this.telnoReplace(this.mbrVO.telno);
      }
      // 이메일
      if (this.mbrVO.eml != null) {
        const email = this.mbrVO.eml.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;
        }
      }
    },
    // 번호 표기변경(2,3-3,4-4)
    telnoReplace(data) {
      const number = data.replace(/[^0-9]/g, "");
      return number.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
    },

    // 목록
    fnList() {
      this.$router.push({
        path: this.routerPaths.list,
      });
    },

    // 수정
    fnUpdate() {
      this.$router.push({
        path: this.routerPaths.insert,
        query: { pageId: this.pageId },
      });
    },

    // 삭제
    async fnDelete() {
      var isDelete = confirm("해당 회원 정보를 삭제하시겠습니까?");
      if (!isDelete) {
        return;
      }
      // 데이터 세팅
      let data = this.mbrVO;
      // 실행
      try {
        const response = await mbrDeleteProc(data);
        alert(response.data["message"]);
        this.fnList();
      } catch (error) {
        alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
      }
    },
  },
};
</script>
