<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="">구분</option>
        </select>
        <div class="sch-input">
              <input type="text" class="form-control" placeholder="이름">
              <button class="ico-sch"><SearchOutlined /></button>
            </div>
        </div>
      </div>

      <!-- Table  -->
      <div class="tbl-wrap">
        <table id="myTable" class="tbl data buseo">
          <!-- 동적으로 <th> 생성 -->
          <thead>
            <tr>
              <th rowspan="2">No </th>
              <th rowspan="2">부서</th>
              <th rowspan="2">직급</th>
              <th rowspan="2">이름</th>
              <th colspan="3">프로젝트</th>
            </tr>
            <tr>
              <th><p >진행전</p></th>
              <th><p class="blue">진행중</p></th>
              <th><p class="green">완료</p></th>
            </tr>
          </thead>
          <!-- 동적으로 <td> 생성 -->
          <tbody>
            <tr v-for="(item, index) in listData" :key="index"  @click="goToAttendancePage(item)">
              <td>{{ index + 1 }}</td>
      <td>{{ item.department }}</td>
      <td>{{ item.position }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.projectBefore }}</td>
      <td>{{ item.projectOngoing }}</td>
      <td>{{ item.projectDone }}</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>
</div>
</template>

<script>
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
const currentYear = new Date().getFullYear();
export default {
  data() {
    return {
      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: [
      {
        department: '기획팀',
        position: '대리',
        name: '홍길동',
        projectBefore: 2,
        projectOngoing: 1,
        projectDone: 3
      },
      {
        department: '개발팀',
        position: '과장',
        name: '김개발',
        projectBefore: 0,
        projectOngoing: 2,
        projectDone: 5
      }
    ],
      filteredData: [],
    };
  },
  components:{
    SearchOutlined
  },
  computed: {
  },
  methods: {
    goToAttendancePage(item) {
      this.$router.push({ name: 'projectTuibDetail', query: { id: item.id } });
    },
    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: 'VcatnView' });
  } else if (type === '출장') {
    this.$router.push({ name: 'ChuljangDetail' });
  }
},
    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>
