<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="sch-input">
                <input type="text" class="form-control" placeholder="직원명" v-model="request.searchText" @keyup.enter="findDatas">
                <button type="button" class="ico-sch" @click="findDatas">
                  <SearchOutlined />
                </button>
              </div>
            </div>
          </div>
          <div class="tbl-wrap">
            <table id="myTable" class="tbl data">
              <thead>
                <tr>
                  <th>직급</th>
                  <th>직책</th>
                  <th>부서</th>
                  <th>이름</th>
                  <th>선택</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, idx) in users" :key="idx">
                  <td>{{ item.clsfNm }}</td>
                  <td>{{ item.rspofcNm }}</td>
                  <td>{{ item.deptNm }}</td>
                  <td>{{ item.userNm }}</td>
                  <td>
                    <button type="button" class="btn sm sm secondary" @click="selectPerson(item)" :disabled="isUserSelected(item.userId)">선택</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <Pagination :search="request" @onChange="fnChangeCurrentPage" />
        </div>
      </div>
      <button @click="$emit('close')" class="close-btn">
        <CloseCircleFilled />
      </button>
    </div>
  </div>
</template>
<script>
import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
import Pagination from '../Pagination.vue';
// API
import { findUsersProc } from '../../../resources/api/user';

export default {
  components: {
    SearchOutlined, CloseCircleFilled,
    Pagination
  },

  props: {
    lists: {
      type: Array,
      default: () => [],
    }
  },

  data() {
    return {
      users: [],

      request: {
        searchType: 'nm', // 검색조건 사용자 이름 고정
        searchText: null, // 검색어
        searchSttus: 1, // 회원상태 승인 고정
        searchUseAt: 'Y', // 사용여부 사용 고정
      },
    }
  },

  computed: {
    selectedUserIds() {
      return new Set(this.lists.map(sanctn => sanctn.confmerId));
    }
  },

  watch: {},

  created() { },

  mounted() {
    this.findDatas(); // 목록 조회

  },

  methods: {
    // 목록 조회
    async findDatas() {
      try {
        const response = await findUsersProc(this.request);
        const result = response.data.data;

        this.users = result.users;
        this.request = result.search;
      } catch (error) {
        if (error.response) {
          alert(error.response.data.message);
        } else {
          alert("에러가 발생했습니다.");
        }
        console.error(error.message);
      }
    },

    // 사용자 검증
    isUserSelected(userId) {
      return this.selectedUserIds.has(userId);
    },

    // 승인자 선택
    selectPerson(item) {
      this.$emit('onSelected', item);
    },

    // 페이지 이동
    fnChangeCurrentPage(currentPage) {
      this.request.currentPage = Number(currentPage);
      this.$nextTick(() => {
        this.findDatas();
      });
    },
  }
}
</script>
<style scoped>
.popup-content {
  width: 50%;
}
</style>