<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="">전체</option>
          <option value="">상위코드</option>
          <option value="">상위코드명</option>
          <option value="">코드</option>
          <option value="">코드명</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>코드명</th>
              <th>등록일</th>
              <th>사용여부</th>
            </tr>
          </thead>
          <!-- 동적으로 <td> 생성 -->
          <tbody>
            <tr v-for="(item, index) in listData" :key="index" :class="{ expired: !isUsed(item.used) }" @click="goToDetailPage(item)">
      <td>{{ item.parentCode }}</td>
      <td>{{ item.parentName }}</td>
      <td>{{ item.code }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.createdAt }}</td>
      <td :class="getStatusClass(item.used)">{{ item.used }}</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 sm primary" @click="goToPage('등록') ">
      등록
    </button>

    <!-- 신청 종류 선택 모달 -->
    <div v-if="showOptions" class="modal-overlay">
      <div class="modal-box">
        <p>신청 종류를 선택하세요</p>
        <button @click="goToPage('휴가')">휴가신청</button>
        <button @click="goToPage('출장')">출장신청</button>
        <button class="cancel" @click="showOptions = false">취소</button>
      </div>
    </div>
  </div>
    </div>
  </div>
</div>
</template>

<script>
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
export default {
  data() {
    return {
      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: [
      {
          parentCode: 'A01',
          parentName: '부서코드',
          code: 'A0101',
          name: '총무부',
          createdAt: '2024-01-10',
          used: 'Y',
        },
        {
          parentCode: 'A01',
          parentName: '부서코드',
          code: 'A0102',
          name: '인사부',
          createdAt: '2024-03-21',
          used: 'N',
        },],
      filteredData: [],
    };
  },
  computed: {
  },
  components: {
    SearchOutlined
  },
  methods: {
    goToDetailPage(item) {
    // item.id 또는 다른 식별자를 사용하여 URL을 구성할 수 있습니다.
    this.$router.push({ name: 'commonCodeDetail', 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: 'commonCodeInsert' });
  } 
},
getStatusClass(used) {
      return used === 'Y' ? 'status-approved' : 'status-pending';
    },
   
    isUsed(used) {
      return used === 'Y';
    },
  },
  created() {
  },
  mounted() {


  },
};
</script>

<style scoped>
tr{cursor: pointer;}
</style>
