<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 { redirectStore } from '../tools/redirect-store.js';
  import moment from 'moment';

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