<template>
  <div class="pagetitle">
    <h1>휴가신청</h1>
  </div><!-- End Page Title -->

  <section class="section">
    <div class="card">
      <div class="card-body">

        <!-- Multi Columns Form -->
        <form class="row g-3  pt-3" @submit.prevent="handleSubmit">
          <div class="col-md-9">
            <label for="inputName5" class="form-label">구분</label>
            <select id="inputState" class="form-select">
              <option selected>연차</option>
              <option>반차</option>
              <option>병가</option>
              <option>경조</option>
              <option>무급</option>
              <option>공가</option>
            </select>
          </div>

          <div class="col-md-5">
            <label for="startDate" class="form-label">시작일</label>
            <div class="d-flex gap-1">
              <input type="date" class="form-control" id="startDate" v-model="startDate" />
              <!-- 시간 선택을 위한 select 사용 -->
              <select class="form-control" id="startTime" v-model="startTime">
                <option value="09:00">09:00</option>
                <option value="10:00">10:00</option>
                <option value="11:00">11:00</option>
                <option value="12:00">12:00</option>
                <option value="13:00">13:00</option>
                <option value="14:00">14:00</option>
                <option value="15:00">15:00</option>
                <option value="16:00">16:00</option>
                <option value="17:00">17:00</option>
                <option value="18:00">18:00</option>
              </select>
            </div>
          </div>

          <div class="col-md-5">
            <label for="endDate" class="form-label">종료일</label>
            <div class="d-flex gap-1">
              <input type="date" class="form-control" id="endDate" v-model="endDate" />
              <!-- 종료 시간을 위한 select 사용 -->
              <select class="form-control" id="endTime" v-model="endTime">
                <option value="09:00">09:00</option>
                <option value="10:00">10:00</option>
                <option value="11:00">11:00</option>
                <option value="12:00">12:00</option>
                <option value="13:00">13:00</option>
                <option value="14:00">14:00</option>
                <option value="15:00">15:00</option>
                <option value="16:00">16:00</option>
                <option value="17:00">17:00</option>
                <option value="18:00">18:00</option>
              </select>
            </div>
          </div>

          <div class="col-md-4">
            <label for="dayCount" class="form-label">사용 휴가일</label>
            <input type="text" class="form-control" id="dayCount" v-model="dayCount" readonly />
          </div>

          <div class="col-12">
            <label for="prvonsh" class="form-label">사유</label>
            <input type="text" class="form-control" id="prvonsh" v-model="reason" />
          </div>

          <div class="text-end">
            <button type="submit" class="btn btn-primary">승인요청</button>
            <button type="reset" class="btn btn-secondary">취소</button>
          </div>
        </form><!-- End Multi Columns Form -->

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

<script>
import { useAuthStore } from '../../stores/authStore';
export default {
  data() {
    const today = new Date().toISOString().split('T')[0];
    return {
      startDate: today,
      startTime: "09:00", // 기본 시작 시간 09:00
      endDate: today,
      endTime: "18:00", // 기본 종료 시간 18:00
      allDay: false, // 종일 여부
      dayCount: 1, // 사용 휴가일 계산
      reason: "", // 사유
    };
  },
  computed: {
    // Pinia Store의 상태를 가져옵니다.
    loginUser() {
      const authStore = useAuthStore();
      return authStore.getLoginUser;
    },
  },
  methods: {
    // 폼 검증 메서드
    validateForm() {
      // 필수 입력 필드 체크
      if (
        this.startDate &&
        this.startTime &&
        this.endDate &&
        this.endTime &&
        this.dayCount > 0 &&
        this.reason.trim() !== ""
      ) {
        this.isFormValid = true;
      } else {
        this.isFormValid = false;
      }
    },
    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일로 간주
      }
    }

    this.validateForm(); // dayCount 변경 후 폼 재검증
  },
    handleSubmit() {
      this.validateForm(); // 제출 시 유효성 확인
      if (this.isFormValid) {
        alert("승인 요청이 완료되었습니다.");
        // 추가 처리 로직 (API 요청 등)
      } else {
        alert("모든 필드를 올바르게 작성해주세요.");
      }
    },
  },
  watch: {
  startDate: 'calculateDayCount',
  startTime: 'calculateDayCount',
  endDate: 'calculateDayCount',
  endTime: 'calculateDayCount',
  reason: "validateForm",
  },
};
</script>
