<template>
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title h4">{{ $t('sdl.mailGroup.label.mailGroupReg') }}</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.mailGroup.label.mailGroupName') }} <span class="ui--text-required">&#42;</span></th>
              <td>
                <input type="text" class="form-control" v-model.trim="mailGroupItem.label" v-validation="" errorMessage="sdl.samsung.validate.required" />
              </td>
            </tr>
            <tr v-for="locale in $i18n.availableLocales" :key="locale">
              <th scope="row">{{ $t('sdl.mailGroup.label.mailGroupNameLang', [locale]) }}</th>
              <td>
                <template v-if="mailGroupItem.labelJson">
                  <input type="text" class="form-control" v-model.trim="mailGroupItem.labelJson[locale]" />
                </template>
              </td>
            </tr>
            <tr>
              <th scope="row">{{ $t('sdl.common.label.description') }} <span class="ui--text-required">&#42;</span></th>
              <td>
                <input type="text" class="form-control" v-model.trim="mailGroupItem.description" v-validation="" errorMessage="sdl.samsung.validate.required" />
              </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="saveMailGroup">{{ $t('sdl.common.label.save') }}</button>
      </div>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      mailGroupItem: {},
      insertStatus: true,
    };
  },
  props: {
    mailGroupId: {
      required: false,
      type: String,
    },
    rtnFunc: {
      type: Function,
    },
  },
  methods: {
    getMailGroupInfo() {
      // Launch Loading bar
      SDLUtil.showLoadingBar(true);

      // Call MailGroup details lookup API
      axios
        .get(`${SDLUtil.API_URL}/mail-group/${this.mailGroupId}`)
        .then(({ data }) => {
          this.mailGroupItem = 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 Mail Group Information
     */
    async saveMailGroup() {
      let chkFlag = false;

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

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

      if (this.insertStatus) {
        await axios
          .post(`${SDLUtil.API_URL}/mail-group`, params, {
            headers: { 'Content-Type': 'application/json' },
          })
          .then(response => {
            if (response.status === 200) {
              chkFlag = true;
            }
          })
          .catch(err => {
            SDLUtil.errorAlert(err);
          });
      } else {
        await axios
          .put(`${SDLUtil.API_URL}/mail-group`, 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.mailGroupItem = {
        labelJson: {},
      };
    },
  },
  created() {
    if (this.mailGroupId !== '' && this.mailGroupId !== undefined) {
      this.insertStatus = false;
      this.getMailGroupInfo();
    } else {
      this.init();
    }
  },
};
</script>
