<template>
  <div class="pagetitle">
    <h2>휴가승인</h2>
  </div>
  <!-- End Page Title -->
  <section class="section">
    <div class="row">
      <!-- 해당년도 연차 수 -->
      <!-- 전체 -->
      <div class="col-xxl-2 col-md-3 mb-2">
        <button type="button" class="btn sm btn-secondary ">
          전체 <span class="badge bg-white text-secondary">12개</span>
        </button>
        <button type="button" class="btn sm btn-success ">
          사용 <span class="badge bg-white text-success">1개</span>
        </button>
        <button type="button" class="btn sm btn-warning">
          미사용 <span class="badge bg-white text-warning">1개</span>
        </button>
      </div>
      <!-- End 전체 -->

      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">휴가내역</h5>
            <div class="d-flex pb-3 justify-content-between ">

              <div class="datatable-search d-flex gap-1 ">
                <div class="col-xxl-5 col-md-3">
                  <select class="form-select " v-model="selectedYear">
                    <option value="">전체</option>
                    <option v-for="year in years" :key="year" :value="year">{{ year }}</option>
                  </select>
                </div>
                <div class="col-xxl-5 col-md-3">
                  <select class="form-select" v-model="selectedMonth">
                    <option value="">월</option>
                    <option v-for="month in months" :key="month" :value="month">{{ month }}</option>
                  </select>
                </div>
                <button type="button" class="btn sm btn-outline-secondary col-xxl-5 col-xl-3"
                  @click="filterData">조회</button>

              </div>
              <div class="d-flex justify-content-end ">
                <button type="button" class="btn sm btn-outline-secondary" @click="deletePending">
                  삭제
                </button>
              </div>

            </div>
            <!-- Table  -->
            <table id="myTable" class="table datatable table-hover">
              <!-- 동적으로 <th> 생성 -->
              <thead>
                <tr>
                  <th>No</th>
                  <th>구분</th>
                  <th data-type="date" data-format="YYYY/DD/MM">시작일자</th>
                  <th data-type="date" data-format="YYYY/DD/MM">종료일자</th>
                  <th>사용일</th>
                  <th>사유</th>
                  <th>승인여부</th>
                </tr>
              </thead>
              <!-- 동적으로 <td> 생성 -->
              <tbody>
                <tr v-for="(item, index) in HyugaFormData" :key="index">
                  <td>
                    <div class="form-check">
                      <label class="form-check-label" for="acceptTerms">{{ index + 1 }}</label>
                      <input v-model="item.acceptTerms" class="form-check-input" type="checkbox" />
                    </div>
                  </td>
                  <td>{{ item.category }}</td>
                  <td>{{ item.startDate }}</td>
                  <td>{{ item.endDate }}</td>
                  <td>{{ item.dayCount }}</td>
                  <td>{{ item.reason }}</td>
                  <td>{{ item.approvalStatus ? '승인' : '대기' }}</td>
                </tr>
              </tbody>
            </table>
            <!-- End Table -->
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { DataTable } from 'simple-datatables'
export default {
  data() {
    return {
      // 데이터 초기화
      years: [2023, 2024, 2025], // 연도 목록
      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
      selectedYear: '',
      selectedMonth: '',
      filteredData: [],
    };
  },
  computed: {
  },
  methods: {
    deletePending() {
      // 선택된 항목만 필터링하여 삭제
      const selectedItems = this.vacationData.filter(item => item.acceptTerms);

      // 승인된 항목인지 확인하여 삭제할 수 없으면 경고
      const nonDeletableItems = selectedItems.filter(item => item.approvalStatus === true);

      // 삭제할 수 없는 항목이 있으면 경고
      if (nonDeletableItems.length > 0) {
        alert("승인된 건은 삭제할 수 없습니다.");
        return;  // 승인된 항목이 있으면 삭제를 진행하지 않음
      }

      // 승인된 항목이 없으면 삭제 진행
      if (selectedItems.length > 0) {
        this.vacationData = this.vacationData.filter(item => !item.acceptTerms);
        alert(`${selectedItems.length}개의 항목이 삭제되었습니다.`);
      } else {
        alert("선택된 항목이 없습니다.");
      }
    },
    // 날짜 필터 적용
    filterData() {
      // 전체 선택 시 필터링 없이 모든 데이터를 표시
      if (!this.selectedYear && !this.selectedMonth) {
        this.filteredData = this.vacationData;
      } else {
        // 선택된 연도와 월에 맞게 필터링
        this.filteredData = this.vacationData.filter(item => {
          const itemYear = new Date(item.startDate).getFullYear();
          const itemMonth = new Date(item.startDate).getMonth() + 1; // 월은 0부터 시작하므로 1을 더해줍니다.

          return (
            (!this.selectedYear || itemYear === parseInt(this.selectedYear)) &&
            (!this.selectedMonth || itemMonth === parseInt(this.selectedMonth))
          );
        });
      }
    },


  },
  created() {
      // 로컬스토리지에서 기존 데이터가 있으면 불러오기
      const storedData = localStorage.getItem('HyugaFormData');
      if (storedData) {
        // Parse the data and wrap it in an array
        const parsedData = JSON.parse(storedData);
        // Ensure the data is in an array format
        this.HyugaFormData = Array.isArray(parsedData) ? parsedData : [parsedData];
      }
    },
  mounted() {
    const currentYear = new Date().getFullYear();
    this.selectedYear = currentYear;
    // 처음에는 현재년도 데이터를 표시
  },

};
</script>

<style scoped></style>
