<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">
                          <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>
                            </tr>
                          </thead>
                          <!-- 동적으로 <td> 생성 -->
                          <tbody>
                            <tr v-for="(item, index) in popuplistData" :key="index">
      <td>{{ item.parentCode }}</td>
      <td>{{ item.parentCodeName }}</td>
      <td>{{ item.code }}</td>
      <td>{{ item.codeName }}</td>
      <td>
        <button
          type="button"
          class="btn sm 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: [
            {
        parentCode: '상위코드1',
        parentCodeName: '상위코드명1',
        code: '코드1',
        codeName: '코드명1'
      },
      ],
        }
    },
    components: {
    SearchOutlined, CloseCircleFilled
  },
  methods: {
    selectPerson(item) {
    this.$emit('select', item); // 부모에게 데이터 전달
  },
    
  }
}
</script>
<style scoped>
.popup-content {
    width: 50%;
}
</style>