<!--
Program: Excel Upload
Author: SDL
Description: Excel Upload Common Component
-->
<template>
  <div class="modal-dialog">
    <div class="modal-content" style="width:900px">
      <div class="modal-header">
        <h5 class="modal-title">{{ $t('sdl.approval.label.apprReqSample') }}</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 mb-5">
          <colgroup>
            <col style="width:12.5%" />
            <col style="width:35.5%" />
            <col style="width:12.5%" />
            <col style="width:35.5%" />
          </colgroup>
          <tbody>
            <tr>
              <th class="text-nowrap" scope="row">{{ $t('sdl.approval.label.title') }}</th>
              <td colspan="3">{{ apprDoc.title }}</td>
            </tr>
            <tr>
              <th class="text-nowrap" scope="row">{{ $t('sdl.common.label.id') }}</th>
              <td>{{ apprDoc.docId }}</td>
              <th class="text-nowrap" scope="row">{{ $t('sdl.approval.label.requester') }}</th>
              <td>{{ apprDoc.creator }}</td>
            </tr>
            <tr>
              <th class="text-nowrap" scope="row">{{ $t('sdl.approval.label.comment') }}</th>
              <td colspan="3">
                <div style="height:300px; overflow-y:auto;" v-html="$filters.nl2br(apprDoc.contents)"></div>
              </td>
            </tr>
          </tbody>
        </table>
        <h4 class="mb-3">{{ $t('sdl.common.label.attachments') }}</h4>
        <!-- upload -->
        <sdl-fileuploader ref="uploader" :fileList="attachments" :modifyFlag="false" :downloadType="this.docId"></sdl-fileuploader>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="$emit('close')">
          {{ $t('sdl.common.label.close') }}
        </button>
      </div>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      attachments: [],
      apprDoc: {
        docId: '',
        contents: '',
        title: '',
        docStatus: '',
      },
    };
  },
  props: {
    docId: {
      type: String,
    },
  },
  methods: {
    /**
     * param:
     * return:
     * exception:
     * Description : Retrieving Detailed Approval Documents
     */
    loadApprDoc() {
      // show Loading bar
      SDLUtil.showLoadingBar(true);
      axios
        .get(`${SDLUtil.API_URL}/sample/approval/sample-documents/${this.docId}`)
        .then(response => {
          this.apprDoc = response.data;
          for (let i = 0; i < response.data.attachments.length; i += 1) {
            this.attachments.push(response.data.attachments[i]);
          }
          this.$refs.uploader.init(this.apprDoc.docId);
          // hide Loading bar
          SDLUtil.showLoadingBar(false);
        })
        .catch(error => {
          SDLUtil.showLoadingBar(false);
          console.log(error);
        });
    },
  },

  created() {
    this.loadApprDoc();
  },
};
</script>
<style></style>
