<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>
          </div>
        </div>
        <div class="tbl-wrap">
          <table id="myTable" class="tbl data">
            <thead>
              <tr>
                <th>출장구분</th>
                <th>출장지</th>
                <th>목적</th>
                <th>출장기간</th>
                <th>품의서 상태</th>
                <th>복명서 등록 여부</th>
                <th>복명서 상태</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, idx) in lists" :key="idx" :class="{ 'expired': item.hasRport }" @click="fnMoveTo('view', item.bsrpId)">
                <td>{{ item.bsrpSeNm }}</td>
                <td>{{ item.bsrpPlace }}</td>
                <td>{{ item.bsrpPurps }}</td>
                <td>{{ item.bgnde }}</td>
                <td>{{ item.bsrpCnsulDTO.confmAtNm }}</td>
                <td>{{ item.hasRport ? '등록' : '미등록' }}</td>
                <td>{{ item.hasRport ? item.bsrpRportDTO.confmAt : '-' }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <Pagenation :search="request" @onChange="fnChangeCurrentPage" />
      </div>
    </div>
  </div>
</template>
<script>
import { SearchOutlined } from '@ant-design/icons-vue';
// API
import { bsrpsProc } from '../../../../resources/api/bsrp';

export default {
  components: {
    SearchOutlined
  },

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

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

      cmmnCodes: {},
      request: {
        year: '',
        month: '',
      },
      lists: [],
    };
  },

  watch: {},

  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() {
      try {
        const response = await bsrpsProc(this.request);
        const result = response.data.data;

        this.lists = result.lists;
        this.request = result.search;
      } catch (error) {
        const message = error.response.data.message;
        alert(message);
      }
    },

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

    fnMoveTo(type, id) {
      const routes = {
        'list': { name: 'ChuljangStatue' },
        'view': { name: 'ChuljangDetailAll', query: { id } },
        'edit': { name: 'ChuljangInsert', query: this.$isEmpty(id) ? {} : { id } },
      };

      if (routes[type]) {
        if (!this.$isEmpty(this.pageId) && type === 'list') {
          this.$router.push({ name: 'ChuljangDetailAll', query: { id: this.pageId } });
          return;
        }
        this.$router.push(routes[type]);
      } else {
        alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
        this.$router.push(routes['list']);
      }
    },
  },
};
</script>
<style scoped>
tr {
  cursor: pointer;
}
</style>
