<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 class="form-select" v-model="waitRequest.year" @change="fnChangeCurrentPage(1, 'wait')">
              <option value="">연도 전체</option>
              <option v-for="year in years" :key="year" :value="year">{{ year }}년</option>
            </select>
            <select class="form-select" v-model="waitRequest.month" @change="fnChangeCurrentPage(1, 'wait')">
              <option value="">월 전체</option>
              <option v-for="month in months" :key="month" :value="month">{{ month }}월</option>
            </select>
            <div class="sch-input">
              <input type="text" class="form-control" placeholder="신청자명">
              <button class="ico-sch">
                <SearchOutlined />
              </button>
            </div>
          </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: 30%;">
            </colgroup>
            <thead>
              <tr>
                <th>구분</th>
                <th>결재구분</th>
                <th>신청자</th>
                <th>기간</th>
                <th>신청일</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, idx) in waitList" :key="idx">
                <td>{{ item.sanctnIemNm }}</td>
                <td>{{ item.sanctnSeNm }}</td>
                <td>{{ item.applcntNm }}</td>
                <td>{{ $formattedDates(item) }}</td>
                <td>{{ item.rgsde }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <Pagenation :search="waitRequest" @onChange="(currentPage) => fnChangeCurrentPage(currentPage, 'wait')" />
        <div class="sch-form-wrap title-wrap">
          <h3><img :src="h3icon" alt="">승인 이력</h3>
          <div class="input-group">
            <select class="form-select" v-model="confmRequest.year" @change="fnChangeCurrentPage(1, 'wait')">
              <option value="">연도 전체</option>
              <option v-for="year in years" :key="year" :value="year">{{ year }}년</option>
            </select>
            <select class="form-select" v-model="confmRequest.month" @change="fnChangeCurrentPage(1, 'wait')">
              <option value="">월 전체</option>
              <option v-for="month in months" :key="month" :value="month">{{ month }}월</option>
            </select>
            <select name="" id="" class="form-select">
              <option value="all">상태</option>
              <option value="">승인</option>
              <option value="">반려</option>
            </select>
            <div class="sch-input">
              <input type="text" class="form-control" placeholder="신청자명">
              <button class="ico-sch">
                <SearchOutlined />
              </button>
            </div>
          </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, index) in confmList" :key="index" :class="{ 'expired': true }">
                <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="confmRequest" @onChange="(currentPage) => fnChangeCurrentPage(currentPage, 'wait')" />
      </div>
    </div>
  </div>
</template>
<script>
import { SearchOutlined } from '@ant-design/icons-vue';
import Pagenation from '../../../component/Pagenation.vue';
// API
import { findSanctnsProc } from '../../../../resources/api/sanctns';

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

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

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

      // 목록 조회용
      waitList: [],
      waitRequest: {
        year: '',
        month: '',
        sanctnDe: null, // 결재일
        sanctnIem: null, // 결재항목 : 출장 구분 or 휴가 종류 (휴가/출장 구분 코드)
        sanctnMbyId: null, // 결재 주체 아이디 : 휴가/출장 아이디
        confmAts: "W", // 승인여부
        confmerId: this.$store.state.userInfo.userId,
      },
      confmList: [],
      confmRequest: {
        year: '',
        month: '',
        sanctnDe: null, // 결재일
        sanctnIem: null, // 결재항목 : 출장 구분 or 휴가 종류 (휴가/출장 구분 코드)
        sanctnMbyId: null, // 결재 주체 아이디 : 휴가/출장 아이디
        confmAts: "A,R", // 승인여부
        confmerId: this.$store.state.userInfo.userId,
      },

      // 공통코드 목록
      sanctnCodes: [], // 결재 종류 코드 목록
      sanctnMbyCodes: [], // 결재 항목 코드 목록
      sanctnConfmCodes: [], // 결재 상태 코드 목록
    };
  },

  computed: {},

  created() { },

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

  methods: {
    // 목록 조회
    async findList(type) {
      const vm = this;

      try {
        let request = {};
        if (type === 'wait') {
          request = vm.waitRequest;
        } else if (type == 'confm') {
          request = vm.confmRequest;
        }

        const response = await findSanctnsProc(request);
        const result = response.data.data;

        if (type === 'wait') {
          vm.waitList = result.lists;
          vm.waitRequest = result.search;
        } else if (type == 'confm') {
          vm.confmList = result.lists;
          vm.confmRequest = result.search;
        }
      } catch (error) {
        if (error.response) {
          alert(error.response.data.message);
        } else {
          alert("에러가 발생했습니다.");
        }
        console.error(error.message);
      };
    },

    // 페이지 이동
    fnChangeCurrentPage(currentPage, type) {
      if (type === 'wait') {
        this.waitRequest.currentPage = Number(currentPage);
      } else if (type === 'confm') {
        this.confmRequest.currentPage = Number(currentPage);
      }

      this.$nextTick(() => {
        this.findList(type);
      });
    },
  },
};
</script>
<style scoped>
tr {
  cursor: pointer;
}
</style>