<template>
  <div class="content  overflow-y admin-style">
    <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>
              <div class="gd-12 pl0">
                <label for="" class="form-title mb10">아이디</label>
                <input type="text" class="full-input" v-model="mberVO.lgnId" disabled />
              </div>
            </td>
            <td>
              <div class="gd-12 pr0">
                <label for="" class="form-title mb10">이름</label>
                <input type="text" class="full-input" v-model="mberVO.mbrEncptFlnm" disabled />
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="gd-12 pl0">
                <label for="" class="form-title  mb10">
                  전화번호
                </label>
                <input type="text" class="full-input" v-model="mberVO.mbrEncptTelno" disabled />
              </div>
            </td>
            <td>
              <div class="gd-12 pr0">
                <label for="" class="form-title mb10">이메일</label>
                <input type="text" class="full-input" v-model="mberVO.mbrEncptEmad" disabled />
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="gd-12 pl0">
                <label for="" class="form-title mb10">가입일</label>
                <input type="text" class="full-input" v-model="mberVO.frstRegDt" disabled />
              </div>
            </td>
            <td>
              <div class="gd-12 pr0">
                <label for="" class="form-title mb10 ">권한</label>
                <select name="authority" id="authority" class="block" disabled>
                  <option value="">일반회원</option>
                  <option value="">케리스 관리자</option>
                </select>
              </div>
            </td>
          </tr>
          <!-- <tr> -->
          <!-- <td>
              <div class="gd-12 pr0">
                <div class="flex">
                  <div 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="mberVO['smsRcptnAgreYn']"
                          value="Y"
                          disabled
                        />
                        <label for="smsY">수신</label>
                      </div>
                      <div class="gd-4">
                        <input
                          type="radio"
                          name="smsRcptnAgreYn"
                          id="smsN"
                          class="mr5"
                          v-model="mberVO['smsRcptnAgreYn']"
                          value="N"
                          disabled
                        />
                        <label for="smsN">미수신</label>
                      </div>
                    </div>
                  </div>
                  <div 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="mberVO['emlRcptnAgreYn']"
                          value="Y"
                          disabled
                        />
                        <label for="y">수신</label>
                      </div>
                      <div class="gd-4">
                        <input
                          type="radio"
                          name="emlRcptnAgreYn"
                          id="n"
                          class="mr5"
                          v-model="mberVO['emlRcptnAgreYn']"
                          value="N"
                          disabled
                        />
                        <label for="n">미수신</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </td> -->
          <!-- </tr> -->
          <!-- <tr>
            <td>
              <div class="gd-12 pl0">
                <label for="" class="form-title point-font2 mb10">
                  우편번호
                </label>
                <input
                  type="text"
                  class="full-input"
                  v-model="mberVO['zip']"
                  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="mberVO['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="mberVO['daddr']"
                  disabled
                />
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="flex">
                <div class="gd-3 pl0">
                  <label for="" class="form-title point-font2 mb10">
                    회원상태
                  </label>
                  <select
                    class="full-select"
                    v-model="mberVO['mbrStts']"
                    disabled
                  >
                    <option value="1">승인</option>
                    <option value="2">승인대기</option>
                    <option value="0">탈퇴</option>
                    <option value="3">차단</option>
                  </select>
                </div>
                <div class="gd-3">
                  <label for="" class="point-font2 mb10">차단일</label>
                  <input
                    type="date"
                    class="full-input"
                    v-model="mberVO['cntrlDt']"
                    disabled
                  />
                </div>
                <div class="gd-6 pr0">
                  <label for="" class="form-title point-font2 mb10">
                    차단 사유
                  </label>
                  <input
                    type="text"
                    class="full-input"
                    v-model="mberVO['cntrlRsn']"
                    disabled
                  />
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="gd-12 pl0 pr0">
                <label for="" class="form-title point-font2 mb10">
                  사용자 권한
                </label>
                <div>
                  <div
                    v-for="(auth, index) of mberVO['authorList']"
                    :key="index"
                    class="inline-block mr5"
                  >
                    <span>{{ auth["authrtNm"] }}</span
                    ><span>,</span>
                  </div>
                </div>
              </div>
            </td>
          </tr> -->
        </table>
      </div>
    </details>
    <div class="flex justify-end align-center">
      <div class="gd-1 pr0">
        <button class="large-btn gray-border-btn" @click="fnList">목록</button>
      </div>
      <div class="gd-1 pr0">
        <button class="large-btn red-border-btn" @click="fnWithdraw" v-if="pageAuth.delAuthrtYn == 'Y'">
          회원 탈퇴
        </button>
      </div>
      <!--  <div class="gd-1">
       <button class="large-btn green-border-btn"
         @click="fnUpdate"
         v-if="pageAuth.mdfcnAuthrtYn == 'Y'"
        >
          권한 변경
        </button> 
      </div>-->
    </div>
  </div>
</template>

<script>
// api
import { mdiTempleBuddhist } from "@mdi/js";
import { findByMbr, withdrawProc } from "../../../../../resources/api/mbrInfo";

export default {
  data() {
    return {
      // 페이지 권한 객체
      pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,

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

      // 상세조회 정보 담는 객체
      mberVO: {},

    };
  },
  created() {
    // 조회(상세)
    this.fnViewDetail();
  },
  methods: {
    // 목록
    fnList() {
      this.$router.push({
        name: "admUserManagementSelectList",
      });
    },
    // 조회(상세)
    fnViewDetail() {
      this.axiosViewDetail();
    },
    // 삭제
    fnWithdraw() {
      if (confirm(this.$getCmmnMessage("cnf002"))) {
        this.axiosWithdraw();
      } else {
        return;
      }
    },

    // 휴대폰번호 표기 변환
    mblTelnoSplit(data) {
      const mblTelno = data.mbrEncptTelno;
      const start = mblTelno.substring(0, 3);
      const middle = mblTelno.substring(3, mblTelno.length - 4);
      const end = mblTelno.substring(mblTelno.length - 4, mblTelno.length);
      return (this.mberVO.mbrEncptTelno = start + "-" + middle + "-" + end);
    },

    // axios: 조회(상세)
    async axiosViewDetail() {
      // 데이터 세팅
      const data = { mbrId: this.pageId };
      // 실행
      try {
        const response = await findByMbr(data);

        // 객체 삽입
        this.mberVO = response.data.data;
        this.mblTelnoSplit(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'));
        }
      }
    },

    // axios: 회원탈퇴
    async axiosWithdraw() {
      // 데이터 세팅
      delete this.mberVO.authorities
      let data = this.mberVO;
      // 실행
      try {
        const response = await withdrawProc(data);

        // axios 결과
        alert(this.$getCmmnMessage('msg005', '회원탈퇴가 '));
        // 목록
        this.fnList();
      } 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'));
        }
      }
    },

    // 수정페이지 이동
    fnUpdate() {
      this.$router.push({
        name: "admUserManagementUpdate",
        query: { pageId: this.pageId },
      });
    },
  },
  watch: {},
  computed: {},
  components: {},
  mounted() { },
};
</script>
