<!-- 报告列表的一项 -->
<script setup lang="ts">
import { useReportExport } from '@/libs/reportExport.lib';
import { useAuthStore } from '@/stores/auth.store';
import type { ReportBasic } from '@/types/report.types';
import type { PropType } from 'vue';

// 用户权限store
const authStore = useAuthStore()
// 报告下载函数库
const reportExport = useReportExport()

defineProps({
  data: {
    type: Object as PropType<ReportBasic>,
    required: true,
  },
  serialNumber: {
    type: Number,
    required: true,
  }
});

const emits = defineEmits<{
  (e: "delete", id: number): void
}>();

function onDelete(id: number) {
  emits("delete", id);
}
</script>

<template>
  <a-card hoverable size="small">
    <template #title>
      <RouterLink class="title-link" :to="{ name: 'ReportEditor', params: { id: data.id } }">
        <span class="text-black"> {{ serialNumber }}. </span>
        <span v-if="data.companyName" class="text-black"> {{  data.companyName }}</span>
        <span v-else class="text-red">无关联企业</span>
        <span class="text-black"> - </span>
        <span v-if="data.name" class="text-black">{{ data.name }}</span>
        <span v-else class="text-red">无报告类型</span>
        <span v-if="data.status == 1" class="text-black">&nbsp;&nbsp; 已完成</span>
        <span v-else class="text-black">&nbsp;&nbsp; 编写中</span>
      </RouterLink>
    </template>
    <template #extra>
      <RouterLink :to="{ name: 'ReportEditor', params: { id: data.id } }">编辑</RouterLink>
      <a-button type="link" :href="reportExport.link(data.id, authStore.token)" target="_blank">下载</a-button>
      <a-popconfirm
        title="确定删除此报告？"
        ok-text="确定"
        cancel-text="取消"
        @confirm="onDelete(data.id)"
        placement="topRight"
      >
        <a-button type="link">删除</a-button>
      </a-popconfirm>
    </template>
    <div class="report-metadata-wrap">
      <p><span>企业名称：</span><span>{{ data.companyName }}</span></p>
      <p><span>项目名称：</span><span>{{ data.reportName }}</span></p>
      <p><span>项目负责人：</span><span>{{ data.supervisor }}</span></p>
      <p v-for="(item, index) in data.metadata" :key="index">
        <span>{{ item.name }}：</span>
        <span>{{ item.value }}</span>
      </p>
    </div>
  </a-card>
</template>

<style scoped lang="scss">
.title-link {
 .text-black {
    color: rgba(0, 0, 0, 0.85);
  }
}
.report-metadata-wrap {
  p {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
  }
}
</style>
