<!--
Program: External User List
Author: SDL
Description: External User List
-->
<template>
  <!-- SUB Contents -->
  <div class="ui--content-wrapper">
    <sdl-breadcrumb></sdl-breadcrumb>
    <!-- SEARCH Area -->
    <div class="ui--search-container clearfix">
      <div class="col-10 float-start">
        <div class="row">
          <div class="col-6">
            <!-- form -->
            <div class="row">
              <label class="col-4 col-form-label text-end">{{ $t('sdl.user.label.userCondition') }}</label>
              <div class="col-8">
                <div class="input-group">
                  <!-- dropdown -->
                  <select class="form-select" style="width:35%" v-model="searchParam.searchCondition">
                    <option :value="userType.code" v-for="userType in userTypeList" :key="userType.codeId">
                      {{ getLabel(userType) }}
                    </option>
                  </select>
                  <input
                    type="text"
                    class="form-control"
                    style="width:65%"
                    v-model="searchParam.searchKeyword"
                    @keyup.esc="searchParam.searchKeyword = ''"
                    @keyup.enter="onSearch()"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- //row1 -->
      </div>
      <!-- search button -->
      <div class="col-2 float-end text-end">
        <button class="btn btn-primary btn-search" type="button" @click="onSearch()">
          {{ $t('sdl.common.label.search') }}
        </button>
      </div>
    </div>
    <!-- LIST Header & buttons -->
    <div class="ui--list-heading clearfix">
      <span class="ui--text-total"><strong>Total</strong> {{ $filters.numberFormat(records) }}</span>
      <div class="float-end">
        <sdl-exceldownloadbtn :excelInfo="getExcelInfo()" class="btn btn-secondary btn-sm"></sdl-exceldownloadbtn>
      </div>
    </div>
    <!-- TABLE  Area-->
    <table class="table table-bordered ui--table">
      <colgroup>
        <col style="width:15%" />
        <col style="width:30%" />
        <col style="width:17%" />
        <col style="width:20%" />
        <col style="width:8%" />
        <col style="width:10%" />
      </colgroup>
      <thead>
        <tr>
          <th scope="col">{{ $t('sdl.user.label.compName') }}</th>
          <th scope="col">{{ $t('sdl.user.label.deptName') }}</th>
          <th scope="col">{{ $t('sdl.user.label.userName') }}</th>
          <th scope="col">{{ $t('sdl.user.label.knoxId') }}</th>
          <th scope="col">{{ $t('sdl.user.label.workStatus') }}</th>
          <th scope="col">{{ $t('sdl.user.label.status') }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="grid in gridList" :key="grid.knoxId">
          <td class="text-left">{{ grid.compName }}</td>
          <td class="text-left">{{ grid.deptName }}</td>
          <td class="text-left">{{ grid.userName }}</td>
          <td class="text-left">{{ grid.knoxId }}</td>
          <td class="text-center">
            <span v-if="grid.expireStatus === 'RETIRE'">{{
              $t('sdl.user.label.retire')
            }}</span>
            <span v-else-if="grid.expireStatus === 'MOVE'">{{
              $t('sdl.user.label.move')
            }}</span>
            <span v-else-if="grid.expireStatus === 'LONG_TERM'">{{
              $t('sdl.user.label.longTerm')
            }}</span>
            <span v-else-if="grid.expireStatus === 'DELETED'">{{
              $t('sdl.common.label.delete')
            }}</span>
            <span v-else-if="grid.expireStatus === null">{{
              $t('sdl.user.label.work')
            }}</span>
            <span v-else-if="grid.expireStatus === ''">{{
              $t('sdl.user.label.work')
            }}</span>
            <span v-else>{{
              $t('sdl.user.label.work')
            }}</span>
          </td>
          <td class="text-center">
            <span v-if="grid.userStatus === 'ACTIVE'" class="badge ui--status-primary">{{
              $t('sdl.user.label.active')
            }}</span>
            <span v-else-if="grid.userStatus === 'INACTIVE'" class="badge ui--status-rejected">{{
              $t('sdl.user.label.inactive')
            }}</span>
            <span v-else-if="grid.userStatus === 'WAITING'" class="badge ui--status-processing">{{
              $t('sdl.user.label.waiting')
            }}</span>
            <span v-else-if="grid.userStatus === 'DELETED'" class="badge ui--status-secondary">{{
              $t('sdl.common.label.delete')
            }}</span>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- // TABLE  Area-->
    <!-- Pagination Area-->
    <sdl-pagination
      :current-page="currentPage"
      :total-rows="records"
      :per-page="pageSize"
      @change="onSearch"
      align="center"
    />
    <!--  // Pagination Area-->
  </div>
</template>

<script>
import axios from 'axios';
import { SDLUtil, StringUtil } from '@/utils';
import SDLLocale from '@/mixin/SDLLocale';

export default {
  data() {
    return {
      userTypeList: [],
      gridList: [],
      records: 0,
      currentPage: 1, // current page number
      pageSize: 10, // number of lists per page
      excelInfo: {},
      searchParam: {
        searchCondition: '',
        searchKeyword: '',
        deleted: '0',
        activeFlag: '1',
        externalUser: '1',
        active: 'ACTIVE',
        orderBy: 'FIRST_REG_DATETIME DESC',
        isExcel: null,
      },
    };
  },
  mixins: [SDLLocale],
  methods: {
    /**
     * param:
     * return:
     * exception:
     * Description : page initialization
     */
    init() {
      this.onSearch();
    },
    /**
     * param:
     * return:
     * exception:
     * Description : setting Excel Info
     */
    getExcelInfo() {
      const name = SDLUtil.getMsgProp('sdl.user.label.externalUserMgmt');
      return {
        columnInfoFile: 'externalUser',
        fileName: name,
        queryId: 'selectUser',
        sheetName: name,
        useNumberField: 'Y',
        param: {
          ...this.searchParam,
          isExcel: 'Y',
        },
      };
    },
    /**
     * param:
     * return:
     * exception:
     * Description : search
     */
    onSearch(pageIndex = 1) {
      this.currentPage = pageIndex;
      const params = {
        ...this.searchParam,
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
      };
      // Loading bar execution
      SDLUtil.showLoadingBar(true);
      axios
        .get(`${SDLUtil.API_URL}/auth/users/status/external?${StringUtil.queryStringfy(params)}`)
        .then(response => {
          this.gridList = response.data.rows;
          this.records = response.data.records;

          // Adding employment status
          this.gridList.forEach(user => {
            if (user.expireStatus === null) {
              user.expireStatusName = SDLUtil.getMsgProp('sdl.user.label.work');
            } else if (user.expireStatus === 'RETIRE') {
              user.expireStatusName = SDLUtil.getMsgProp('sdl.user.label.retire');
            } else if (user.expireStatus === 'MOVE') {
              user.expireStatusName = SDLUtil.getMsgProp('sdl.user.label.move');
            } else if (user.expireStatus === 'LONG_TERM') {
              user.expireStatusName = SDLUtil.getMsgProp('sdl.user.label.longTerm');
            } else {
              user.expireStatusName = SDLUtil.getMsgProp('sdl.user.label.work');
            }
          });

          // Loading bar hidden
          SDLUtil.showLoadingBar(false);
        })
        .catch(error => {
          SDLUtil.showLoadingBar(false);
          SDLUtil.errorAlert(error);
          console.log(error);
        });
    },
  },
  created() {
    // user query condition type common code
    axios.get(`${SDLUtil.API_URL}/commcode/groupcodes/USER_SEARCH_TYPE/commcodes`).then(({ data }) => {
      this.userTypeList = data;
    });

    this.searchParam.searchCondition = 'userName';
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped></style>
