<template>
  <div class="card ">
    <div class="card-body ">
      <h2 class="card-title">사용자 권한 관리</h2>
      <div class="flex align-top">
        <div class="sch-form-wrap search">
          <div class="tbl-wrap table-scroll">
            <table id="myTable" class="tbl data">
              <thead>
                <tr>
                  <th>권한 목록</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, idx) of lists" :key="idx" @click="findData(item.authorCode)">
                  <td :class="{ 'selected': selectedAuthor == item.authorCode, 'muted': item.useAt === 'N' }">{{ item.authorNm }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div class="sch-form-wrap title-wrap">
            <h3><img :src="h3icon" alt="">권한 정보</h3>
            <div class="buttons">
              <button type="button" class="btn sm tertiary" @click="fnResetForm">신규</button>
              <button type="button" class="btn sm secondary" v-if="!isEditMode" @click="fnSave">등록</button>
              <button type="button" class="btn sm secondary" v-else @click="fnUpdate">수정</button>
              <button type="button" class="btn sm btn-red" v-if="isEditMode" @click="fnDelete">삭제</button>
            </div>
          </div>
          <div class="tbl-wrap row g-3 pt-3 needs-validation detail">
            <div class="col-12">
              <label for="authorCode" class="form-label">
                <p>권한코드 <span class="require"><img :src="require" alt=""></span></p>
              </label>
              <input type="text" class="form-control" id="authorCode" v-model="data.authorCode" />
            </div>
            <div class="col-12">
              <label for="authorNm" class="form-label">
                <p>권한명 <span class="require"><img :src="require" alt=""></span></p>
              </label>
              <input type="text" class="form-control" id="authorNm" v-model="data.authorNm" />
            </div>
            <div class="col-12 chuljang ">
              <label for="prvonsh" class="form-label">권한설명</label>
              <textarea name="dc" id="dc" class="form-control" v-model="data.dc"></textarea>
            </div>
            <div class="col-12 border-x input-radio">
              <label for="prvonsh" class="form-label">
                <p>사용여부 <span class="require"><img :src="require" alt=""></span></p>
              </label>
              <div class="chk-area">
                <div class="form-check">
                  <input type="radio" name="useAt" id="useAtTrue" value="Y" v-model="data.useAt" :disabled="!hasAuthorCode">
                  <label for="useAtTrue">사용</label>
                </div>
                <div class="form-check">
                  <input type="radio" name="useAt" id="useAtFalse" value="N" v-model="data.useAt" :disabled="!hasAuthorCode">
                  <label for="useAtFalse">미사용</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// API
import { findAuthorsProc, saveAuthorProc, findAuthorProc, updateAuthorProc, deleteAuthorProc } from '../../../../resources/api/author'

export default {
  data() {
    return {
      require: "/client/resources/img/require.png",
      h3icon: "/client/resources/img/h3icon.png",

      isEditMode: false, // 수정 모드 여부
      selectedAuthor: null,

      initData: {
        authorCode: null, // 권한코드
        authorNm: null,   // 권한명
        dc: null,         // 권한설명
        useAt: "Y",       // 사용여부 (Y:사용-기본값 / N:미사용)
      },

      lists: [], // 권한 목록 정보
      data: {}, // 권한 상세 정보
    }
  },

  computed: {
    hasAuthorCode() {
      return !!(this.data?.authorCode);
    }
  },

  created() {
    this.fnReset(); // 데이터 초기화
  },

  mounted() {
    this.findList(); // 목록 조회
  },

  methods: {
    // 목록 조회
    async findList() {
      try {
        const response = await findAuthorsProc();
        const result = response.data.data;

        this.lists = result.authors;
      } catch (error) {
        if (error.response) {
          alert(error.response.data.message);
        } else {
          alert("에러가 발생했습니다.");
        }
        console.error(error.message);
      };
    },

    // 상세 조회 (권한 선택 시 실행)
    async findData(id) {
      try {
        this.selectedAuthor = id;

        const response = await findAuthorProc(id);
        const result = response.data.data;

        this.data = result.author;
        this.isEditMode = true; // 수정 모드로 변경
      } catch (error) {
        if (error.response) {
          alert(error.response.data.message);
        } else {
          alert("에러가 발생했습니다.");
        }
        console.error(error.message);
      };
    },

    // 신규 (리셋)
    fnResetForm() {
      const isCheck = confirm("신규 등록 화면으로 전환 시, 현재 작업중인 내용이 초기화됩니다.\n전환하시겠습니까?");
      if (!isCheck) {
        return;
      }

      this.fnReset(); // 데이터 초기화
    },

    // 데이터 초기화
    fnReset() {
      this.data = { ...this.initData };
      this.isEditMode = false; // 신규 모드로 변경
    },

    // 등록
    async fnSave() {
      try {
        const data = {
          authorCode: this.data.authorCode,
          authorNm: this.data.authorNm,
          dc: this.data.dc,
        }

        const response = await saveAuthorProc(data);
        const result = response.data.data;

        alert("등록되었습니다.");

        this.fnReset(); // 데이터 초기화
        this.findList(); // 목록 조회
      } catch (error) {
        if (error.response) {
          alert(error.response.data.message);
        } else {
          alert("에러가 발생했습니다.");
        }
        console.error(error.message);
      };
    },

    // 수정
    async fnUpdate() {
      try {
        const data = {
          authorCode: this.data.authorCode,
          authorNm: this.data.authorNm,
          dc: this.data.dc,
          useAt: this.data.useAt,
        }

        const response = await updateAuthorProc(data);
        const result = response.data.data;

        alert("수정되었습니다.");

        this.fnReset(); // 데이터 초기화
        this.findList(); // 목록 조회
      } catch (error) {
        if (error.response) {
          alert(error.response.data.message);
        } else {
          alert("에러가 발생했습니다.");
        }
        console.error(error.message);
      };
    },

    // 삭제
    async fnDelete() {
      try {
        const isCheck = confirm("삭제 할 경우 삭제된 데이터를 복구할 수 없습니다.\n삭제하시겠습니까?");
        if (!isCheck) {
          return;
        }

        const response = await deleteAuthorProc(this.data.authorCode);
        const result = response.data.data;

        alert("삭제되었습니다.");

        this.fnReset(); // 데이터 초기화
        this.findList(); // 목록 조회
      } catch (error) {
        if (error.response) {
          alert(error.response.data.message);
        } else {
          alert("에러가 발생했습니다.");
        }
        console.error(error.message);
      };
    },
  },
}
</script>
<style scoped>
tr {
  cursor: pointer;
}

.tbl-wrap #myTable .muted {
  background-color: rgba(255, 255, 255, 0.3);
}

.tbl-wrap #myTable .selected {
  color: #FFFFFF;
  background-color: #213F9A;
}
</style>