<template>
  <div class="card">
    <div class="card-body">
      <h2 class="card-title">휴가 현황</h2>
      <div class="form-card">
        <h1>휴가신청서</h1>
        <div v-if="detailData.sanctnList && detailData.sanctnList.length > 0" class="approval-box tbl-wrap tbl2">
          <table class="tbl data">
            <tbody>
              <tr class="thead">
                <td rowspan="2" class="th">승인자</td>
                <template v-for="(item, idx) of detailData.sanctnList" :key="idx">
                  <td>{{ fnFindNm(item.clsf) }}</td>
                </template>
              </tr>
              <tr>
                <td v-for="(item, idx) of detailData.sanctnList" :key="idx">
                  <template v-if="item.confmAt === 'A'">
                    <p v-if="item.sanctnSe === 'sanctn_agncy'">(대결)</p>
                    <p class="name">{{ item.confmerInfo?.userNm || '' }}</p>
                    <small class="date">{{ new Date(item.sanctnDe).toISOString().split('T')[0] }}</small>
                  </template>
                  <template v-else-if="item.confmAt === 'R'">
                    <p class="name">반려</p>
                  </template>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <form class="row g-3 needs-validation detail" novalidate>
          <div class="col-12">
            <div class="col-12 border-x">
              <label for="vcatnType" class="form-label">유형</label>
              <p>{{ formattedVcatnKnd }}</p>
            </div>
            <div class="col-12 border-x">
              <label for="applicant" class="form-label">신청자</label>
              <p>{{ detailData.registerInfo?.userNm || '' }}</p>
            </div>
          </div>
          <div class="col-12">
            <div class="col-12 border-x">
              <label for="department" class="form-label">부서</label>
              <p>{{ detailData.registerInfo?.userDeptInfo?.deptVO?.deptNm || '' }}</p>
            </div>
            <div class="col-12 border-x">
              <label for="position" class="form-label">직급</label>
              <p>{{ formattedClsf }}</p>
            </div>
          </div>
          <div class="col-12">
            <label for="period" class="form-label">기간</label>
            <p>{{ formattedPeriod }}</p>
          </div>
          <div class="col-12 hyuga">
            <label for="details" class="form-label">세부사항</label>
            <ViewerComponent :content="detailData.detailCn || ''" />
          </div>
          <div class="col-12">
            <label for="requestDate" class="form-label">신청일</label>
            <p>{{ detailData.rgsde || '' }}</p>
          </div>
          <div class="col-12">
            <label for="status" class="form-label">상태</label>
            <p>{{ formattedStatus }}</p>
          </div>
          <div v-if="detailData.confmAt === 'R'" class="col-12 border-x return">
            <label for="rejectReason" class="form-label">반려사유</label>
            <template v-for="(item, idx) of detailData.sanctnList" :key="idx">
              <p v-if="item.confmAt === 'R'">{{ item.returnResn || '' }}</p>
            </template>
          </div>
        </form>
      </div>
      <div class="buttons">
        <button v-if="detailData.confmAt === 'W' || detailData.confmAt === 'R'" class="btn btn-red" type="button" @click="deleteData">신청취소</button>
        <button v-if="detailData.confmAt === 'W'" class="btn secondary" type="button" @click="fnMoveTo('edit', pageId)">수정</button>
        <button v-if="detailData.confmAt === 'R'" class="btn secondary" type="button" @click="fnMoveTo('edit', pageId)">재신청</button>
        <button class="btn tertiary" type="button" @click="fnMoveTo('list')">목록</button>
      </div>
      <ReturnPopup v-if="showPopup" @close="showPopup = false" />
    </div>
  </div>
</template>
<script>
import ReturnPopup from '../../../component/Popup/ReturnPopup.vue';
import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
// API
import { findVcatnProc, deleteVcatnProc } from '../../../../resources/api/vcatn';

export default {
  components: { ReturnPopup, ViewerComponent },

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

      pageId: null,
      isRegister: false,
      showPopup: false,

      // 휴가 신청서 정보
      detailData: {
        registerInfo: {},
        sanctnList: [],
        confmAt: '',
        vcatnKnd: '',
        clsf: '',
        bgnde: '',
        endde: '',
        detailCn: '',
        rgsde: ''
      },

      cmmnCodes: {
        vcatnKndCodeList: [],
        clsfCodeList: [],
        confmCodeList: []
      }
    };
  },

  computed: {
    formattedVcatnKnd() {
      if (!this.cmmnCodes.vcatnKndCodeList || this.cmmnCodes.vcatnKndCodeList.length === 0) return this.detailData.vcatnKnd;
      const vcatnKnd = this.cmmnCodes.vcatnKndCodeList.find(v => v.code === this.detailData.vcatnKnd);
      return vcatnKnd ? vcatnKnd.codeNm : this.detailData.vcatnKnd;
    },

    formattedClsf() {
      if (!this.cmmnCodes.clsfCodeList || this.cmmnCodes.clsfCodeList.length === 0) return this.detailData.clsf;
      const clsf = this.cmmnCodes.clsfCodeList.find(v => v.code === this.detailData.clsf);
      return clsf ? clsf.codeNm : this.detailData.clsf;
    },

    formattedStatus() {
      if (!this.cmmnCodes.confmCodeList || this.cmmnCodes.confmCodeList.length === 0) return this.detailData.confmAt;
      const confmAt = this.cmmnCodes.confmCodeList.find(v => v.codeValue === this.detailData.confmAt);
      return confmAt ? confmAt.codeNm : this.detailData.confmAt;
    },

    formattedPeriod() {
      if (!this.detailData.bgnde || !this.detailData.endde) return '';

      const formattedBgnde = this.detailData.bgnde.split(' ')[0];
      const formattedBeginHour = this.detailData.beginHour?.toString().padStart(2, '0') || '00';
      const formattedBeginMnt = this.detailData.beginMnt?.toString().padStart(2, '0') || '00';
      const startDay = `${formattedBgnde} ${formattedBeginHour}:${formattedBeginMnt}`;

      const formattedEndde = this.detailData.endde.split(' ')[0];
      const formattedEndHour = this.detailData.endHour?.toString().padStart(2, '0') || '00';
      const formattedEndMnt = this.detailData.endMnt?.toString().padStart(2, '0') || '00';
      const endDay = `${formattedEndde} ${formattedEndHour}:${formattedEndMnt}`;

      const dayCount = this.calculateDayCount();
      return `${startDay} ~ ${endDay} (${dayCount}일)`;
    },
  },

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

    // 코드 목록 초기화
    this.cmmnCodes = await this.$defaultCodes();
  },

  mounted() {
    this.findData(); // 상세 조회
  },

  methods: {
    // 상세 조회
    async findData() {
      try {
        const response = await findVcatnProc(this.pageId);
        const result = response.data.data;

        this.detailData = result.vo;
        this.isRegister = this.$registerChk(result.vo.register);
      } catch (error) {
        if (error.response) {
          alert(error.response.data.message);
        } else {
          alert("에러가 발생했습니다.");
        }
        console.error(error.message);
        this.fnMoveTo('list');
      }
    },

    fnFindNm(code) {
      if (this.$isEmpty(code)) {
        return code;
      }

      const clsf = this.cmmnCodes.clsfCodeList.find(v => v.code === code);
      return clsf ? clsf.codeNm : code;
    },

    // 일수 계산
    calculateDayCount() {
      if (!this.detailData.bgnde || !this.detailData.endde) return 0;

      let dayCnt = 1; // 기본값

      // 반차인 경우
      if (this.detailData.vcatnKnd === 'MORNING_HALF' || this.detailData.vcatnKnd === 'AFTERNOON_HALF') {
        dayCnt = 0.5;
      }

      const startDate = new Date(this.detailData.bgnde);
      const endDate = new Date(this.detailData.endde);
      const timeDiff = endDate.getTime() - startDate.getTime();
      const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24)) + 1;

      return dayCnt * Math.max(0, dayDiff);
    },

    // 삭제
    async deleteData() {
      const isCheck = confirm("삭제하시겠습니까?");
      if (!isCheck) {
        return;
      }

      try {
        const response = await deleteVcatnProc(this.pageId);

        this.fnMoveTo('list');
      } catch (error) {
        if (error.response) {
          alert(error.response.data.message);
        } else {
          alert("에러가 발생했습니다.");
        }
        console.error(error.message);
        this.fnMoveTo('list');
      }
    },

    // 페이지 이동
    fnMoveTo(type, id) {
      const routes = {
        'list': { name: 'hyugaStatue' },
        'view': { name: 'HyugaDetail', query: { id } },
        'edit': { name: 'hyugaInsert', query: this.$isEmpty(id) ? {} : { id } },
      };

      if (routes[type]) {
        if (!this.$isEmpty(this.pageId) && type === 'list') {
          this.$router.push({ name: 'HyugaDetail', query: { id: this.pageId } });
        }
        this.$router.push(routes[type]);
      } else {
        alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
        this.$router.push(routes['list']);
      }
    },
  }
};
</script>