<template>
    <div class="content-zone  sch-full">
      <div class="content">
        <div class="scroll">
          <div class="form-box">
              <div class="form-box-title">
                <p>기본정보</p>
              </div>
              <div class="form-content">
                <div class="layout">
                  <p class="form-title">아이디</p>
                  <p>{{ mbrVO.lgnId }}</p>
                  <!-- <input
                    type="text"
                    class="form-control sm"
                    v-model="mbrVO.lgnId"
                    disabled
                  /> -->
                </div>
                <div class="layout">
                  <p class="form-title">이름</p>
                  <p>{{ mbrVO.mbrNm }}</p>
                  <!-- <input
                    type="text"
                    class="form-control sm"
                    v-model="mbrVO.mbrNm"
                    disabled
                  /> -->
                </div>
                <template v-if="showOpt.isMblNo || showOpt.isTelNo">
                  <div v-if="showOpt.isMblNo" class="layout">
                    <p class="form-title">
                      휴대폰번호
                    </p>
                    <p>{{ mbrVO.mblTelno }}</p>
                    <!-- <input
                      type="text"
                      class="form-control sm"
                      v-model="mbrVO.mblTelno"
                      disabled
                    /> -->
                  </div>
                  <div v-if="showOpt.isTelNo" class="layout border-bottom">
                    <p class="form-title">전화번호</p>
                    <p>{{ mbrVO.telno }}</p>
                    <!-- <input
                      type="text"
                      class="form-control sm"
                      v-model="mbrVO.telno"
                      disabled
                    /> -->
                  </div>
                </template>
                <template v-if="showOpt.isEml || showOpt.isSmsAgree || showOpt.isEmlAgree">
                      <div v-if="showOpt.isEml"  class="layout">
                        <p class="form-title">이메일</p>
                        <div class="check-area">
                          <p>{{ email.address ? email.id + '@' + email.address : email.id + '@' + email.select }}</p>
                            <!-- <input
                              type="text"
                              class="form-control sm"
                              v-model="email.id"
                              disabled
                            />
                          <div>@</div>
                          <div v-show="email.select == 'self'">
                            <input
                              type="text"
                                class="form-control sm"
                              v-model="email.address"
                              disabled
                            />
                          </div>
                            <select class="form-select sm" 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>
         
                      <div v-if="showOpt.isSmsAgree"  class="layout">
                        <p class="form-title">
                          문자수신
                        </p>
                        <p>{{ mbrVO.smsRcptnAgreYn }}</p>
                        <!-- <div class="check-area">
                          <div class="form-check">
                            <input
                              type="radio"
                              name="smsRcptnAgreYn"
                              id="smsY"
                              class="mr5"
                              v-model="mbrVO.smsRcptnAgreYn"
                              value="Y"
                              disabled
                            />
                            <label for="smsY">수신</label>
                          </div>
                            <div class="form-check">
                              <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="layout">
                        <p class="form-title">
                          이메일수신
                        </p>
                        <p>{{ mbrVO.emlRcptnAgreYn }}</p>
                        <!-- <div class="check-area">
                          <div class="form-check">
                            <input
                              type="radio"
                              name="emlRcptnAgreYn"
                              id="y"
                              class="mr5"
                              v-model="mbrVO.emlRcptnAgreYn"
                              value="Y"
                              disabled
                            />
                            <label for="y">수신</label>
                          </div>
                          <div class="form-check">
                            <input
                              type="radio"
                              name="emlRcptnAgreYn"
                              id="n"
                              class="mr5"
                              v-model="mbrVO.emlRcptnAgreYn"
                              value="N"
                              disabled
                            />
                            <label for="n">미수신</label>
                          </div>
                        </div> -->
                      </div>
                  </template>
                  <template v-if="showOpt.isAddr">
        
                        <div  class="layout">
                          <p class="form-title">
                            우편번호
                          </p>
                          <p>{{ '(' + mbrVO.zip + ')'+ mbrVO.addr + mbrVO.daddr}}</p>
                          <!-- <input
                            type="text"
                            class="full-input"
                            v-model="mbrVO.zip"
                            disabled
                          /> -->
                        </div>
                        <!-- <div>
                          <label class="form-title">주소</label>
                          <input
                            type="text"
                            class="full-input"
                            v-model="mbrVO.addr"
                            disabled
                          />
                        </div> -->
             
                        <!-- <div>
                          <label for="" class="form-title">
                            상세주소
                          </label>
                          <input
                            type="text"
                            class="full-input"
                            v-model="mbrVO.daddr"
                            disabled
                          />
                        </div> -->
                  </template>
                  <template v-if="showOpt.isStts && pageRole == 'adm'">
            
                      <div  class="layout">
                          <p class="form-title">
                            회원상태
                          </p>
                          <p v-if="mbrVO.mbrStts  == 0">탈퇴</p>
                          <p v-else-if="mbrVO.mbrStts  == 1">승인</p>
                          <p v-else-if="mbrVO.mbrStts  == 2">승인대기</p>
                          <p v-else="mbrVO.mbrStts  == 3">차단</p>
                          <!-- <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="layout">
                          <p class="form-title">차단일</p>
                          <p>{{ mbrVO.cntrlDt }}</p>
                          <!-- <input
                            type="date"
                            class="full-input"
                            v-model="mbrVO.cntrlDt"
                            disabled
                          /> -->
                        </div>
                      <div  class="layout border-bottom">
                        <p  class="form-title">차단 사유</p>
                        <p>{{ mbrVO.cntrlRsn }}</p>
                        <!-- <input
                          type="text"
                          class="full-input"
                          v-model="mbrVO.cntrlRsn"
                          disabled
                        /> -->
                      </div>
                  </template>
                  <div v-if="showOpt.isAuthor && pageRole == 'adm'" class="layout grid-column">
                      <UserAuthorList :mbrVO="mbrVO" editMode="view" />
                  </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  <div class="btn-wrap">
    <template v-if="pageRole == 'adm'" class="gd-1 mr10">
      <button class="btn sm tertiary" @click="fnList">목록</button>
    </template>
      <button
        v-if="pageAuth.mdfcnAuthrt == 'Y'"
        :class="{
          'btn sm main': true,
        }"
        @click="fnUpdate"
      >
        수정
      </button>
    <template v-if="pageRole == 'adm' && pageAuth.delAuthrt == 'Y'" class="gd-1">
      <button class="btn sm red" @click="fnDelete">삭제</button>
    </template>
  </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",
    },
    pageTit: {
      type: String,
      required: true,
    },
  },
  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 == "portal") {
          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() {
      if (this.mbrVO.sysPvsnYn == 0) {
        alert("시스템에서 제공하는 정보는 삭제할 수 없습니다.");
        return;
      }
      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>
