<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>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import RedirectApi from '../api/redirect-api';
import moment from 'moment';
import { Redirect } from '../types/api';

export interface Info {
  displayUrl: string;
  url: string;
}

@Component
export default class RedirectItem extends Vue {
  @Prop(Object) readonly redirect!: Redirect;

  info: Info | null = null;

  mounted() {
    this.getRedirectInfo();
  }

  async getRedirectInfo() {
    this.info = await RedirectApi.getRedirectInfo(this.redirect.id);
  }

  get startDate() {
    return this.redirect.startDate ? moment(this.redirect.startDate).format('DD-MM-YYYY LTS') : '';
  }

  get endDate() {
    return this.redirect.endDate ? moment(this.redirect.endDate).format('DD-MM-YYYY LTS') : '';
  }
}
</script>
