<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"
                  :value="mberVO.lgnId"
                  disabled
                />
              </div>
            </td>
            <td>
              <div class="gd-12 pr0">
                <label for="" class="form-title mb10">이름</label>
                <input
                  type="text"
                  class="full-input"
                  :value="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"
                  :value="mberVO.mbrEncptTelno"
                  disabled
                />
              </div>
            </td>
            <td>
              <div class="gd-12 pr0">
                <label for="" class="form-title mb10">이메일</label>
                <input
                  type="text"
                  class="full-input"
                  :value="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"
                  :value="mberVO.frstRegDt"
                  disabled
                />
              </div>
            </td>
            <td>
              <div class="gd-12 pr0">
                <label for="" class="form-title 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>
          </tr>
        </table>
      </div>
    </details>
    <div class="flex justify-end align-center no-gutters">
      <div class="gd-1 mr10">
        <button class="large-btn gray-border-btn" @click="revoke">취소</button>
      </div>
      <div class="gd-1">
        <button class="large-btn green-border-btn"
         @click="userAuthUpdate"
         v-if="pageAuth.mdfcnAuthrtYn == 'Y'">
          수정
        </button>
      </div>
    </div>
  </div>
</template>

<script>
// api
import { findByMbr, updateUserAuth } 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,
           // 상세조회 정보 담는 객체
           mberVO: {},
           //권한리스트
           authorityList: []
    };
  },
  created() {
    this.fnViewDetail();
    this.adminAuthorityList();
  },
  methods: {
    // 조회(상세)
    fnViewDetail() {
      this.axiosViewDetail();
    },

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

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

    //관리자 권한 목록 조회
    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'));
        }
      }
    },

    // 휴대폰번호 표기 변환
    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);
    },

    // 취소
    revoke(){
      if(!confirm(this.$getCmmnMessage("cnf007"))) return
      
      this.$router.push({
        name: "admUserManagementSelectOne",
        query: { pageId: this.pageId }
      });
    },

    // 수정
    async userAuthUpdate() {
      //1.권한 선택 유무 검사
      if(!this.mberVO.authrtId){
        alert("권한을 선택해주세요.")
        return
      }
      //2.confirm
      if(!confirm(this.$getCmmnMessage("cnf009","해당 유저의 권한을 "))) return

      let data = {
        'mbrId' : this.mberVO.mbrId,
        'authrtId' : this.mberVO.authrtId
      }
      try {
        const res = await updateUserAuth(data);
        if(res.status == 200){
          alert("성공적으로 권한을 변경하였습니다.");
          this.goAdminList()
        }
      } 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'));
        }
      }
    },

    //관리자목록페이지 이동
    goAdminList() {
      this.$router.push({
        name: "admAdminManagementSelectList",
      });
    }
  },
  watch: {},
  computed: {},
  components: {},
  mounted() {},
};
</script>
