<template>
  <div>
    <span v-if="this.row.id" class="href" @click="goHref(baseVal)">{{ text }}</span>
    <span v-else>{{text}}</span>
  </div>
</template>

<script>
import helper from "@/services/helper";
import format from "string-format";

export default {
  props: ["header", "row", "detailsUrl"],
  computed: {
    text: function() {
      let text = helper.GetProperty(this.row, this.header.prop);
      return text;
    },
    // get row.id value
    baseVal: function() {
      let baseVal = helper.GetProperty(this.row, "id");
      return baseVal;
    },
  },
  methods: {
    // Jump routing using id as parameter
    goHref(val) {
      this.$router.push(this.detailsUrl + val)
    }
  }
};
</script>
<style scoped>
.href {
  color: #264dd9 !important;
  cursor: pointer;
}
</style>