<!--
Program: Link Site Popup(insert/modify)
Author: SDL
Description: insert/modify Link Site Popup
-->
<template>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ $t('sdl.linksite.label.registration') }}</h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" @click="$emit('close')"></button>
      </div>
      <div class="modal-body">
        <form name="linkSiteForm" class="needs-validation" novalidate="" @submit.prevent>
          <table class="table table-bordered ui--table-form ui--table-form-view">
            <colgroup>
              <col style="width:40%" />
              <col style="width:60%" />
            </colgroup>
            <tbody>
              <tr>
                <th class="text-nowrap" scope="row">
                  {{ $t('sdl.common.label.type') }}<span class="ui--text-required">*</span>
                </th>
                <td>
                  <select class="form-select d-block w-100" v-model="linkInfo.linkType.codeId" v-validation="" errorMessage="sdl.samsung.validate.selected">
                    <option value="">{{ $t('sdl.common.label.select') }}</option>
                    <option v-for="code in linkTypeList" :key="code.codeId" :value="code.codeId">
                      {{ getLabel(code) }}
                    </option>
                  </select>
                </td>
              </tr>
              <tr>
                <th class="text-nowrap" scope="row">
                  {{ $t('sdl.link.label.linkLabelDefault') }}<span class="ui--text-required">*</span>
                </th>
                <td>
                  <input
                    type="text"
                    class="form-control"
                    v-model.trim="linkInfo.label"
                    v-validation=""
                    errorMessage="sdl.samsung.validate.required"
                  />
                </td>
              </tr>
              <tr v-for="locale in $i18n.availableLocales" :key="locale">
                <th class="text-nowrap" scope="row">
                  {{ $t('sdl.link.label.linkLabel') }}({{ locale }})
                </th>
                <td>
                  <input
                    type="text"
                    class="form-control"
                    placeholder=""
                    v-model.trim="linkInfo.labelJson[locale]"
                  />
                </td>
              </tr>
              <tr>
                <th class="text-nowrap" scope="row">
                  {{ $t('sdl.common.label.description') }}<span class="ui--text-required">*</span>
                </th>
                <td>
                  <textarea
                    class="form-control"
                    aria-label="textarea"
                    placeholder=""
                    v-model.trim="linkInfo.description"
                    v-validation=""
                    errorMessage="sdl.samsung.validate.required"
                  ></textarea>
                </td>
              </tr>
              <tr>
                <th class="text-nowrap" scope="row">URL<span class="ui--text-required">*</span></th>
                <td>
                  <input
                    id="linkSiteUrl"
                    type="text"
                    class="form-control"
                    placeholder=""
                    v-model.trim="linkInfo.url"
                    v-validation="{
                      groupId: '',
                      valids: [
                        {
                          validFuncs: () => {
                            return !checkPatternUrl(linkInfo.url);
                          },
                          errorMessage: 'sdl.samsung.validate.url',
                        },
                      ],
                    }"
                    errorMessage="sdl.samsung.validate.required"
                  />
                </td>
              </tr>
            </tbody>
          </table>
        </form>
      </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="onBeforeSave">{{ $t('sdl.common.label.save') }}</button>
      </div>
    </div>
  </div>
</template>

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

export default {
  mixins: [SDLLocale],
  data() {
    return {
      linkTypeList: SDLUtil.getCommCodeList({ commCodeTypeId: 'LINKSITE' }),
      linkInfo: {
        linkSiteId: '',
        label: '',
        labelJson: {},
        description: '',
        url: '',
        linkType: { codeId: '' },
      },
      saveType: 'add',
    };
  },
  props: {
    selectedItemInfo: {
      type: Object,
      default: () => {},
    },
    execFunc: {
      type: Function,
    },
  },
  methods: {
    checkPatternUrl(url) {
      return !StringUtil.checkPatternUrl(url);
    },
    /**
     * param:
     * return:
     * exception:
     * Description : event before Saving
     */
    onBeforeSave() {
      if (SDLUtil.onSubmitValidation()) return;

      SDLUtil.confirm({
        msg: 'sdl.common.message.doSave',
        title: 'sdl.common.label.save',
        onOkEvt: () => {
          this.onSave();
        },
      });
    },
    /**
     * param:
     * return:
     * exception:
     * Description : save linksite
     */
    onSave() {
      SDLUtil.showLoadingBar(true);
      this.linkInfo.linkType.labelJson = JSON.stringify(this.linkInfo.linkType.labelJson);
      if (this.saveType === 'add') {
        axios
          .post(`${SDLUtil.API_URL}/linksite/linksites`, this.linkInfo)
          .then(() => {
            // hide Loading bar
            SDLUtil.showLoadingBar(false);
            this.execFunc();
            this.$emit('close');
          })
          .catch(error => {
            SDLUtil.showLoadingBar(false);
            console.log(error);
            SDLUtil.errorAlert(error);
          });
      } else {
        axios
          .put(`${SDLUtil.API_URL}/linksite/linksites`, this.linkInfo)
          .then(() => {
            // hide Loading bar
            SDLUtil.showLoadingBar(false);
            this.execFunc();
            this.$emit('close');
          })
          .catch(error => {
            SDLUtil.showLoadingBar(false);
            SDLUtil.errorAlert(error);
          });
      }
    },
  },

  created() {
    if (typeof this.selectedItemInfo !== 'undefined') {
      this.linkInfo = Object.assign(this.linkInfo, this.selectedItemInfo);
      this.saveType = 'modify';
    }
  },
};
</script>
<style></style>
