<template>
  <div class="col-lg-12">
    <div class="card">
      <div class="card-body">
        <h2 class="card-title">결재 요청</h2>
        <div class="sch-form-wrap">
          <div class="input-group">
            <select class="form-select" v-model="request.year" @change="fnChangeCurrentPage(1)">
              <option value="">연도 전체</option>
              <option v-for="year in years" :key="year" :value="year">{{ year }}년</option>
            </select>
            <select class="form-select" v-model="request.month" @change="fnChangeCurrentPage(1)">
              <option value="">월 전체</option>
              <option v-for="month in months" :key="month" :value="month">{{ month }}월</option>
            </select>
            <select name="" id="" class="form-select">
              <option value="" selected>전체</option>
              <option value="">출장-복명</option>
              <option value="">출장-품의</option>
              <option value="">연차</option>
              <option value="">반차-오전</option>
              <option value="">반차-오후</option>
              <option value="">대체휴가</option>
              <option value="">공가</option>
              <option value="">병가</option>
            </select>
          </div>
        </div>
        <div class="tbl-wrap">
          <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>구분</th>
                <th>결재구분</th>
                <th>신청자</th>
                <th>기간</th>
                <th>신청일</th>
                <th>상태</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, idx) of lists" :key="idx">
                <td>{{ item.sanctnIemNm }}</td>
                <td>{{ item.sanctnSeNm }}</td>
                <td>{{ item.applcntNm }}</td>
                <td>{{ $formattedDates(item) }}</td>
                <td>{{ item.rgsde }}</td>
                <td>{{ item.confmAtNm }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <Pagenation :search="request" @onChange="fnChangeCurrentPage" />
        <div class="buttons">
          <button type="button" class="btn sm primary" @click="showOptions = true"> 등록 </button>
        </div>
      </div>
    </div>
  </div>
  <div v-if="showOptions" class="popup-overlay">
    <div class="popup-content">
      <div class="card">
        <div class="card-body">
          <h2 class="card-title">신청종류선택</h2>
          <div class="buttons">
            <button class="btn hyuga" @click="goToPage('휴가')">휴가신청</button>
            <button class="btn chuljang" @click="goToPage('출장')">출장신청</button>
          </div>
        </div>
      </div>
      <button class="close-btn" @click="showOptions = false">
        <CloseCircleFilled />
      </button>
    </div>
  </div>
</template>
<script>
import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
import Pagenation from '../../../component/Pagenation.vue';
// API
import { findSanctnsProc } from '../../../../resources/api/sanctns';

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

  data() {
    return {
      photoicon: "/client/resources/img/photo_icon.png",
      showOptions: false,

      years: [],
      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],

      lists: [],
      request: {
        year: '',
        month: '',
        register: this.$store.state.userInfo.userId,
      },
    };
  },

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

  mounted() {
    this.findList(); // 목록 조회
  },

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

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

    // 목록 조회
    async findList() {
      const vm = this;
      try {
        const response = await findSanctnsProc(vm.request);
        const result = response.data.data;

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

    // 페이지 이동
    fnChangeCurrentPage(currentPage) {
      this.request.currentPage = Number(currentPage);
      this.$nextTick(() => {
        this.findList();
      });
    },
  },
};
</script>