<template>
  <tr>
    <td>
      <router-link :to="{ name: 'redirect-editor', params: { id: redirect.id } }">{{ redirect.description || redirect.from }}</router-link>
    </td>
    <td>
      {{ startDate }}
    </td>
    <td>
      {{ endDate }}
    </td>
    <td>
      <a v-if="info" :href="info.url" target="_blank"><span class="icon-new-tab"></span> {{ info.displayUrl }}</a>
    </td>
    <td>
      <router-link v-if="info && info.pageId" :to="{ name: 'page-editor', params: { id: info.pageId } }">{{ info.pageTitle }}</router-link>
    </td>
  </tr>
</template>

<style lang="scss" scoped>
.modal-body {
  max-height: 50vh;
  overflow: scroll;
}
</style>

<script>
import RedirectApi from '../api/redirect-api';
import dayjs from 'dayjs';

export default {
  props: ['redirect'],
  data() {
    return {
      info: null
    };
  },
  async mounted() {
    await this.getRedirectInfo();
  },
  methods: {
    async getRedirectInfo() {
      this.info = await RedirectApi.getRedirectInfo(this.redirect.id);
    }
  },
  computed: {
    startDate() {
      return this.redirect.startDate ? dayjs(this.redirect.startDate).format('DD-MM-YYYY LTS') : '';
    },
    endDate() {
      return this.redirect.endDate ? dayjs(this.redirect.endDate).format('DD-MM-YYYY LTS') : '';
    }
  }
};
</script>
