<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" v-model="request.searchText" @keyup.enter="fnChangeCurrentPage(1)">
                <button class="ico-sch" @click="fnChangeCurrentPage(1)">
                  <SearchOutlined />
                </button>
              </div>
            </div>
          </div>
          <div class="tbl-wrap">
            <table id="myTable" class="tbl data">
              <thead>
                <tr>
                  <th>카드명</th>
                  <th>선택</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, idx) in items" :key="idx">
                  <td>{{ item.cardNm }}</td>
                  <td>
                    <button type="button" class="btn sm sm secondary" @click="selectCard(item)" :disabled="isSelected(item.cardId)">선택</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <Pagenation :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 Pagenation from '../Pagenation.vue';
// API
import { findAllAsSetCard } from '../../../resources/api/asset'

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

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

  data() {
    return {
      items: [],

      request: {
        searchType: "vm",       // 검색조건 ( all: 전체, vm: 차량명, vn: 차량 번호 )
        searchText: null,       // 검색어
        useAt: null,            // 사용여부 ( N: 미사용, Y: 사용 )
        selectedCardIds: null,  // 선택된 카드 Id
        bgnde: null,            // 시작 일
        beginHour: null,        // 시작 시
        beginMnt: null,         // 시작 분
        endde: null,            // 종료 일
        endHour: null,          // 종료 시
        endMnt: null,           // 종료 분
      },
    }
  },

  computed: {
    selectedIds() {
      return new Set(this.lists.map(item => item.cardId));
    }
  },

  watch: {
    editData: {
      handler(newVal) {
        if (newVal) {
          this.request.bgnde = newVal.bgnde;
          this.request.beginHour = newVal.beginHour;
          this.request.beginMnt = newVal.beginMnt;
          this.request.endde = newVal.endde;
          this.request.endHour = newVal.endHour;
          this.request.endMnt = newVal.endMnt;

          this.findDatas();
        }
      },
      deep: true,
      immediate: true
    }
  },

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

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

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

    // 카드 검증
    isSelected(id) {
      return this.selectedIds.has(id);
    },

    // 카드 선택
    selectCard(item) {
      this.$emit('onSelected', item);
    },

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

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>