<template>
  <div class="card ">
    <div class="card-body">
      <h2 class="card-title">승인 대기 목록</h2>

      <div class="form-card">
        <h1>출장품의서</h1>
        <div class="approval-box tbl-wrap tbl2">
          <table class="tbl data">
            <tbody>
              <tr class="thead">
                <td rowspan="2" class="th">승인자</td>
                <td v-for="(approver, index) in approvers" :key="index">
                  <p class="position">{{ approver.position }}</p>
                </td>
              </tr>
              <tr>
                <td v-for="(approver, index) in approvers" :key="index">
                  <p class="name">{{ approver.name }}</p>
                  <p class="date">{{ approver.date }}</p>
                </td>
              </tr>

            </tbody>

          </table>
        </div>
        <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 for="youremail" class="form-label ">출장구분<p class="require"><img :src="require" alt=""></p></label>
              <input v-model="email" type="text" name="username" class="form-control" id="youremail" readonly>
            </div>

            <div class="col-12 border-x">
              <label for="yourPassword" class="form-label">이름</label>
              <input v-model="password" type="password" name="password" class="form-control" readonly
                placeholder="주식회사 테이큰 소프트">
            </div>
          </div>
          <div class="col-12">
            <div class="col-12 border-x">
              <label for="youremail" class="form-label">부서</label>
              <input v-model="email" type="text" name="username" class="form-control" readonly placeholder="과장">
            </div>

            <div class="col-12 border-x">
              <label for="yourPassword" class="form-label">직급</label>
              <input v-model="password" type="password" name="password" class="form-control" readonly placeholder="팀장">
            </div>
          </div>
          <div class="col-12">
            <label for="yourName" class="form-label">출장지</label>
            <input v-model="name" type="text" name="name" class="form-control" readonly>
          </div>
          <div class="col-12">
            <label for="yourName" class="form-label">출장목적</label>
            <input v-model="name" type="text" name="name" class="form-control " readonly>
          </div>
          <div class="col-12">
            <label for="yourName" class="form-label">동행자</label>
            <input v-model="name" type="text" name="name" class="form-control " readonly>
          </div>
          <div class="col-12 chuljang">
            <label for="yourName" class="form-label">내용</label>
            <input v-model="name" type="text" name="name" class="form-control textarea " readonly>
          </div>
          <div class="col-12">
            <label for="yourName" class="form-label">법인카드</label>
            <input v-model="name" type="text" name="name" class="form-control " readonly>
          </div>
          <div class="col-12">
            <label for="yourName" class="form-label">법인차량</label>
            <input v-model="name" type="text" name="name" class="form-control " readonly>
          </div>
          <div class="col-12">
            <label for="yourName" class="form-label">품의 신청일</label>
            <input v-model="name" type="text" name="name" class="form-control " readonly>
          </div>
          <div class="col-12 border-x return">
            <label for="yourName" class="form-label">반려사유</label>
            <input v-model="name" type="text" name="name" class="form-control" readonly placeholder="2025-01-01">
          </div>


        </form>
      </div>
      <div class="buttons">
        <button class="btn primary" type="submit">승인</button>
        <button class="btn  btn-red" type="submit" @click="showPopup = true">반려</button>
        <button class="btn tertiary " type="submit">목록</button>
      </div>
      <ReturnPopup v-if="showPopup" @close="showPopup = false" />

    </div>
  </div>
</template>

<script>
import ReturnPopup from '../../../component/Popup/ReturnPopup.vue';
export default {
  data() {
    const today = new Date().toISOString().split('T')[0];
    return {
      showPopup: false,
      startDate: today,
      startTime: "09:00", // 기본 시작 시간 09:00
      endDate: today,
      endTime: "18:00", // 기본 종료 시간 18:00
      category: "",
      dayCount: 1,
      reason: "", // 사유
      approvers: [
        { position: '', name: '', date: '' },
        { position: '', name: '', date: '' },
      ],
      listData: [
        {
          type: '연차',
          approvalType: '결재',
          applicant: '홍길동',
          period: '2025-05-10 ~ 2025-15-03',
          requestDate: '2025-04-25',
          status: '대기'
        }, {
          type: '반차',
          approvalType: '전결',
          applicant: '홍길동',
          period: '2025-05-01 ~ 2025-05-03',
          requestDate: '2025-04-25',
          status: '승인'
        }],
    };
  },
  components: {
    ReturnPopup
  },
  computed: {
  },
  methods: {
    hasAnyApprover() {
      return this.approvers.some(
        (approver) =>
          approver.name?.trim() !== '' && approver.date?.trim() !== ''
      );
    },
    calculateDayCount() {
      const start = new Date(`${this.startDate}T${this.startTime}:00`);
      const end = new Date(`${this.endDate}T${this.endTime}:00`);

      let totalHours = (end - start) / (1000 * 60 * 60);  // 밀리초를 시간 단위로 변환

      if (this.startDate !== this.endDate) {
        // 시작일과 종료일이 다른경우
        const startDateObj = new Date(this.startDate);
        const endDateObj = new Date(this.endDate);
        const daysDifference = (endDateObj - startDateObj) / (1000 * 60 * 60 * 24); // 두 날짜 사이의 차이를 일수로 계산
        if (this.startTime !== "09:00" || this.endTime !== "18:00") {
          this.dayCount = daysDifference + 0.5; // 시간 조건이 기준에서 벗어날 경우
        } else {
          this.dayCount = Math.ceil(daysDifference + 1); // 시간 조건이 기준에 맞을 경우
        }
      } else {
        // 시작일과 종료일이 같은 경우
        if (this.startTime !== "09:00" || this.endTime !== "18:00") {
          this.dayCount = 0.5; // 시작 시간 또는 종료 시간이 기준과 다를 경우 0.5
        } else {
          this.dayCount = 1; // 기준 시간(09:00~18:00)이 맞으면 1일로 간주
        }
      }

    },



  },
};
</script>
<style scoped>
td p {
  width: 125px;
}
</style>
