<template>
  <div class="col-lg-12">
    <div class="card">
      <div class="card-body">
        <h2 class="card-title">결재 요청</h2>
        <div class="sch-form-wrap">
          <div class="input-group">
            <select name="" id="" class="form-select">
              <option :value="currentYear">{{ currentYear }}년</option>
  <option value="all">전체</option>
  <option
    v-for="year in remainingYears"
    :key="year"
    :value="year"
    v-if="year !== currentYear"
  >
    {{ year }}년
  </option>
            </select>
            <select name="" id="" class="form-select">
              <option :value="currentMonth">{{ currentMonth }}월</option>
  <option value="all">전체</option>
  <option
    v-for="month in remainingMonths"
    :key="month"
    :value="month"
    v-if="month !== currentMonth"
  >
    {{ month }}월
  </option>
            </select>
            <select name="" id="" class="form-select">
              <option value="" selected>전체</option>
              <option value="">출장-복명</option>
              <option value="">출장-품의</option>
              <option value="">연차</option>
              <option value="">반차-오전</option>
              <option value="">반차-오후</option>
              <option value="">대체휴가</option>
              <option value="">공가</option>
              <option value="">병가</option>
            </select>
          </div>
        </div>

        <!-- Table  -->
        <div class="tbl-wrap">
          <table id="myTable" class="tbl data">
            <!-- 동적으로 <th> 생성 -->
            <thead>
              <tr>
                <th>구분 </th>
                <th>결재구분</th>
                <th>신청자</th>
                <th>기간</th>
                <th>신청일</th>
                <th>상태</th>
              </tr>
            </thead>
            <!-- 동적으로 <td> 생성 -->
            <tbody>
              <tr v-for="(item, index) in listData" :key="index" :class="{ 'expired': isPastPeriod(item.period) }">
                <td>{{ item.type }}</td>
                <td>{{ item.approvalType }}</td>
                <td>{{ item.applicant }}</td>
                <td>{{ item.period }}</td>
                <td>{{ item.requestDate }}</td>
                <td :class="getStatusClass(item.status)">{{ item.status }}</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>
        <!-- End Table -->
        <div class="buttons">
          <button type="button" class="btn sm primary" @click="showOptions = true">
            등록
          </button>

          <!-- 신청 종류 선택 모달 -->
          <div v-if="showOptions" class="popup-overlay">
            <div class="popup-content">
              <div class="card">
                <div class="card-body">
                  <h2 class="card-title">신청종류선택</h2>
                  <div class="buttons">
                    <button class="btn hyuga" @click="goToPage('휴가')">휴가신청</button>
                    <button class="btn chuljang" @click="goToPage('출장')">출장신청</button>
                  </div>
                </div>
              </div>
              <button class="close-btn" @click="showOptions = false"> <CloseCircleFilled /></button>
            </div>

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

<script>
import { ref } from 'vue';
import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
export default {
  data() {
    return {
      currentMonth,
      selectedMonth: currentMonth,
      remainingMonths: Array.from({ length: 12 }, (_, i) => i + 1),
      currentYear,
      selectedYear: currentYear,
      remainingYears: Array.from({ length: 10 }, (_, i) => currentYear - i),
      showOptions: false,
      currentPage: 1,
      totalPages: 3,
      photoicon: "/client/resources/img/photo_icon.png",
      // 데이터 초기화
      years: [2023, 2024, 2025], // 연도 목록
      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
      selectedYear: '',
      selectedMonth: '',
      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: '승인'
        }],
      filteredData: [],
    };
  },
  components: {
    SearchOutlined, CloseCircleFilled
  },
  computed: {
  },
  methods: {
    changePage(page) {
      if (page < 1 || page > this.totalPages) return;
      this.currentPage = page;
      this.$emit('page-changed', page); // 필요 시 부모에 알림
    },
    async onClickSubmit() {
      // `useMutation` 훅을 사용하여 mutation 함수 가져오기
      const { mutate, onDone, onError } = useMutation(mygql);

      try {
        const result = await mutate();
        console.log(result);
      } catch (error) {
        console.error('Mutation error:', error);
      }
    },
    goToPage(type) {
      if (type === '휴가') {
        this.$router.push({ name: 'HyugaInsert' });
      } else if (type === '출장') {
        this.$router.push({ name: 'HyugaChuljangDetailDetail' });
      }
    },
    getStatusClass(status) {
      if (status === '승인') return 'status-approved';
      if (status === '대기') return 'status-pending';
      return '';
    },
    isPastPeriod(period) {
      // 예: '2025-05-01 ~ 2025-05-03' → 종료일 추출
      const endDateStr = period.split('~')[1]?.trim();
      if (!endDateStr) return false;

      const endDate = new Date(endDateStr);
      const today = new Date();

      // 현재 날짜보다 과거면 true
      return endDate < today;
    }
  },
  created() {
  },
  mounted() {


  },
};
</script>

<style scoped></style>
