<template>
  <div class="ui--content-wrapper">
    <sdl-breadcrumb></sdl-breadcrumb>
    <div class="ui--view-container">
      <h4 class="mb-3">Parameter View</h4>
      <h4 class="mb-3">
        <span>[{{ item.parameterType }}] </span>{{ item.parameterName }}
      </h4>
      <div class="ui--view-heading d-flex">
        <div>
          {{ $t('sdl.common.label.createdBy') }} :<span class="ms-1">{{ item.createdBy }}</span>
        </div>
        <div class="ms-auto">
          {{ $t('sdl.common.label.createdDate') }} : <span class="ms-1">{{ $filters.dateFormat(item.createdAt) }}</span>
        </div>
      </div>
      <article class="ui--viewer" v-html="$filters.nl2br(item.parameterDesc)"></article>
      <hr class="mb-4" />      

      <div class="ui--button-container">
        <button class="btn btn-secondary btn-lg" type="button" @click="goBackToList">
          {{ $t('sdl.common.label.list') }}
        </button>
        <button class="btn btn-secondary btn-lg" type="button" v-if="currentUser.systemAdminUser || item.created_by === currentUser.userId" @click="deleteParameter()" v-authorization="'execute'">
          {{ $t('sdl.common.label.delete') }}
        </button>
        
        <button v-if="currentUser.systemAdminUser || item.created_by === currentUser.userId" class="btn btn-secondary btn-lg" type="button" @click="moveEdit" v-authorization="'update'">
          {{ $t('sdl.common.label.edit') }}
        </button>
      </div>   
    </div>
  </div>
  
</template>
<script>
import axios from 'axios';
import _ from 'lodash';
import { SDLUtil, DateUtil } from '@/utils';
import StoreParams from '@/mixin/StoreParams';
import SDLLocale from '@/mixin/SDLLocale';
import GridCommon from '@/mixin/GridCommon';


export default {
  mixins: [StoreParams, SDLLocale, GridCommon],

  data() {
    return {     
      currentUser: SDLUtil.getLoginedUserInfo(),          
      parameterType: this.$route.params.parameterType,   
      item: {},   
    
    };
  },
  methods: {
    init() {
      this.getParameterInfo();
    },
    async getParameterInfo() {

      SDLUtil.showLoadingBar(true);
      let listApi = `${SDLUtil.API_URL}/embo/parameter/main.do?method=getParameter`;
      let params = { parameterType: this.parameterType };
      axios
        .post(listApi, JSON.stringify(params), {
          headers: { 'Content-Type': `application/json` },
        })
        .then(response => {
          this.item = _.head(response.data.result);

          this.item.createdAt = this.$filters.dateFormat(this.item.createdAt);
          this.item.updatedAt = this.$filters.dateFormat(this.item.updatedAt);

          SDLUtil.showLoadingBar(false);
        })
        .catch(error => {
          SDLUtil.showLoadingBar(false);
          SDLUtil.errorAlert(error);
          console.log(error);
        });

    },

    moveListPage() {
      this.$router.push(`${this.$CONTEXT}/embo/parameter/list`);
    },
    moveEdit() {
      this.$router.push(`${this.$CONTEXT}/embo/parameter/parameterEdit/` + this.parameterType);
    },

    deleteParameter() {
      SDLUtil.confirm({
        title: 'sdl.common.label.delete',
        msg: 'sdl.common.message.doDelete',
        okLabel: 'sdl.common.label.confirm',
        cancelLabel: 'sdl.common.label.cancel',
        onOkEvt: () => {
          SDLUtil.showLoadingBar(true);

          axios
            .post(`${SDLUtil.API_URL}/embo/parameter/main.do?method=delete`, { items: [{ parameterType: this.parameterType }] })
            .then(({ data }) => {
              SDLUtil.showLoadingBar(false);
              this.goBackToList();
            })
            .catch(err => {
              SDLUtil.showLoadingBar(false);
              SDLUtil.errorAlert(err);
            });
        },
        onCancelEvt: () => console.log('cancel'),
      });
    },
    

  }, //--methods
  mounted() {
    this.$nextTick(() => {
      console.info('initialize Parameter View Page');
      this.init();
    });
  },
  unmounted() {
   
  },
};
</script>

<style scoped></style>
