<template>
  <div class="pagetitle">
    <h1>휴가관리</h1>
  </div>
  <!-- End Page Title -->
  <section class="section">
    <div class="row">
      <!-- 전체 -->
      <div class="col-xxl-2 col-md-3">
        <h5 class="card-title"><span>전체</span>12개</h5>
      </div>
      <!-- End 전체 -->

      <!-- 사용 -->
      <div class="col-xxl-2 col-md-3">
        <h5 class="card-title"><span>사용</span>1개</h5>
      </div>
      <!-- End 사용 -->

      <!-- 미사용 -->
      <div class="col-xxl-2 col-xl-3">
        <h5 class="card-title"><span>미사용</span>1개</h5>
      </div>
      <!-- End 미사용 -->

      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">휴가내역</h5>
            
            <!-- Table  -->
            <div class="datatable-wrapper datatable-loading no-footer sortable searchable fixed-columns">


<div class="datatable-container">
  <div class="d-flex justify-content-end ">
          <button
            type="button"
            class="btn btn-outline-primary"
            @click="requestApproval"
          >
            승인요청
          </button>
          <button
            type="button"
            class="btn btn-outline-secondary"
            @click="registerLeave"
          >
            등록
          </button>
          <button
            type="button"
            class="btn btn-outline-success"
            @click="saveChanges"
          >
            저장
          </button>
          <button
            type="button"
            class="btn btn-outline-danger"
            @click="deletePending"
          >
            삭제
          </button>
        </div>
  <table class="table datatable datatable-table">
    <!-- 동적으로 <th> 생성 -->
    <thead>
      <tr>
        <th>No</th>
        <th></th>
        <th>구분</th>
        <th>시작일자</th>
        <th>종료일자</th>
        <th>사용일</th>
        <th>사유</th>
        <th>승인여부</th>
      </tr>
    </thead>
    <!-- 동적으로 <td> 생성 -->
    <tbody>
      <tr>
        <td>{{ index }}</td>
        <td><input type="checkbox"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

<div class="datatable-bottom justify-content-center pagination">

  <nav class="datatable-pagination">
    <ul class="datatable-pagination-list">
      <li :class="{ 'datatable-disabled': currentPage === 1 }" @click="changePage(currentPage - 1)">
        <button class="datatable-pagination-list-item-link">‹</button>
      </li>
      <li v-for="page in totalPages" :key="page" :class="{ 'datatable-active': currentPage === page }">
        <button class="datatable-pagination-list-item-link" @click="changePage(page)">
          {{ page }}
        </button>
      </li>
      <li :class="{ 'datatable-disabled': currentPage === totalPages }" @click="changePage(currentPage + 1)">
        <button class="datatable-pagination-list-item-link">›</button>
      </li>
    </ul>
  </nav>
</div>
</div>
            <!-- End Table -->
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import Table from "../../component/Table.vue";

export default {
  data() {
    return {
    };
  },
  methods: {
   
  },
  components: {
    Table,
  },
};
</script>

<style scoped></style>
