<template>
  <div class="card ">
    <div class="card-body ">
      <h2 class="card-title">카드정보 관리</h2>
      <div class="flex align-top">
        <div class="sch-form-wrap search">
          <div class="input-group" style="display: flex;">
            <select v-model="searchReqDTO.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="searchReqDTO.searchText" @keyup.enter="searchCards">
              <button class="ico-sch" @click="searchCards">
                <SearchOutlined />
              </button>
            </div>
          </div>
          <div class="tbl-wrap table-scroll">
            <table id="myTable" class="tbl data">
              <!-- 동적으로 <th> 생성 -->
              <thead>
                <tr>
                  <th>카드목록 </th>
                </tr>
              </thead>
              <!-- 동적으로 <td> 생성 -->
              <tbody>
                <tr v-if="selectedCards.length === 0">
                  <td style="text-align: center;">등록된 카드정보가 없습니다.</td>
                </tr>
                <tr v-for="(item, index) in selectedCards" :key="index" @click="selectCard(item)">
                  <td>
                    {{ item.cardNm }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div style="width: 100%;">
          <div class=" sch-form-wrap title-wrap">
            <h3><img :src="h3icon" alt="">카드 정보</h3>
            <div class="buttons" style="margin: 0;">
              <button type="submit" class="btn sm sm tertiary" @click="resetCard">신규</button>
              <button type="reset" class="btn sm sm secondary" @click="insertByUpdateCard">
                {{ buttonText }}
              </button>
              <button type="delete" class="btn sm sm btn-red" @click="deleteByUseAtCard">삭제</button>
            </div>
          </div>
          <form class="row g-3 pt-3  needs-validation " @submit.prevent="handleSubmit" style="margin-bottom: 3rem;">

            <div class="col-12  ">
              <label for="cardNm" class="form-label">
                <p>카드명
                <p class="require"><img :src="require" alt=""></p>
                </p>
              </label>
              <input type="text" class="form-control " id="reason" v-model="selectedCard.cardNm" />
            </div>
            <div class="col-12  ">
              <label for="chargerId" class="form-label">
                <p>담당자
                <p class="require"><img :src="require" alt=""></p>
                </p>
              </label>
              <input type="text" class="form-control " id="reason" v-model="selectedCard.chargerId" readonly />
              <input type="button" class="form-control " value="검색" @click="showPopup = true" />
              <!-- 팝업 -->
              <HrPopup v-if="showPopup" @close="showPopup = false" @select="addApproval" />
            </div>
            <div class="col-12 chuljang ">
              <label for="prvonsh" class="form-label">비고</label>
              <input type="text" class="form-control textarea" id="reason" v-model="selectedCard.rm" />
            </div>
            <div class="col-12 border-x input-radio">
              <label for="prvonsh" class="form-label">
                <p>상태
                <p class="require"><img :src="require" alt=""></p>
                </p>
              </label>
              <select class="form-select" id="sttus" v-model="selectedCard.sttus">
                <option value="N">정상</option>
                <option value="R">재발급</option>
                <option value="D">폐기</option>
              </select>
            </div>


          </form>
          <div class=" sch-form-wrap title-wrap">
            <h3><img :src="h3icon" alt="">예약현황</h3>
          </div>
          <div class="tbl-wrap chk-area">
            <table id="myTable" class="tbl data">

              <thead>
                <tr>
                  <th>부서</th>
                  <th>신청자</th>
                  <th>기간</th>
                  <th>상태</th>
                </tr>
              </thead>
              <!-- 동적으로 <td> 생성 -->
              <tbody>
                <tr v-for="(item, index) in processedCards" :key="index">
                  <td>{{ item.deptId }}</td>
                  <td>{{ item.applcntId }}</td>
                  <td>{{ item.formattedPeriod }}</td>
                  <td :class="getStatusClass(item.status)">
                    {{ item.status }}
                  </td>
                </tr>
              </tbody>
            </table>

          </div>
          <Pagination :search="searchReqHisDTO" @onChange="fnChangeCurrentPage" />
        </div>
      </div>
    </div>

  </div>

</template>

<script>
import GoogleCalendar from "../../../component/GoogleCalendar.vue"
import HrPopup from "../../../component/Popup/HrPopup.vue";
import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
import { saveAsSetCard, findAllAsSetCard, updateAsSetCard, findAllAsSetCardHis } from "../../../../resources/api/asset"; //카드 정보 API
import Pagination from "../../../component/Pagination.vue";

export default {
  data() {
    return {
      showPopup: false,
      approvals: [],
      require: "/client/resources/img/require.png",
      h3icon: "/client/resources/img/h3icon.png",
      photoicon: "/client/resources/img/photo_icon.png",
      img1: "/client/resources/img/img.png",
      icon1: "/client/resources/img/icon.png",
      dateicon: "/client/resources/img/date.png",
      startbtn: "/client/resources/img/start.png",
      stopbtn: "/client/resources/img/stop.png",
      moreicon: "/client/resources/img/more.png",

      checkCard: false,
      cardId: null,
      selectedCards: [],
      selectedCardsHis: [],
      searchReqDTO: {
        searchType: "all",
        searchText: null,
        useAt: null,
        useAll: true,
      },
      searchReqHisDTO: {
        searchType: "all",
        searchText: null,
        useAt: null,
        useAll: false,
        listType:"all",

        currentPage: 1,
        recordSize: 4,
        pageSize: null,
        totalRecordCount: null,
        totalPageCount: null,
        startPage: null,
        endPage: null,
        limitStart: null,
        existPrevPage: null,
        existNextPage: null,
      },
      selectedCard: {
        cardNm: null,
        chargerId: null,
        rm: null,
        sttus: "N",
        useAt: "Y"
      },
    }
  },
  components: {
    SearchOutlined, CloseCircleFilled, HrPopup, Pagination
  },
  methods: {
    // 페이지 이동
    fnChangeCurrentPage(currentPage) {
      this.searchReqHisDTO.currentPage = Number(currentPage);
      console.log(this.searchReqHisDTO);
      this.$nextTick(() => {
        this.searchCardsHis();
      });
    },
    //카드 정보 전체 조회
    async searchCards() {
      try {
        const response = await findAllAsSetCard(this.searchReqDTO);
        if (response.status === 200) {
          this.selectedCards = response.data.data.card; // API 응답에서 카테고리 목록을 가져옴
        }
      } catch (error) {
        console.error("검색 중 오류 발생:", error);
      }
    },

    //카드 정보 사용 현황 전체 조회
    async searchCardsHis() {
      try {
        const response = await findAllAsSetCardHis(this.searchReqHisDTO);
        if (response.status === 200) {
          this.selectedCardsHis = response.data.data.cardHis; // API 응답에서 카테고리 목록을 가져옴
          this.searchReqHisDTO = response.data.data.search;
        }
      } catch (error) {
        console.error("검색 중 오류 발생:", error);
      }
    },

    // 카드 정보 등록 수정
    async insertByUpdateCard() {

      if (!this.validateCheck()) {
        return; // 유효성 검사 실패 시 함수 종료
      }
      if (this.cardId == null && this.cardId == "") {
        try {
          const response = await saveAsSetCard(this.selectedCard);
          if (response.status === 200) { // 성공 여부 체크
            alert("등록되었습니다.");
            window.location.reload();
          }
        } catch (error) {
          // HTTP 오류가 발생한 경우
          const errorMessage = error.response?.data?.message || "등록이 실패하였습니다.";
          alert(errorMessage); // 오류 메시지 표시
          this.searchCards();
        }
      } else {
        try {
          const response = await updateAsSetCard(this.cardId, this.selectedCard);
          if (response.status === 200) {
            alert("수정되었습니다.");
            window.location.reload();
          }
        } catch (error) {// HTTP 오류가 발생한 경우
          const errorMessage = error.response?.data?.message || "수정이 실패하였습니다.";
          alert(errorMessage); // 오류 메시지 표시
          this.searchCards();
        }
      }
    },

    // 등록 유효성 체크 함수
    validateCheck() {
      // 1. 카드명 (cardNm) 필수 체크
      if (!this.selectedCard.cardNm || this.selectedCard.cardNm.trim() === "") {
        alert("카드명은 필수 입력 항목입니다.");
        return false;
      }

      // 2. 담당자 (chargerId) 필수 체크
      if (!this.selectedCard.chargerId || this.selectedCard.chargerId.trim() === "") {
        alert("담당자는 필수 입력 항목입니다.");
        return false;
      }

      return true; // 모든 유효성 검사 통과
    },

    // 삭제 버튼을 눌렀을 시 삭제
    async deleteByUseAtCard() {
      try {
        this.selectedCard.useAt = "N";
        const response = await updateAsSetCard(this.cardId, this.selectedCard);
        if (response.status === 200) {
          alert("삭제되었습니다.");
          window.location.reload();
        }
      } catch (error) {
        alert("삭제가 실패하였습니다.");
      }
    },

    //선택한 카드의 정보를 오른쪽에 표시
    selectCard(item) {
      this.checkCard = true;
      this.cardId = item.cardId;
      this.selectedCard = {
        cardNm: item.cardNm,
        chargerId: item.chargerId,
        rm: item.rm,
        sttus: item.sttus,
        useAt: item.useAt
      };
    },

    // 신규 버튼을 눌렀을 시
    resetCard() {
      this.checkCard = false;
      this.selectedCard = {
        cardNm: null,
        chargerId: null,
        rm: null,
        sttus: "N",
        useAt: "Y"
      };
    },



    addApproval(selectedUser) {
      this.approvals.push({
        name: selectedUser.name
      });

      this.selectedCard.chargerId = selectedUser.name; // 입력창에 표시
      this.showPopup = false;
    },
    getStatusClass(status) {
      if (status === '예약') return 'status-pending';
      if (status === '사용 중') return 'status-pending';
      if (status === '반납') return 'status-approved';
      return ''; // 기본값
    },
  },
  watch: {

  },
  computed: {
    buttonText() {
      return this.checkCard ? "수정" : "등록";
    },
    // selectedCardsHis 데이터를 가공하여 화면에 표시할 데이터를 만듭니다.
    processedCards() {
      const now = new Date(); // 현재 시간

      // 날짜와 시간 문자열을 조합하여 Date 객체를 생성하는 헬퍼 함수
      const createDateTime = (dateStr, hourStr, minStr) => {
        // dateStr이 "YYYY-MM-DD HH:MM:SS.ms" 형태라고 가정하고 "YYYY-MM-DD" 부분만 추출
        const datePart = dateStr.split(' ')[0];
        const year = parseInt(datePart.substring(0, 4), 10);
        const month = parseInt(datePart.substring(5, 7), 10) - 1; // 월은 0부터 시작 (0=1월)
        const day = parseInt(datePart.substring(8, 10), 10);
        const hour = parseInt(hourStr, 10);
        const minute = parseInt(minStr, 10);
        return new Date(year, month, day, hour, minute, 0);
      };

      // Date 객체를 'YYYY-MM-DD HH:MI' 형식으로 포맷하는 헬퍼 함수
      const formatDateTime = (dateObj) => {
        const year = dateObj.getFullYear();
        const month = String(dateObj.getMonth() + 1).padStart(2, '0');
        const day = String(dateObj.getDate()).padStart(2, '0');
        const hour = String(dateObj.getHours()).padStart(2, '0');
        const minute = String(dateObj.getMinutes()).padStart(2, '0');
        return `${year}-${month}-${day} ${hour}:${minute}`;
      };

      return this.selectedCardsHis.map(item => {
        const startDateTime = createDateTime(item.bgnde, item.beginHour, item.beginMnt);
        const endDateTime = createDateTime(item.endde, item.endHour, item.endMnt);

        let status = '';
        if (now >= startDateTime && now <= endDateTime) {
          status = '사용 중'; // 현재 시간이 기간 안에 포함
        } else if (now < startDateTime) {
          status = '예약';    // 현재 시간이 시작일시보다 이전
        } else { // now > endDateTime
          status = '반납';    // 현재 시간이 종료일시보다 이후
        }

        return {
          ...item, // 원본 아이템의 모든 속성 유지
          formattedPeriod: `${formatDateTime(startDateTime)} ~ ${formatDateTime(endDateTime)}`, // 포맷된 기간 문자열
          status: status // 계산된 상태
        };
      });
    }
  },
  mounted() {
    console.log('main mounted');
    this.searchCards();
    this.searchCardsHis();
  }
}
</script>
<style scoped>
tr {
  cursor: pointer;
}
</style>