<template>
<div class="card ">
      <div class="card-body">
          <h2 class="card-title">나의 근태현황</h2>
          <div class="sch-wrap">
            <div class="sch-form-wrap title-wrap">
            <div class="flex">
              <div class="sub flex"><img :src="dateicon" alt=""><p class="date">{{ today }}</p></div>
              <div class="buttons">
                            <button><img :src="startbtn" alt=""></button>
                            <button><img :src="stopbtn" alt=""></button>
                        </div>
            </div>
            <div class="input-group">
              <select name="" id="" class="form-select">
                <option value="">년도</option>
              </select>
              <select name="" id="" class="form-select">
                <option value="">월</option>
              </select>
              <select name="" id="" class="form-select">
                <option value="">부서</option>
              </select>
            </div>
  
          </div>
          </div>
        <div class=" tbl-wrap tbl2">
         <table class="tbl data">
          <colgroup>
    <col style="width: 150px;">
    <col style="width: ">
    <col style="width: ">
    <col style="width: ">
    <col style="width: ">
    <col style="width: ">
    <!-- 더 많은 열 설정 -->
  </colgroup>
          <tbody>
            <tr class="thead">
              <td rowspan="2" class="th">근태 현황</td>
              <td>지각</td>
              <td>조기퇴근</td>
              <td>결근</td>
              <td>출장</td>
              <td>주말출근</td>
            </tr>
            <tr>
    <td>{{ late }}</td>
    <td>{{ earlyLeave }}</td>
    <td>{{ absence }}</td>
    <td>{{ businessTrip }}</td>
    <td>{{ weekendWork }}</td>
  </tr>
          </tbody>

         </table>
         <table class="tbl data">
          <colgroup>
    <col style="width: 150px;">
    <col style="width: ">
    <col style="width: ">
    <col style="width: ">
    <col style="width: ">
    <!-- 더 많은 열 설정 -->
  </colgroup>
          <tbody>
            <tr class="thead">
              <td rowspan="2" class="th">휴가 현황</td>
              <td>연차</td>
              <td>대체휴가</td>
              <td>공가</td>
              <td>병가</td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>

         </table>
        </div>
        <div class="tbl-wrap">
          <table id="myTable" class="tbl data">
            <colgroup>
            <col  style="width: 200px;">
            <col style=" width: "> 
          </colgroup>
            <thead>
              <tr>
                <th>연차 </th>
                <th>내용</th>
              </tr>
            </thead>
            <!-- 동적으로 <td> 생성 -->
            <tbody>
              <tr v-for="(item, index) in listData" :key="index" >
                <td>{{ item.type }}</td>
    <td>{{ item.content }}</td>
              </tr>
            </tbody>
          </table>

        </div>
        <div class="pagination">
          <ul>
            <!-- 왼쪽 화살표 (이전 페이지) -->
            <li class="arrow" :class="{ disabled: currentPage === 1 }" @click="changePage(currentPage - 1)">
              &lt;
            </li>

            <!-- 페이지 번호 -->
            <li v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }"
              @click="changePage(page)">
              {{ page }}
            </li>

            <!-- 오른쪽 화살표 (다음 페이지) -->
            <li class="arrow" :class="{ disabled: currentPage === totalPages }" @click="changePage(currentPage + 1)">
              &gt;
            </li>
          </ul>
        </div>

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

<script>
import { SearchOutlined } from '@ant-design/icons-vue';
export default {
  data() {
    
    const today = new Date().toISOString().split('T')[0];
    return {
      currentPage: 1,
      totalPages: 3,
      late: '5', earlyLeave: '3', absence: '2', businessTrip: '1', weekendWork: '0' ,
      today: new Date().toLocaleDateString('ko-KR', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                weekday: 'short',
            }),
      dateicon: "/client/resources/img/img.png",
            startbtn: "/client/resources/img/start-sm.png",
            stopbtn: "/client/resources/img/stop-sm.png",
      startDate: today,
      startTime: "09:00", // 기본 시작 시간 09:00
      endDate: today,
      endTime: "18:00", // 기본 종료 시간 18:00
      category: "", 
      dayCount: 1, 
      reason: "", // 사유
      listData: [
  {
    type: '연차',
    content: '결재',
  },   {
    type: '반차',
    content: '전결',
  }],
    };
  },
  components:{
    SearchOutlined
  },
  computed: {
    // Pinia Store의 상태를 가져옵니다.
    loginUser() {
      const authStore = useAuthStore();
      return authStore.getLoginUser;
    },
  },
  methods: {
    // 폼 검증 메서드
    validateForm() {
      // 필수 입력 필드 체크
      if (
        this.category &&
        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) {
        localStorage.setItem('HyugaFormData', JSON.stringify(this.$data));
        alert("승인 요청이 완료되었습니다.");
        // 추가 처리 로직 (API 요청 등)
      } else {
        alert("모든 필드를 올바르게 작성해주세요.");
      }
    },
    
    
  },
  mounted() {
    // Load the saved form data when the page is loaded
    this.loadFormData();
  },
  watch: {
  startDate: 'calculateDayCount',
  startTime: 'calculateDayCount',
  endDate: 'calculateDayCount',
  endTime: 'calculateDayCount',
  reason: "validateForm",
  category: 'category',
  },
};
</script>
