<template>
  <div class="col-lg-12">
    <div class="card">
      <div class="card-body">
        <h2 class="card-title">사용현황</h2>
        <div class="sch-form-wrap title-wrap">
          <h3><img :src="h3icon" alt="">예약현황</h3>
          <div class="input-group">
            <select v-model="searchReqHisResDTO.searchType" id="searchType" class="form-select">
              <option value="all">전체</option>
              <option value="cm">카드명</option>
              <option value="nm">신청자</option>
            </select>
            <div class="sch-input">
              <input type="text" class="form-control" v-model="searchReqHisResDTO.searchText"
                @keyup.enter="searchCardsHisRes">
              <button class="ico-sch" @click="searchCardsHisRes">
                <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>
              </tr>
            </thead>
            <!-- 동적으로 <td> 생성 -->
            <tbody>
              <tr v-if="!(cardHisResData && cardHisResData.length)">
                <td colspan="4" style="text-align: center;">등록된 예약현황이 없습니다.</td>
              </tr>
              <tr v-for="(item, index) in cardHisResData" :key="index">
                <td>{{ item.cardNm }}</td>
                <td>{{ item.deptId }}</td>
                <td>{{ item.applcntId }}</td>
                <td>
                  {{ item.bgnde }} {{ item.beginHour.padStart(2, '0') }}:{{ item.beginMnt.padStart(2, '0') }} ~
                  {{ item.endde }} {{ item.endHour.padStart(2, '0') }}:{{ item.endMnt.padStart(2, '0') }}
                </td>
              </tr>
            </tbody>
          </table>

        </div>
        <Pagenation :search="searchReqHisResDTO" @onChange="fnChangeCurrentPageRes" />
        <div class="sch-form-wrap title-wrap">
          <h3><img :src="h3icon" alt="">사용이력</h3>
          <div class="input-group">
            <select v-model="searchReqHisRtnDTO.searchType" id="searchType" class="form-select">
              <option value="all">전체</option>
              <option value="cm">카드명</option>
              <option value="nm">신청자</option>
            </select>
            <div class="sch-input">
              <input type="text" class="form-control" v-model="searchReqHisRtnDTO.searchText"
                @keyup.enter="searchCardsHisRtn">
              <button class="ico-sch" @click="searchCardsHisRtn">
                <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>
              </tr>
            </thead>
            <!-- 동적으로 <td> 생성 -->
            <tbody>
              <tr v-if="!(cardHisRtnData && cardHisRtnData.length)">
                <td colspan="4" style="text-align: center;">등록된 사용이력이 없습니다.</td>
              </tr>
              <tr v-for="(item, index) in cardHisRtnData" :key="index">
                <td>{{ item.cardNm }}</td>
                <td>{{ item.deptId }}</td>
                <td>{{ item.applcntId }}</td>
                <td>
                  {{ item.bgnde }} {{ item.beginHour.padStart(2, '0') }}:{{ item.beginMnt.padStart(2, '0') }} ~
                  {{ item.endde }} {{ item.endHour.padStart(2, '0') }}:{{ item.endMnt.padStart(2, '0') }}
                </td>
              </tr>
            </tbody>
          </table>

        </div>
        <Pagenation :search="searchReqHisRtnDTO" @onChange="fnChangeCurrentPageRtn" />
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import Pagenation from "../../../component/Pagenation.vue";
import { findAllAsSetCardHis } from "../../../../resources/api/asset"; //카드 정보 API
export default {
  data() {
    return {
      photoicon: "/client/resources/img/photo_icon.png",
      h3icon: "/client/resources/img/h3icon.png",

      searchReqHisResDTO: {
        searchType: "all",
        searchText: null,
        useAt: null,
        useAll: false,
        listType: "res",

        currentPage: null,
        recordSize: 3,
        pageSize: null,
        totalRecordCount: null,
        totalPageCount: null,
        startPage: null,
        endPage: null,
        limitStart: null,
        existPrevPage: null,
        existNextPage: null,
      }, // 예약현황
      cardHisResData: [],     // 예약현황 데이터
      searchReqHisRtnDTO: {
        searchType: "all",
        searchText: null,
        useAt: null,
        useAll: false,
        listType: "rtn",

        currentPage: null,
        recordSize: 3,
        pageSize: null,
        totalRecordCount: null,
        totalPageCount: null,
        startPage: null,
        endPage: null,
        limitStart: null,
        existPrevPage: null,
        existNextPage: null,
      }, // 사용현황
      cardHisRtnData: [],     // 예약현황 데이터
    };
  },
  computed: {
  },
  components: {
    SearchOutlined, Pagenation
  },
  methods: {
    // 페이지 이동 예약현황황
    fnChangeCurrentPageRes(currentPage) {
      this.searchReqHisResDTO.currentPage = Number(currentPage);
      this.$nextTick(() => {
        this.searchCardsHisRes();
      });
    },
    //카드 정보 사용 현황 예약현황
    async searchCardsHisRes() {
      try {
        const response = await findAllAsSetCardHis(this.searchReqHisResDTO);
        if (response.status === 200) {
          this.cardHisResData = response.data.data.cardHis; // API 응답에서 카테고리 목록을 가져옴
          this.searchReqHisResDTO = response.data.data.search;
        }
      } catch (error) {
        console.error("검색 중 오류 발생:", error);
      }
    },
    // 페이지 이동 사용현황 
    fnChangeCurrentPageRtn(currentPage) {
      this.searchReqHisRtnDTO.currentPage = Number(currentPage);
      this.$nextTick(() => {
        this.searchCardsHisRtn();
      });
    },
    //카드 정보 사용 현황 사용현황
    async searchCardsHisRtn() {
      try {
        const response = await findAllAsSetCardHis(this.searchReqHisRtnDTO);
        if (response.status === 200) {
          this.cardHisRtnData = response.data.data.cardHis; // API 응답에서 카테고리 목록을 가져옴
          this.searchReqHisRtnDTO = response.data.data.search;
        }
      } catch (error) {
        console.error("검색 중 오류 발생:", error);
      }
    },
  },
  created() {
  },
  mounted() {
    this.searchCardsHisRes();
    this.searchCardsHisRtn();
  },
};
</script>

<style scoped></style>