<!--
Program: Management Link Site
Author: SDL
Description: Management Link Site
-->
<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.common.label.type') }}</label>
              <div class="col-8">
                <!-- dropdown -->
                <select class="form-select" v-model="searchParam.linkTypeId">
                  <option value="">{{ $t('sdl.common.label.all') }}</option>
                  <option v-for="code in linkTypeList" :key="code.codeId" :value="code.codeId">
                    {{ getLabel(code) }}
                  </option>
                </select>
              </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">
        <button type="button" class="btn btn-secondary btn-sm" @click="delEvent" v-authorization="'UPDATE'">
          {{ $t('sdl.common.label.delete') }}
        </button>
        <button type="button" class="btn btn-secondary btn-sm" @click="addEvent" v-authorization="'UPDATE'">
          {{ $t('sdl.common.label.add') }}
        </button>
        <button type="button" class="btn btn-secondary btn-sm" @click="modifyEvent" v-authorization="'UPDATE'">
          {{ $t('sdl.common.label.edit') }}
        </button>
      </div>
    </div>
    <!-- TABLE  Area-->
    <table class="table table-bordered ui--table">
      <colgroup>
        <col style="width:3%" />
        <col style="width:10%" />
        <col style="width:15%" />
        <col style="width:20%" />
        <col style="width:20%" />
      </colgroup>
      <thead>
        <tr>
          <th scope="col">
            <input type="checkbox" @click.stop v-model="selectAll" @change="toggleSelectAll" />
          </th>
          <th scope="col">{{ $t('sdl.common.label.type') }}</th>
          <th scope="col">{{ $t('sdl.link.label.linkLabelDefault') }}</th>
          <th scope="col">URL</th>
          <th scope="col">{{ $t('sdl.common.label.description') }}</th>
          <th scope="col" v-for="(locale, index) in $i18n.availableLocales" :key="'th' + index">{{ $t('sdl.link.label.linkLabel') }}({{ locale }})</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="grid in gridList" :key="grid.linkSiteId">
          <td class="text-center">
            <input type="checkbox" v-model="grid.selected" @change="selectRow(grid)" />
          </td>
          <td class="text-center">{{ getLabel(grid.linkType) }}</td>
          <td class="text-left">{{ grid.label }}</td>
          <td class="text-left">{{ grid.url }}</td>
          <td class="text-left">{{ grid.description }}</td>
          <td class="text-left" v-for="(locale, index) in $i18n.availableLocales" :key="'td' + index">{{ grid.labelJson[locale] }}</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 SDLLocale from '@/mixin/SDLLocale';
import { SDLUtil, StringUtil } from '@/utils';
import LinkSitePopup from './popup/LinkSitePopup.vue';

export default {
  mixins: [SDLLocale],
  data() {
    return {
      linkTypeList: SDLUtil.getCommCodeList({ commCodeTypeId: 'LINKSITE' }),
      linkTypeId: '',
      gridList: [],
      records: 0,
      currentPage: 1,
      pageSize: 10,
      excelInfo: {},
      selectAll: false,
      searchParam: { linkTypeId: '' },
    };
  },
  methods: {
    /**
     * param:
     * return:
     * exception:
     * Description : page initialization
     */
    init() {
      this.onSearch();
    },

    /**
     * param:
     * return:
     * exception:
     * Description : search
     */
    onSearch(pageIndex = 1) {
      this.currentPage = pageIndex;
      const params = {
        ...this.searchParam,
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
      };
      // show Loading bar
      SDLUtil.showLoadingBar(true);
      axios
        .get(`${SDLUtil.API_URL}/linksite/linksites-with-paging?${StringUtil.queryStringfy(params)}`)
        .then(response => {
          this.gridList = response.data.rows;
          this.records = response.data.records;

          // hide Loading bar
          SDLUtil.showLoadingBar(false);
        })
        .catch(error => {
          SDLUtil.showLoadingBar(false);
          console.log(error);
          SDLUtil.errorAlert(error);
        });
    },
    /**
     * param:
     * return:
     * exception:
     * Description : add event linksite
     */
    addEvent() {
      SDLUtil.show(
        LinkSitePopup,
        {
          execFunc: () => {
            this.onSearch(this.currentPage);
          },
        },
        {
          width: '500px',
          height: 'auto',
        },
      );
    },
    /**
     * param:
     * return:
     * exception:
     * Description : event before deleting linksite
     */
    delEvent() {
      const delList = [];

      this.gridList.forEach(obj => {
        if (obj.selected) {
          delList.push(obj.linkSiteId);
        }
      });

      if (delList.length === 0) {
        SDLUtil.alert('sdl.common.message.selectRow');
        return;
      }

      SDLUtil.confirm({
        msg: 'sdl.common.message.doDelete',
        title: 'sdl.common.label.delete',
        // okLabel: 'ok label',
        // cancelLabel: 'cancel label',
        onOkEvt: () => {
          this.onDelete(delList);
        },
        // onCancelEvt: () => {console.log('cancel')},
      });
    },
    /**
     * param:
     * return:
     * exception:
     * Description : delete linksite
     */
    onDelete(list) {
      SDLUtil.showLoadingBar(true);
      // console.log(list);
      axios
        .delete(`${SDLUtil.API_URL}/linksite/linksites`, { data: list })
        .then(() => {
          // hide Loading bar
          SDLUtil.showLoadingBar(false);
          this.onSearch(this.currentPage);
        })
        .catch(error => {
          SDLUtil.showLoadingBar(false);
          console.log(error);
          SDLUtil.errorAlert(error);
        });
    },
    /**
     * param:
     * return:
     * exception:
     * Description : show modify popup linksite
     */
    modifyEvent() {
      let selectCnt = 0;
      let chkObj = {};

      this.gridList.forEach(obj => {
        if (obj.selected) {
          selectCnt += 1;
          chkObj = obj;
        }
      });

      if (selectCnt === 0) {
        SDLUtil.alert('sdl.common.message.selectRow');
        return;
      }
      if (selectCnt > 1) {
        SDLUtil.alert('sdl.common.message.selectOneRow');
        return;
      }

      SDLUtil.show(
        LinkSitePopup,
        {
          selectedItemInfo: chkObj,
          execFunc: () => {
            this.onSearch(this.currentPage);
          },
        },
        {
          width: '500px',
          height: 'auto',
        },
      );
    },
    /**
     * param: item -> Object
     * return:
     * exception:
     * Description : select linksite
     */
    selectRow(item) {
      if (!item.selected) {
        if (this.selectAll) {
          this.selectAll = false;
        }
      }
    },
    /**
     * param:
     * return:
     * exception:
     * Description : select All Check
     */
    toggleSelectAll() {
      if (this.selectAll) {
        for (let i = 0; i < this.gridList.length; i += 1) {
          const selectItem = this.gridList[i];
          selectItem.selected = true;
          this.gridList.splice(i, 1, selectItem);
        }
      } else {
        for (let i = 0; i < this.gridList.length; i += 1) {
          const selectItem = this.gridList[i];
          selectItem.selected = false;
          this.gridList.splice(i, 1, selectItem);
        }
      }
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped></style>
