<template>
    <div  class="popup-overlay" @click.self="$emit('close')">
                <div class="popup-content">
                  <div class="card">
                    <div class="card-body">
                      <h2 class="card-title">출장비 목록</h2>
                      <div class="sch-form-wrap">
                        <div class="input-group">
                          <div class="datepicker-input">
              <input
    type="date"
    class="form-control datepicker cal"
    :value="startDate"
    style="max-width: 200px;"
  />
  <mark>~</mark>
  <input
    type="date"
    class="form-control datepicker cal"
    :value="endDate"
    style="max-width: 200px;"
  />
            </div>
            <select name="" id="" class="form-select">
                <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>
                              <th>선택</th>
                            </tr>
                          </thead>
                          <!-- 동적으로 <td> 생성 -->
                          <tbody>
                            <tr v-for="(item, index) in popuplistData" :key="index">
                              <td>{{ item.location }}</td>
      <td>{{ item.purpose }}</td>
      <td>{{ item.period }}</td>
      <td>{{ item.category }}</td>
      <td>{{ item.amount }}</td>
      <td>{{ item.paid }}</td>
      <td>
        <button
          type="button"
          class="btn sm secondary"
          @click="selectPerson(item)"
        >
          선택
        </button>
      </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>
                  </div>
                  <button @click="$emit('close')" class="close-btn">
                    <CloseCircleFilled />
                  </button>
                </div>
              </div>
</template>
<script>
import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue';

export default {
    data() {
        return {
            popuplistData: [
            {
    location: '서울',
    purpose: '회의 참석',
    period: '2025-05-10 ~ 2025-05-12',
    category: '교통(기차)',
    amount: '150,000',
    paid: '지급',
  }, {
    location: '서울',
    purpose: '회의 참석',
    period: '2025-05-10 ~ 2025-05-12',
    category: '점심식사',
    amount: '150,000',
    paid: '미지급',
  },
        
      ],
        }
    },
    components: {
    SearchOutlined, CloseCircleFilled
  },
  methods: {
    selectPerson(item) {
    this.$emit('select', item); // 부모에게 데이터 전달
  },
    
  }
}
</script>
<style scoped>
.popup-content {
    width: 50%;
}
</style>