<template>


    <label class="form-title"><span v-if="editMode != 'view'">*</span> 사용자 권한</label>
    <div :class="{'form-group':editMode != 'view'}">
      <button  v-show="editMode != 'view'" class="btn sm ico-plus-w auth-btn" @click="fnAuthAddModalOpen">권한 추가</button>
      <template v-if="mbrVO.authorList != null && mbrVO.authorList != []">
          <div class="auth-list">
            <div v-for="(auth, index) of mbrVO.authorList" :key="index"
              :class="{
                'auth-itme':true,
                'layout': editMode != 'view',
                'ml10': index != 0,
              }"
            >
              <p>{{ auth.authrtNm }}</p>
              <button
                v-show="editMode != 'view'"
                class="btn-ico sm ico-close"
                @click="fnAuthDelete(index)"
              >
                <!-- <svg-icon type="mdi" :width="15" :height="15" :path="path"></svg-icon> -->
              </button>
            </div>
          </div>
      </template>
      <template v-else>
        <p class="data-none">등록된 정보가 존재하지 않습니다.</p>
      </template>
    </div>


  <Modal :showModal="editMode != 'view' && isOpen">
    <template v-slot:header>
      <div class="modal-title">
        <p>사용자 권한 목록</p>
      </div>
      <button class="btn-close" @click="fnAuthAddModalClose"></button>
    </template>

    <div class="tbl-wrap">
      <table class="tbl data">
        <colgroup>
          <col style="width: 70%" />
          <col style="width: 30%" />
        </colgroup>
        <thead>
          <tr>
            <th>권한명</th>
            <th>비고</th>
          </tr>
        </thead>
        <tbody>
          <template v-if="userAuthorList.length > 0">
            <tr v-for="(authrt, index) of userAuthorList" :key="index">
              <td>{{ authrt["authrtNm"] }}</td>
              <td>
                <button
                  type="button"
                  :class="{
                    'large-btn': true,
                    'blue-btn': pageRole == 'adm',
                    'green-btn': pageRole == 'portal',
                  }"
                  @click="fnAuthSelect(authrt)"
                >
                  선택
                </button>
              </td>
            </tr>
          </template>
          <template v-else>
            <tr>
              <td colspan="2" class="text-ct data-none">
                등록된 정보가 존재하지 않습니다.
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
    <template v-slot:footer></template>
  </Modal>
</template>

<script>
import { mdiClose } from "@mdi/js";

// COMPONENT
import Modal from "../modal/Modal.vue";

// API
import { findAllSystem } from "../../../resources/api/author";

export default {
  components: { Modal },
  props: {
    mbrVO: {
      type: Object,
    },
    editMode: {
      type: String,
      default: "insert",
    },
  },
  data() {
    return {
      path: mdiClose,

      pageRole: this.$store.state.userType, // 유저 권한

      isOpen: false,
      originalList: [],
      userAuthorList: [],
    };
  },
  created() {
    this.fnAuthViewList();
  },
  methods: {
    // axios: 사용자권한 목록 조회
    async fnAuthViewList() {
      try {
        const response = await findAllSystem();
        this.originalList = response.data.data;
      } catch (error) {
        alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
      }
    },
    // 사용자권한 선택
    fnAuthSelect(authrt) {
      this.mbrVO.authorList.push({
        mbrId: this.mbrVO.mbrId,
        authrtNm: authrt.authrtNm,
        authrtCd: authrt.authrtCd,
        rgtr: null,
        regDt: null,
      });
      this.fnAuthAddModalClose();
    },

    // 사용자 권한 추가 모달 열기
    fnAuthAddModalOpen() {
      this.fnAuthFilter();
      this.isOpen = true;
    },
    // 사용자권한 제거
    fnAuthFilter() {
      let list = this.originalList;
      for (let authrt of this.mbrVO.authorList) {
        list = list.filter((item) => item.authrtCd !== authrt.authrtCd);
      }
      this.userAuthorList = list;
    },

    // 사용자권한 추가 모달 닫기
    fnAuthAddModalClose() {
      this.isOpen = false;
    },

    // 사용자권한 삭제
    fnAuthDelete(index) {
      if (this.mbrVO.authorList.length < 2) {
        alert("사용자 권한은 최소 1개 이상 존재해야 합니다.");
        return;
      }
      this.mbrVO.authorList.splice(index, 1);
    },
  },
};
</script>