<template>
  <span class="LinkCall">
    <router-link
      v-if="route"
      class="LinkCall-Link"
      :to="{ name: route, params, query }"
    >
      {{ value }}
    </router-link>
    <template v-else>
      {{ value }}
    </template>
  </span>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  inheritAttrs: false,
})
export default class LinkCell extends Vue {
  @Prop()
  value: string;

  @Prop({ default: '' })
  route: string;

  @Prop({ type: Object, default: () => ({}) })
  row: { id: string };

  @Prop({ type: Function, default: (row: any) => ({ id: row.id }) })
  readonly routeParams: any;

  @Prop({ type: Function, default: () => ({}) })
  readonly queryParams: any;

  get params(): any {
    return this.routeParams(this.row);
  }

  get query(): any {
    return this.queryParams(this.row);
  }
}
</script>

<style lang="scss" scoped>
.LinkCall {
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: rgba(2, 12, 18, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  &-Link {
    text-decoration: none;
    &:link {
      color: #015e98;
    }
    &:visited {
      color: rgba(2, 12, 18, 0.9);
    }
  }
}
</style>
