<template>
  <div class="popup-overlay" @click.self="handleClose">
    <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="searchParams.searchText" @keyup.enter="handleSearch">
                <button type="button" class="ico-sch" @click="handleSearch">
                  <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="(employee, index) in employeeList" :key="index">
                  <td>{{ employee.clsfNm }}</td>
                  <td>{{ employee.rspofcNm }}</td>
                  <td>{{ employee.deptNm }}</td>
                  <td>{{ employee.userNm }}</td>
                  <td>
                    <button type="button" class="btn sm secondary" @click="handleSelectEmployee(employee)" :disabled="isEmployeeDisabled(employee.userId)"> 선택 </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <Pagination :search="searchParams" @onChange="handlePageChange" />
        </div>
      </div>
      <button @click="handleClose" class="close-btn">
        <CloseCircleFilled />
      </button>
    </div>
  </div>
</template>
<script>
import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
import Pagination from '../Pagination.vue';
// API
import { findUsersForModalProc } from '../../../resources/api/user';

export default {
  name: 'EmployeeSelectionModal',

  components: {
    SearchOutlined,
    CloseCircleFilled,
    Pagination
  },

  props: {
    // 이미 선택된 사용자 목록
    selectedEmployees: {
      type: Array,
      default: () => [],
    },

    // 사용자 목록 내 유저아이디 key(혹은 column) 값
    idField: {
      type: String,
      default: 'userId',
    },

    // 필터링용 날짜 정보
    dateInfo: {
      type: Object,
      default: () => ({}),
    }
  },

  emits: ['close', 'select'],

  data() {
    return {
      employeeList: [],

      searchParams: {
        searchType: 'nm', // 검색조건 (사용자 이름으로 고정)
        searchText: null, // 검색어

        bgnde: null,       // 시작 일 (YYYY-MM-DD)
        beginHour: null,   // 시작 시
        endde: null,       // 종료 일 (YYYY-MM-DD)
        endHour: null,     // 종료 시
      },
    }
  },

  computed: {
    selectedEmployeeIds() {
      return new Set(this.selectedEmployees.map(member => member[this.idField]));
    }
  },

  watch: {
    dateInfo: {
      handler(newDateInfo) {
        this.applyDateInfo(); // dateInfo 검색 조건에 적용
      },
      deep: true,
      immediate: true
    }
  },

  mounted() {
    this.fetchEmployeeList();
  },

  methods: {
    // dateInfo 검색 조건에 적용
    applyDateInfo() {
      if (this.dateInfo && Object.keys(this.dateInfo).length > 0) {
        this.searchParams.bgnde = this.dateInfo.bgnde || null;
        this.searchParams.beginHour = this.dateInfo.beginHour || null;
        this.searchParams.endde = this.dateInfo.endde || null;
        this.searchParams.endHour = this.dateInfo.endHour || null;
      }
    },

    // 직원 목록 조회
    async fetchEmployeeList() {
      try {
        const response = await findUsersForModalProc(this.searchParams);
        const result = response.data.data;

        this.employeeList = result.users;
        this.searchParams = result.search;
      } catch (error) {
        const message = error.response?.data?.message || '데이터 조회에 실패했습니다.';
        alert(message);
        console.error(error);
      }
    },

    // 검색 처리
    async handleSearch() {
      await this.fetchEmployeeList();
    },

    // 직원 선택 불가 여부 확인
    isEmployeeDisabled(userId) {
      return this.selectedEmployeeIds.has(userId) || this.$store.state.userInfo.userId === userId;
    },

    // 직원 선택
    handleSelectEmployee(employee) {
      this.$emit('select', employee);
      this.handleClose();
    },

    // 모달 닫기
    handleClose() {
      this.$emit('close');
    },

    // 페이지 변경
    handlePageChange(currentPage) {
      this.searchParams.currentPage = Number(currentPage);
      this.$nextTick(() => {
        this.fetchEmployeeList();
      });
    },
  }
}
</script>
<style scoped>
.popup-content {
  width: 50%;
}
</style>