<script setup lang="ts">
export interface Props {
  name: string;
  docCount: number,
  keywords: {key: string, count: number}[]
}

defineProps<{
  data: Props
}>();

function getKeywordLink(keyword: string) {
  return {
    name: 'SearchResult',
    query: {
      type: 'simple',
      field: 'TP',
      kw: keyword,
      page: 1,
      size: 10,
      sort: 'Relevance'
    }
  }
}
</script>

<template>
  <div class="row">
    <h3><span>学科名称：</span><span>{{ data.name }}</span></h3>
  </div>
  <div class="row">
    <h3>
      <span>文献数量：</span><span>{{ data.docCount }}</span>
    </h3>
  </div>
  <div class="row">
    <h3>关键词排名</h3>
    <div v-for="(item, key) of data.keywords" :key="key" class="keyword-item-wrap">
      <RouterLink :to="getKeywordLink(item.key)" target="_blank">{{ item.key }}</RouterLink> {{ item.count }}
    </div>
  </div>
</template>

<style scoped lang="scss">
.row {
  margin-top: 1.5em;

  &:first-child {
    margin-top: 0em;
  }
}

.keyword-item-wrap {
  margin-top: 5px;

  &:first-child {
    margin-top: 0;
  }
}
</style>