<template>
<div class="col-lg-12">
  <div class="card">
    <div class="card-body">
      <h2 class="card-title">프로젝트 현황</h2>
<!-- //폼그룹 -->
      <div class="boxs">
            <div class="color-boxs">
                <div class="box ">
                    <h3>전체</h3>
                    3
                </div>
                <div class="box blue">
                    <h3>진행중</h3>
                    3
                </div>
                <div class="box red">
                    <h3>미진행</h3>
                    3
                </div>
                <div class="box green">
                    <h3>완료</h3>
                    3
                </div>
            </div>
        </div>
        <div class="sch-form-wrap title-wrap">
          <h3><img :src="h3icon" alt="">승인 대기</h3>
          <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="">부서</option>
            </select>
            <select name="" id="" class="form-select">
              <option value="">전체</option>
              <option value="">프로젝트명</option>
              <option value="">PM</option>
            </select>
            <div class="sch-input">
              <input type="text" class="form-control">
              <button class="ico-sch"><SearchOutlined /></button>
            </div>
          </div>
        </div>
      <!-- Table  -->
      <div class="tbl-wrap">
          <table id="myTable" class="tbl data">
            <!-- 동적으로 <th> 생성 -->
            <thead>
              <tr>
                <th>구분 </th>
                <th>부서</th>
                <th>프로젝트명</th>
                <th>PM</th>
                <th>사업비</th>
                <th>기간</th>
                <th>상태</th>
              </tr>
            </thead>
            <!-- 동적으로 <td> 생성 -->
            <tbody>
              <tr
      v-for="(item, index) in listData"
      :key="index"
      @click="goToDetailPage(item)"
      :class="{ 'expired': isPastStatus(item.status) }"
    >
      <td>{{ item.type }}</td>
      <td>{{ item.department }}</td>
      <td>{{ item.projectName }}</td>
      <td>{{ item.pm }}</td>
      <td>{{ item.budget }}</td>
      <td>{{ item.period }}</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>
      
    </div>
  </div>
</div>
</template>

<script>
import { ref } from 'vue';
import { SearchOutlined } 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: '내부',
    department: '기획팀',
    projectName: '신규 플랫폼 개발',
    pm: '김PM',
    budget: '₩50,000,000',
    period: '2025-05-01 ~ 2025-08-31',
    status: '진행중'
  },
  {
    type: '내부',
    department: '기획팀',
    projectName: '신규 플랫폼 개발',
    pm: '김PM',
    budget: '₩50,000,000',
    period: '2025-05-01 ~ 2025-08-31',
    status: '미진행'
  },
  {
    type: '외부',
    department: '운영팀',
    projectName: '유지보수 프로젝트',
    pm: '박PM',
    budget: '₩20,000,000',
    period: '2025-03-01 ~ 2025-04-30',
    status: '완료'
  }],
      filteredData: [],
    };
  },
  components:{
    SearchOutlined
  },
  computed: {
  },
  methods: {

    goToAttendancePage(item) {
      this.$router.push({ name: 'AttendanceDetail', 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);
      }
    },
    goToDetailPage(item) {
    // item.id 또는 다른 식별자를 사용하여 URL을 구성할 수 있습니다.
    this.$router.push({ path: `/projectDetail.page`, query: { id: item.id } });
  },

  // 상태에 따른 클래스 반환 메소드
  getStatusClass(status) {
    return status === 'active' ? 'status-active' : 'status-inactive';
  },
    getStatusClass(status) {
      if (status === '완료') return 'status-green';
      if (status === '진행중') return 'status-approved';
      if (status === '미진행') return 'status-pending';
      return '';
    },
    isPastStatus(status) {
    return status === '완료' ; // 조건은 필요 시 조정
  },
  },
  created() {
  },
  mounted() {


  },
};
</script>

<style scoped>
tr{cursor: pointer;}
.content .card .color-boxs .box{
  width: calc(100% / 4);
}
</style>
