<template>
  <div>
    <span v-if="this.row.id||ids" 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","ids"],
  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;
    },
  },
  created(){

  },
  methods: {
    // Jump routing using id as parameter
    goHref(val) {
      if(this.ids){
        if(this.ids.indexOf('.')==-1){
          this.$router.push(this.detailsUrl + this.row[this.ids])
        }else{
          this.$router.push(this.detailsUrl + this.row[this.ids.split('.')[0]][this.ids.split('.')[1]])
        }
      }else{
        this.$router.push(this.detailsUrl + val)
      }
    }
  }
};
</script>
<style scoped>
.href {
  color: #264dd9 !important;
  cursor: pointer;
}
</style>