<template>
  <div class="href" @click="goTo">{{ label }}</div>
</template>

<script setup>
import { computed } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const props = defineProps({
  row: {
    type: Object,
    default: () => ({}),
  },
  header: {
    type: Object,
    default: () => ({}),
  },
});
const label = computed(() => props.row[props.header.prop]);
const href = computed(() => {
  const { baseurl: path, params } = props.header.href;
  const query = {};
  Object.keys(params).forEach((key) => {
    query[key] = props.row[params[key]];
  });
  return {
    path,
    query,
  };
});
const goTo = () => {
  router.push(href.value);
};
</script>

<style lang="scss" scoped>
.href {
  font-size: 14px;
  color: #3759be;
  cursor: pointer;
}
</style>
