<template>
  <div class="col-lg-12">
    <div class="card">
      <div class="card-body">
        <h2 class="card-title">사용현황</h2>
        <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="">전체</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">
      <td>{{ item.type }}</td>
      <td>{{ item.number }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.department }}</td>
      <td>{{ item.driver }}</td>
      <td>{{ item.startDate }} ~ {{ item.endDate }}</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 class="sch-form-wrap title-wrap">
          <h3><img :src="h3icon" alt="">사용이력</h3>
          <div class="input-group">
            <select name="" id="" class="form-select">
              <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">
      <td>{{ item.type }}</td>
      <td>{{ item.number }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.department }}</td>
      <td>{{ item.driver }}</td>
      <td>{{ item.startDate }} ~ {{ item.endDate }}</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';
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 3,
      photoicon: "/client/resources/img/photo_icon.png",
      h3icon: "/client/resources/img/h3icon.png",
      // 데이터 초기화
      years: [2023, 2024, 2025], // 연도 목록
      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
      selectedYear: '',
      selectedMonth: '',
      listData: [
      {
          type: 'SUV',
          number: '12가3456',
          name: '쏘렌토',
          department: '총무부',
          driver: '김철수',
          startDate: '2025-05-01',
          endDate: '2025-05-10',
        },
        {
          type: '세단',
          number: '34나7890',
          name: '그랜저',
          department: '영업부',
          driver: '이영희',
          startDate: '2025-05-03',
          endDate: '2025-05-04',
        },],
      filteredData: [],
    };
  },
  computed: {
  },
  components:{
    SearchOutlined
  },
  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);
      }
    },
    registerLeave() {
      console.log("등록 버튼 클릭됨");

      // Vue의 반응성 문제를 피하기 위해, 새로운 객체를 추가합니다.
      this.DeptData = [
        ...this.DeptData,
        { member: '', deptNM: '', acceptTerms: false }
      ];

      console.log(this.DeptData); // 배열 상태 출력
    },
    getStatusClass(status) {
      if (status === '승인') return 'status-approved';
      if (status === '대기') return 'status-pending';
      return '';
    },
    
  },
  created() {
  },
  mounted() {


  },
};
</script>

<style scoped></style>