<template>
  <!-- SUB Contents -->
  <div class="ui--content-wrapper">
    <sdl-breadcrumb></sdl-breadcrumb>
    <h4 class="mb-3">{{ $t('sdl.email.detail') }}</h4>
    <table class="table table-bordered ui--table-form ui--table-form-view mb-0">
      <colgroup>
        <col style="width:12.5%"/>
        <col style="width:35.5%"/>
      </colgroup>
      <tbody>
      <tr>
        <th class="text-nowrap" scope="row">{{ $t('sdl.email.title') }}</th>
        <td>{{ this.sendMail.mailDto.subject }}</td>
      </tr>
      <tr>
        <th class="text-nowrap" scope="row">{{ $t('sdl.email.sender') }}</th>
        <td>{{ this.sendMail.senderName }} / {{ this.sendMail.senderPosition }} / {{ this.sendMail.senderDepartment }}</td>
      </tr>
      <tr>
        <th class="text-nowrap" scope="row">{{ $t('sdl.email.sendDate') }}</th>
        <td>{{ $filters.dateFormat(this.sendMail.sendDateTime, $t('data-format.datetime.ymdhms')) }}</td>
      </tr>
      <tr>
        <th class="text-nowrap" scope="row">{{ $t('sdl.email.status') }}</th>
        <td>{{ $t('sdl.email.open') }} : {{ this.mailStatus.openCount }} / {{ $t('sdl.email.unopen') }} : {{ this.mailStatus.unopenCount }} </td>
      </tr>
      <tr>
        <th class="text-nowrap" scope="row">{{ $t('sdl.email.sendBody') }}</th>
        <td>
          <button class="btn btn-secondary btn-xs" type="button" @click="onViewMht">
            {{ $t('sdl.board.label.preView') }}
          </button>
        </td>
      </tr>
      </tbody>
    </table>

    <div class="ui--form-heading clearfix mt-4">
      <h4 class="d-inline-block">{{ $t('sdl.email.recipient.list') }}</h4>
    </div>

    <table class="table table-bordered ui--table">
      <colgroup>
        <col style="width:20%"/>
        <col style="width:15%"/>
        <col style="width:15%"/>
        <col style="width:20%"/>
        <col style="width:30%"/>
      </colgroup>
      <thead>
      <tr>
        <th scope="col">{{ $t('sdl.identity.label.name') }}</th>
        <th scope="col">{{ $t('sdl.common.label.type') }}</th>
        <th scope="col">{{ $t('sdl.email.status') }}</th>
        <th scope="col">{{ $t('sdl.common.label.department') }}</th>
        <th scope="col">{{ $t('sdl.identity.label.email') }}</th>
      </tr>
      </thead>
      <tbody>
      <tr  v-for="recipient in recipientList" :key="recipient.email" >
        <td class="text-left">{{ recipient.name }}</td>
        <td class="text-center" v-if="recipient.recipientType === 'TO'">
          {{ $t('sdl.email.type.to') }}
        </td>
        <td class="text-center" v-else-if="recipient.recipientType === 'RCVR'">
          {{ $t('sdl.email.type.to') }}
        </td>
        <td class="text-center" v-else-if="recipient.recipientType === 'CC'">
          {{ $t('sdl.email.type.cc') }}
        </td>
        <td class="text-center" v-else-if="recipient.recipientType === 'BCC'">
          {{ $t('sdl.email.type.bcc') }}
        </td>
        <td class="text-left" v-if="recipient.status === 'OPEN'">{{ $t('sdl.email.open') }}({{ $filters.dateFormat(recipient.updateTime, $t('data-format.datetime.ymdhms')) }})</td>
        <td class="text-left" v-else-if="recipient.status === 'UNOPEN'">{{ $t('sdl.email.unopen') }}({{ $filters.dateFormat(recipient.updateTime, $t('data-format.datetime.ymdhms')) }})</td>
        <td class="text-left" v-else></td>
        <td class="text-left">{{ recipient.department }}</td>
        <td class="text-left">{{ recipient.email }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import axios from 'axios';
import { SDLUtil } from '@/utils';
import SentMailPopup from '../../../common/popup/SentMailPopup.vue';

export default {
  data() {
    return {
      mailId: null,
      recipientList: [],
      mailStatus: {},
      sendMail: {
        mailDto: {},
      },
    };
  },
  methods: {
    /**
     * param: nothing
     * return: nothing
     * exception: Call error alert
     * description: User details lookup (by epId)
     */
    getSentMailInfo() {
      // Launch Loading bar
      SDLUtil.showLoadingBar(true);

      /**
       * Call mail lookup API
       */
      axios
        .get(`${SDLUtil.API_URL}/email/sent-mails/${this.mailId}`)
        .then(({ data }) => {
          // Save user details query data
          this.recipientList = data.recipientList;
          this.mailStatus = data.mailStatus;
          this.sendMail = data.sendMail;
          // Remove Loading bar
          SDLUtil.showLoadingBar(false);
        })
        .catch(err => {
          // Remove Loading bar
          SDLUtil.showLoadingBar(false);
          // Call error alert
          SDLUtil.errorAlert(err);
        });
    },
    onViewMht() {
      const title = this.sendMail.mailDto.subject;
      const body = this.sendMail.contentHtml;
      SDLUtil.show(
        SentMailPopup,
        {
          title,
          body,
        },
        {
          width: 1000,
          height: 'auto',
        },
      );
    },
  },
  created() {
    this.mailId = this.$route.params.mailId;
    this.getSentMailInfo();
  },
};
</script>

<style scoped></style>
