<!--
 Program: WorkgroupFormPopup.vue
 Author: SDL
 Description: popup page for registering and modifying workgroup information
-->
<template>
  <div class="modal-dialog modal-dialog-centered  modal-dialog-scrollable modal-lg">
    <div class="modal-content" style="height:404px;">
      <!-- contents -->
      <div class="modal-header">
        <h5 class="modal-title h4">{{ $t('sdl.workGroup.label.heading') }} {{ $t('sdl.common.label.register') }}</h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" @click="$emit('close')"></button>
      </div>
      <div class="modal-body">
        <table class="table table-bordered ui--table-form ui--table-form-view mb-3">
          <colgroup>
            <col style="width:30%" />
            <col style="width:70%" />
          </colgroup>
          <tbody>
            <tr>
              <th scope="row">{{ $t('sdl.workGroup.label.heading') }} <span class="ui--text-required">&#42;</span></th>
              <td>
                <input type="text" class="form-control" v-model.trim="workgroupItem.workgroupName" v-validation="" errorMessage="sdl.samsung.validate.required" />
              </td>
            </tr>
            <tr>
              <th scope="row">
                {{ $t('sdl.workGroup.label.workGroupNameOt') }} <span class="ui--text-required">&#42;</span>
              </th>
              <td>
                <input type="text" class="form-control" v-model.trim="workgroupItem.label" v-validation="" errorMessage="sdl.samsung.validate.required" />
              </td>
            </tr>
            <tr v-for="locale in $i18n.availableLocales" :key="locale">
              <th scope="row">
                {{ $t('sdl.workGroup.label.workGroupName') }}({{ locale }})
              </th>
              <td>
                <input type="text" class="form-control" v-model.trim="workgroupItem.labelJson[locale]" />
              </td>
            </tr>
            <tr>
              <th scope="row">{{ $t('sdl.commonCode.label.description') }}</th>
              <td>
                <input type="text" class="form-control" v-model.trim="workgroupItem.description" />
              </td>
            </tr>
          </tbody>
        </table>
      </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="saveWorkgroup">{{ $t('sdl.common.label.save') }}</button>
      </div>
      <!-- // contents -->
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      workgroupItem: {
        labelJson: {},
      },
      insertStatus: true,
    };
  },
  props: {
    workgroupId: {
      required: false,
      type: String,
    },
    rtnFunc: {
      type: Function,
    },
  },
  methods: {
    /**
     * param: nothing
     * return: nothing
     * exception: Call error alert
     * description: Query workgroup information
     */
    getWorkgroupInfo() {
      if (!this.insertStatus) {
        // Launch Loading bar
        SDLUtil.showLoadingBar(true);

        axios
          .get(`${SDLUtil.API_URL}/auth/workgroups/${this.workgroupId}`)
          .then(({ data }) => {
            this.workgroupItem = data;

            // Remove Loading bar
            SDLUtil.showLoadingBar(false);
          })
          .catch(err => {
            // Remove Loading bar
            SDLUtil.showLoadingBar(false);
            // Call error alert
            SDLUtil.errorAlert(err);
          });
      }
    },
    /**
     * param: nothing
     * return: nothing
     * exception: Call error alert
     * description: Save workgroup Information
     */
    async saveWorkgroup() {
      let chkFlag = false;

      const params = {
        ...this.workgroupItem,
      };

      // validation
      if (SDLUtil.onSubmitValidation()) return;

      if (this.insertStatus) {
        /**
         * Call workgroup Registration API
         */
        await axios
          .post(`${SDLUtil.API_URL}/auth/workgroups`, params, {
            headers: { 'Content-Type': 'application/json' },
          })
          .then(response => {
            if (response.status === 200) {
              chkFlag = true;
            }
          })
          .catch(err => {
            SDLUtil.errorAlert(err);
          });
      } else {
        /**
         * Call workgroup modification API
         */
        await axios
          .put(`${SDLUtil.API_URL}/auth/workgroups/${this.workgroupId}`, params, {
            headers: { 'Content-Type': 'application/json' },
          })
          .then(response => {
            if (response.status === 200) {
              chkFlag = true;
            }
          })
          .catch(err => {
            SDLUtil.errorAlert(err);
          });
      }

      this.rtnFunc(chkFlag);
      this.$emit('close');
    },
    /**
     * param: nothing
     * return: nothing
     * exception: nothing
     * description: Initialization
     */
    init() {
      this.workgroupItem = {
        labelJson: {},
      };
    },
  },
  created() {
    if (this.workgroupId !== '' && this.workgroupId !== undefined) {
      this.insertStatus = false;
      this.getWorkgroupInfo();
    } else {
      this.init();
    }
  },
};
</script>
