<template>
  <div class="card" style="height: 100%;">
    <div class="card-body">
      <div>
        <h2 class="card-title">승인 대기 목록</h2>
        <div style="height: 50%;">
          <div class="d-flex justify-between align-center">
            <h3 class="sub-title">승인 대기</h3>
            <div class="search-wrap mb10">
              <select class="form-select sm" v-model="pendingSearchParams.year" @change="handlePageChange(1, 'pending')">
                <option value="">연도 전체</option>
                <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
              </select>
              <select class="form-select sm" v-model="pendingSearchParams.month" @change="handlePageChange(1, 'pending')">
                <option value="">월 전체</option>
                <option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
              </select>
              <input type="text" class="form-control sm" v-model="pendingSearchParams.searchText" placeholder="검색어를 입력하세요." @keyup.enter="handleSearch('pending')">
              <button button="button" class="ico-sch" @click="handleSearch('pending')">
                <SearchOutlined />
              </button>
            </div>
          </div>
          <div class="tbl-wrap mb20">
            <table id="myTable" class="tbl data common-radius">
              <colgroup>
                <col style="width: 13.33%;">
                <col style="width: 13.33%;">
                <col style="width: 13.33%;">
                <col style="width: 30%;">
                <col style="width: 30%;">
              </colgroup>
              <thead>
                <tr>
                  <th style="border-radius: 1rem 0 0 0;">구분</th>
                  <th>결재구분</th>
                  <th>신청자</th>
                  <th>기간</th>
                  <th style="border-radius: 0 1rem 0 0;">신청일</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, idx) in pendingApprovalList" :key="idx" @click="handleDetailNavigation(item.sanctnMbyId)">
                  <td>{{ item.sanctnIemNm }}</td>
                  <td>{{ item.sanctnSeNm }}</td>
                  <td>{{ item.registerNm }}</td>
                  <td>{{ $formattedDates(item) }}</td>
                  <td>{{ item.rgsde }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <Pagenation :search="pendingSearchParams" @onChange="(currentPage) => handlePageChange(currentPage, 'pending')" />
        </div>
        <div style="height: 50%;">
          <div class="d-flex justify-between align-center">
            <h3 class="sub-title">승인 이력</h3>
            <div class="search-wrap mb10">
              <select class="form-select sm" v-model="historySearchParams.year" @change="handlePageChange(1, 'history')">
                <option value="">연도 전체</option>
                <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
              </select>
              <select class="form-select sm" v-model="historySearchParams.month" @change="handlePageChange(1, 'history')">
                <option value="">월 전체</option>
                <option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
              </select>
              <select name="" id="" class="form-select sm">
                <option value="all">상태</option>
                <option value="">승인</option>
                <option value="">반려</option>
              </select>
              <input type="text" class="form-control sm" v-model="historySearchParams.searchText" placeholder="검색어를 입력하세요." @keyup.enter="handleSearch('history')">
              <button button="button" class="ico-sch" @click="handleSearch('history')">
                <SearchOutlined />
              </button>
            </div>
          </div>
          <div class="tbl-wrap mb20">
            <table id="myTable" class="tbl data">
              <colgroup>
                <col style="width: 13.33%;">
                <col style="width: 13.33%;">
                <col style="width: 13.33%;">
                <col style="width: 30%;">
                <col style="width: 16.66%;">
                <col style="width: 13.33%;">
              </colgroup>
              <thead>
                <tr>
                  <th style="border-radius: 1rem 0 0 0;">구분</th>
                  <th>결재구분</th>
                  <th>신청자</th>
                  <th>기간</th>
                  <th>신청일</th>
                  <th style="border-radius: 0 1rem 0 0;">상태</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in approvalHistoryList" :key="index" class="expired" @click="handleDetailNavigation(item.sanctnMbyId)">
                  <td>{{ item.sanctnIemNm }}</td>
                  <td>{{ item.sanctnSeNm }}</td>
                  <td>{{ item.registerNm }}</td>
                  <td>{{ $formattedDates(item) }}</td>
                  <td>{{ item.rgsde }}</td>
                  <td>{{ item.confmAtNm }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <Pagenation :search="historySearchParams" @onChange="(currentPage) => handlePageChange(currentPage, 'history')" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { SearchOutlined } from '@ant-design/icons-vue';
import Pagenation from '../../../component/Pagination.vue';
// API
import { findPendingApprovalsProc } from '../../../../resources/api/sanctns';

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

  data() {
    return {
      sectionIcon: "/client/resources/img/h3icon.png",

      yearOptions: [2023, 2024, 2025], // 연도 목록
      monthOptions: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록

      // 승인 대기 목록
      pendingApprovalList: [],
      pendingSearchParams: {
        year: '',
        month: '',
        isConfmAt: true, // 변경불가 (고정값)
        searchText: '',
        currentUserId: this.$store.state.userInfo.userId, // 변경불가 (고정값)
      },
      // 승인 이력 목록
      approvalHistoryList: [],
      historySearchParams: {
        year: '',
        month: '',
        isConfmAt: false, // 변경불가 (고정값)
        searchText: '',
        currentUserId: this.$store.state.userInfo.userId, // 변경불가 (고정값)
      },
    };
  },

  created() {
    this.generateYearOptions();
  },

  mounted() {
    this.fetchApprovalList('pending'); // 승인 대기 목록
    this.fetchApprovalList('history'); // 승인 이력 목록
  },

  methods: {
    generateYearOptions() {
      const startYear = 2020;
      const currentYear = new Date().getFullYear();

      for (let year = currentYear; year >= startYear; year--) {
        this.yearOptions.push(year);
      }
    },

    // 목록 조회
    async fetchApprovalList(listType) {
      const vm = this;

      try {
        let searchParams = {};
        if (listType === 'pending') {
          searchParams = vm.pendingSearchParams;
        } else if (listType === 'history') {
          searchParams = vm.historySearchParams;
        }

        const response = await findPendingApprovalsProc(searchParams);
        const result = response.data.data;

        if (listType === 'pending') {
          vm.pendingApprovalList = result.lists;
          vm.pendingSearchParams = result.search;
        } else if (listType === 'history') {
          vm.approvalHistoryList = result.lists;
          vm.historySearchParams = result.search;
        }
      } catch (error) {
        this.handleError(error);
      };
    },

    // 검색 실행
    handleSearch(listType) {
      if (listType === 'pending') {
        this.pendingSearchParams.currentPage = 1;
      } else if (listType === 'history') {
        this.historySearchParams.currentPage = 1;
      }
      this.fetchApprovalList(listType);
    },

    // 페이지 변경
    handlePageChange(currentPage, listType) {
      if (listType === 'pending') {
        this.pendingSearchParams.currentPage = Number(currentPage);
      } else if (listType === 'history') {
        this.historySearchParams.currentPage = Number(currentPage);
      }

      this.$nextTick(() => {
        this.fetchApprovalList(listType);
      });
    },

    // 상세 페이지 이동
    handleDetailNavigation(id) {
      const approvalType = id.split('_')[0];

      if (approvalType === "VCATN") {
        this.$router.push({ name: 'HyugaDetail', query: { id, type: 'sanctns' } });
      } if (approvalType === "BSRP") {
        this.$router.push({ name: 'BsrpViewPage', query: { id, type: 'sanctns' } });
      }
    },

    // 에러 처리
    handleError(error) {
      const message = error.response?.data?.message || "에러가 발생했습니다.";
      alert(message);
      console.error(error.message);
    },
  },
};
</script>
<style scoped>
tr {
  cursor: pointer;
}
</style>