<template>
  <div class="card">
    <div class="card-body">
      <h2 class="card-title">휴가 현황</h2>
      <div class="form-card">
        <h1>휴가신청서</h1>
        <SanctnViewList v-if="vacationInfo.sanctnList.length > 0" :sanctns="vacationInfo.sanctnList" />
        <div class="tbl-wrap">
          <table class="tbl data">
            <tbody>
              <tr>
                <th>유형</th>
                <td>{{ vacationInfo.vcatnKndNm }}</td>
                <th>신청자</th>
                <td>{{ vacationInfo.userNm }}</td>
              </tr>
              <tr>
                <th>부서</th>
                <td>{{ vacationInfo.deptNm }}</td>
                <th>직급</th>
                <td>{{ vacationInfo.clsfNm }}</td>
              </tr>
              <tr>
                <th>기간</th>
                <td colspan="3">{{ $formattedDates(vacationInfo) }}</td>
              </tr>
              <tr>
                <th>세부사항</th>
                <td colspan="3">
                  <ViewerComponent :content="vacationInfo.detailCn" />
                </td>
              </tr>
              <tr>
                <th>신청일</th>
                <td colspan="3">{{ vacationInfo.rgsde }}</td>
              </tr>
              <tr>
                <th>상태</th>
                <td colspan="3">{{ vacationInfo.confmAtNm }}</td>
              </tr>
              <tr v-if="approvalStatus === 'rejected'">
                <th>반려사유</th>
                <td colspan="3">{{ getRejectionReason(vacationInfo.sanctnList) }}</td>
              </tr>
              <!-- 붉은 색 등 하여간 눈에 띄게 표기해야 함!! -->
              <tr>
                <td colspan="4">금년도 연차 소진으로 내년도 연차를 선 사용하는 휴가 신청건입니다.</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="buttons">
        <template v-if="isConsultationApprover">
          <button type="button" class="btn sm primary" @click="handleApproval('A')">승인</button>
          <button type="button" class="btn sm btn-red" @click="showConsultationPopup = true">반려</button>
        </template>
        <template v-else-if="isApplicant">
          <template v-if="approvalStatus === 'waiting'">
            <button type="button" class="btn sm btn-red" @click="handleDelete">신청취소</button>
            <button type="button" class="btn sm secondary" @click="handleNavigation('insert', pageId)">수정</button>
          </template>
          <template v-if="approvalStatus === 'rejected'">
            <button type="button" class="btn sm secondary" @click="handleNavigation('reapply', pageId)">재신청</button>
          </template>
        </template>
        <button type="button" class="btn sm tertiary" @click="handleNavigation('list')">목록</button>
      </div>
    </div>
  </div>
  <ReturnPopup v-if="showConsultationPopup" @close="showConsultationPopup = false" @confirm="handleRejection" />
</template>
<script>
import ReturnPopup from '../../../component/Popup/ReturnPopup.vue';
import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
import SanctnViewList from '../../../component/Sanctn/SanctnViewList.vue';
// API
import { findVcatnProc, deleteVcatnProc } from '../../../../resources/api/vcatn';
import { updateConfmAtProc } from '../../../../resources/api/sanctns';

export default {
  name: 'VacationView',

  components: {
    ReturnPopup,
    ViewerComponent,
    SanctnViewList,
  },

  data() {
    return {
      pageId: null,
      pageMode: null,
      showConsultationPopup: false,
      vacationInfo: {
        userId: null,
        userNm: null,
        vcatnKndNm: null,
        deptNm: null,
        clsfNm: null,
        bgnde: null,
        beginHour: null,
        beginMnt: null,
        endde: null,
        endHour: null,
        endMnt: null,
        detailCn: null,
        confmAtNm: null,
        rgsde: null,
        sanctnList: []
      },
      returnResn: null,
    };
  },

  computed: {
    // 결재 상태
    approvalStatus() {
      const sanctnList = this.vacationInfo.sanctnList;
      if (sanctnList.length === 0) return 'none';

      // 하나라도 반려된 경우 > 반려
      if (sanctnList.some(item => item.confmAt === 'R')) {
        return 'rejected';
      }

      // 전부 승인된 경우 > 승인
      if (sanctnList.every(item => item.confmAt === 'A')) {
        return 'approved';
      }

      // 그 외 > 대기
      return 'waiting';
    },

    // 작성자 여부
    isApplicant() {
      return this.vacationInfo.userId === this.$store.state.userInfo.userId;
    },

    // 결재자 여부
    isConsultationApprover() {
      const sanctnList = this.vacationInfo.sanctnList;
      const mySanctn = sanctnList.find(
        item => item.confmerId == this.$store.state.userInfo.userId
      );
      return mySanctn && mySanctn.confmAt === 'W' && this.pageMode === 'sanctns';
    },
  },

  async created() {
    this.pageId = this.$route.query.id;
    this.pageMode = this.$route.query.type;
    if (this.$isEmpty(this.pageId)) {
      alert("게시물이 존재하지 않습니다.");
      this.handleNavigation('list');
    }
  },

  mounted() {
    this.fetchData(); // 휴가 정보 조회
  },

  methods: {
    // 휴가 정보 조회
    async fetchData() {
      try {
        const response = await findVcatnProc(this.pageId);
        const result = response.data.data;

        this.vacationInfo = result;
      } catch (error) {
        this.handleError(error);
        this.handleNavigation('list');
      }
    },

    // 결재 승인/반려 처리
    async handleApproval(value) {
      try {
        const sanctnList = this.vacationInfo.sanctnList;
        const sanctn = sanctnList.find(item => item.confmerId == this.$store.state.userInfo.userId);

        if (!sanctn) {
          alert('결재 권한이 없습니다.');
          return;
        }

        const data = {
          sanctnOrdr: sanctn.sanctnOrdr,
          sanctnIem: sanctn.sanctnIem,
          sanctnMbyId: this.pageId,
          confmAt: value,
          returnResn: this.returnResn,
        };

        await updateConfmAtProc(sanctn.sanctnId, data);
        alert("승인했습니다.");
        this.fetchData();
      } catch (error) {
        this.handleError(error);
      }
    },

    // 반려 결재 핸들러
    async handleRejection(reason) {
      this.returnResn = reason;
      await this.handleApproval('R');
      this.showConsultationPopup = false;
    },

    // 휴가 취소 (완전 삭제)
    async handleDelete() {
      const isCheck = confirm("휴가 신청을 취소하시겠습니까?");
      if (!isCheck) return;

      try {
        await deleteVcatnProc(this.pageId);
        alert("휴가 신청이 취소되었습니다.");
        this.handleNavigation('list');
      } catch (error) {
        this.handleError(error);
      }
    },

    // 페이지 이동 핸들러
    handleNavigation(type, id) {
      const routeMap = {
        'list': { name: this.pageMode === 'sanctns' ? 'PendingApprovalListPage' : 'VcatnListPage' },
        'view': { name: 'VcatnViewPage', query: { id } },
        'insert': { name: 'VcatnInsertPage', query: this.$isEmpty(id) ? {} : { id } },
        'reapply': { name: 'VcatnInsertPage', query: { id, type: 'reapply' } },
      };

      const route = routeMap[type];
      if (route) {
        this.$router.push(route);
      } else {
        alert("올바르지 않은 경로입니다.");
        this.$router.push(routeMap['list']);
      }
    },

    // 에러 핸들러
    handleError(error) {
      const message = error.response?.data?.message || '에러가 발생했습니다.';
      alert(message);
    },

    // 반려 사유 유틸리티
    getRejectionReason(sanctnList) {
      const rejectedItem = sanctnList.find(item => item.confmAt === 'R');
      return rejectedItem?.returnResn || '-';
    },
  }
};
</script>