<template>
  <div class="card">
    <div class="card-body">
      <h2 class="card-title">출장 현황</h2>
      <div class="form-card" style="margin-bottom: 20px;">
        <h1>출장품의서</h1>
        <SanctnViewList v-if="bsrpCnsul.sanctnList.length > 0" :sanctns="bsrpCnsul.sanctnList" />
        <form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate>
          <div class="col-12">
            <div class="col-12 border-x">
              <label class="form-label">출장구분</label>
              <p>{{ bsrpInfo.bsrpSeNm }}</p>
            </div>
            <div class="col-12 border-x">
              <label class="form-label">이름</label>
              <p>{{ user.userNm }}</p>
            </div>
          </div>
          <div class="col-12">
            <div class="col-12 border-x">
              <label class="form-label">부서</label>
              <p>{{ user.deptNm }}</p>
            </div>
            <div class="col-12 border-x">
              <label class="form-label">직급</label>
              <p>{{ user.clsfNm }}</p>
            </div>
          </div>
          <div class="col-12">
            <label class="form-label">출장지</label>
            <p>{{ bsrpInfo.bsrpPlace }}</p>
          </div>
          <div class="col-12">
            <label class="form-label">출장목적</label>
            <p>{{ bsrpInfo.bsrpPurps }}</p>
          </div>
          <div class="col-12">
            <label class="form-label">동행자</label>
            <div v-if="bsrpInfo.bsrpNmprList.length > 0">
              <span v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx">{{ item.triperNm }}</span>
            </div>
          </div>
          <div class="col-12">
            <label class="form-label">품의내용</label>
            <ViewerComponent :content="bsrpCnsul.cn" />
          </div>
          <div class="col-12">
            <label class="form-label">법인카드</label>
            <div>
              <p v-for="(item, idx) of cprCardList" :key="idx">
                <span v-if="idx !== 0">, </span>
                <span>{{ item.cardNm }}</span>
              </p>
            </div>
          </div>
          <div class="col-12">
            <label class="form-label">법인차량</label>
            <div>
              <p v-for="(item, idx) of cprVhcleList" :key="idx">
                <span v-if="idx !== 0">, </span>
                <span>{{ item.vhcleNm }}</span>
              </p>
            </div>
          </div>
          <div class="col-12 border-x">
            <label class="form-label">품의 신청일</label>
            <p>{{ bsrpCnsul.rgsde }}</p>
          </div>
        </form>
      </div>
      <div v-if="!$isEmpty(bsrpRport.bsrpId)" class="form-card">
        <h1>출장복명서</h1>
        <SanctnViewList v-if="bsrpRport.sanctnList.length > 0" :sanctns="bsrpRport.sanctnList" />
        <form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate>
          <div class="col-12">
            <label class="form-label">복명내용</label>
            <ViewerComponent :content="bsrpRport.cn" />
          </div>
          <div class="col-12">
            <label class="form-label">여비계산</label>
            <p>{{ bsrpInfo.applcntId }}</p>
          </div>
          <div class="col-12">
            <label class="form-label">복명 신청일</label>
            <p>{{ bsrpRport.rgsde }}</p>
          </div>
          <div class="col-12 border-x return">
            <label class="form-label">반려사유</label>
            <p>{{ bsrpInfo.applcntId }}</p>
          </div>
        </form>
      </div>
      <div class="buttons">
        <button v-if="sanctnStatus === 'waiting' && sanctnStatus !== 'approved'" type="button" class="btn btn-red" @click="deleteData">신청취소</button>
        <button v-if="sanctnStatus === 'waiting'" type="button" class="btn secondary" @click="fnMoveTo('edit', pageId)">수정</button>
        <button v-if="sanctnStatus === 'rejected'" type="button" class="btn secondary" @click="fnMoveTo('edit', pageId)">재신청</button>
        <button v-if="sanctnStatus === 'approved'" type="button" class="btn primary" @click="fnMoveTo('plus', pageId)">복명서 작성</button>
        <button type="button" class="btn tertiary" @click="fnMoveTo('list')">목록</button>
      </div>
    </div>
  </div>
</template>
<script>
import SanctnViewList from '../../../component/Sanctn/SanctnViewList.vue';
import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
// API
import { bsrpProc, deleteBsrpProc } from '../../../../resources/api/bsrp';

export default {
  components: {
    SanctnViewList, ViewerComponent,
  },

  data() {
    return {
      pageId: null,

      // 출장 정보
      bsrpInfo: {
        bsrpId: null,       // 출장 아이디
        applcntId: null,    // 신청자 아이디
        bsrpSe: null,       // 출장구분 (공통코드 : sanctn_mby_bsrp)
        bsrpPlace: null,    // 출장지
        bsrpPurps: null,    // 출장목적
        bgnde: null,        // 시작일
        beginHour: null,    // 시작시
        beginMnt: null,     // 시작분
        endde: null,        // 종료일
        endHour: null,      // 종료시
        endMnt: null,       // 종료분
        bsrpSeNm: null,     // 출장구분 이름
        bsrpNmprList: [],   // 출장 인원
      },
      // 품의서
      bsrpCnsul: {
        bsrpId: null,      // 출장 아이디
        cn: null,          // 내용
        confmAt: null,     // 승인 여부 (W: 대기, A: 승인, R 반려)
        rgsde: null,       // 등록일
        register: null,    // 등록자
        updde: null,       // 수정일
        updusr: null,      // 수정자
        sanctnList: [],
      },
      // 복명서
      bsrpRport: {
        bsrpId: null,      // 출장 아이디
        cn: null,          // 내용
        confmAt: null,     // 승인 여부 (W: 대기, A: 승인, R 반려)
        fileId: null,      // 파일 아이디
        rgsde: null,       // 등록일
        register: null,    // 등록자
        updde: null,       // 수정일
        updusr: null,      // 수정자
        sanctnList: [],
      },
      // 신청자 정보
      user: {},
    };
  },

  computed: {
    // 결재 상태 확인
    sanctnStatus() {
      const sanctnList = this.bsrpCnsul.sanctnList;

      if (sanctnList.length === 0) return 'none'; // 결재 정보 없음

      // 하나라도 반려가 있으면 '반려'
      if (sanctnList.some(item => item.sanctnSttus === 'R')) {
        return 'rejected';
      }

      // 모든 결재가 승인이면 '승인'
      if (sanctnList.every(item => item.sanctnSttus === 'A')) {
        return 'approved';
      }

      // 그 외에는 '대기'
      return 'waiting';
    }
  },

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

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

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

        this.bsrpInfo = result.bsrpInfo;
        this.bsrpInfo.bgnde = this.bsrpInfo.bgnde.split(' ')[0];
        this.bsrpInfo.endde = this.bsrpInfo.endde.split(' ')[0];

        this.cprCardList = result.cprCardList;
        this.cprVhcleList = result.cprVhcleList;
        this.user = result.user;

        this.bsrpCnsul = result.bsrpCnsul;
        this.bsrpRport = result.bsrpRport;
      } catch (error) {
        const message = error.response.data.message;
        alert(message);
      }
    },

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

      try {
        const response = await deleteBsrpProc(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: 'ChuljangStatue' },
        'view': { name: 'ChuljangDetailAll', query: { id } },
        'edit': { name: 'ChuljangInsert', query: this.$isEmpty(id) ? {} : { id } },
        'plus': { name: 'ChuljangInsert', query: this.$isEmpty(id) ? {} : { id } },
      };

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