<!--
 Program: UserListPopup.vue
 Author: SDL
 Description: A pop-up screen that queries the user's information and sends the selected user's information.
-->
<template>
  <div class="modal-dialog modal-dialog-centered  modal-dialog-scrollable modal-lg">
    <div class="modal-content" style="height:624px;">
      <!-- contents -->
      <div class="modal-header">
        <h5 class="modal-title h4">
          {{ $t('sdl.approval.label.requiredApprovalUser') }} {{ $t('sdl.common.label.search') }}
        </h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" @click="$emit('close')"></button>
      </div>
      <div class="modal-body">
        <!-- TABLE Area-->
        <table class="table table-bordered ui--table">
          <colgroup>
            <col style="width:3%" />
            <col style="width:16%" />
            <col style="width:13%" />
          </colgroup>
          <thead>
            <tr>
              <th scope="col">
                <input type="checkbox" @click.stop v-model="selectAll" @change="toggleSelectAll" />
              </th>
              <th scope="col">{{ $t('sdl.common.label.name') }}</th>
              <th scope="col">{{ $t('sdl.user.label.deptName') }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in userList" :key="user.userId">
              <td class="text-center">
                <input type="checkbox" v-model="user.selected" @change="selectRow(user)" />
              </td>
              <td class="text-left">{{ user.userName }}</td>
              <td class="text-left">{{ user.deptName }}</td>
            </tr>
          </tbody>
        </table>
        <!-- TABLE Area-->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="$emit('close')">
          {{ $t('sdl.common.label.cancel') }}
        </button>
        <button type="button" class="btn btn-primary" @click="rtnData">{{ $t('sdl.common.label.confirm') }}</button>
      </div>
      <!-- // contents -->
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { SDLUtil } from '@/utils';

export default {
  data() {
    return {
      selectAll: false,
      per_page: null,
      current_page: null,
      total: null,
      userList: [],
      selectUser: [],
      checkUserId: '',
    };
  },
  props: {
    docType: {
      required: false,
      type: String,
    },
    rtnFunc: {
      type: Function,
    },
  },
  methods: {
    /**
     * param: object
     * return: nothing
     * exception: nothing
     * description: User Lookup List Checkbox Click
     */
    selectRow(item) {
      if (!item.selected) {
        if (this.selectAll) {
          this.selectAll = false;
        }
      }
    },
    /**
     * param: nothing
     * return: nothing
     * exception: nothing
     * description: Select All
     */
    toggleSelectAll() {
      this.userList.forEach(user => {
        user.selected = this.selectAll;
      });
    },
    /**
     * param:
     * return: nothing
     * exception: Call error alert
     * description: getRequiredApprovalList
     */
    getRequiredApprovalList() {
      // Loading bar execution
      SDLUtil.showLoadingBar(true);
      axios
        .get(`${SDLUtil.API_URL}/approval/required-approval-users/${this.docType}`)
        .then(response => {
          Object.keys(response.data).forEach(i => {
            const userInfo = response.data[i];
            if (userInfo.employeeStatus === 'B') {
              this.userList.push(userInfo);
            }
          });
          // Loading bar hidden
          SDLUtil.showLoadingBar(false);
        })
        .catch(error => {
          SDLUtil.showLoadingBar(false);
          console.log(error);
        });
    },
    /**
     * param: nothing
     * return: nothing
     * exception: nothing
     * description: Calling up functions that send selected user information to the screen from which it was recalled
     */
    rtnData() {
      let selectUser = [];

      /**
       * Apply outgoing values by branching out if they are applied on a quarterly basis
       */
      selectUser = this.userList.filter(user => user.selected);

      this.rtnFunc(selectUser);
      this.$emit('close');
    },
  },
  created() {
    this.getRequiredApprovalList();
  },
};
</script>
<style></style>
