<!-- 设备收发管理详情 -- 证书报告 -->
<script name="EquipmentInfoTableLDetail" lang="ts" setup>
import dayjs from 'dayjs'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getCertificateRecords } from '@/api/business/manager/sendReceive'
const props = defineProps({
  sampleId: { // 样品id
    type: String,
    required: true, // 设置之后,props必须要接收到这个数据
    default: '',
  },
  customerId: { // 委托方id
    type: String,
    required: true, // 设置之后,props必须要接收到这个数据
    default: '',
  },
})
// 查询条件
const listQuery = ref({
  sampleId: props.sampleId, // 样品id
  customerId: props.customerId, // 委托方id
  limit: 20,
  offset: 1,
})
// 表格表头
const columns = ref<TableColumn[]>([
  { text: '证书编号', value: 'certificateReportNo', width: '160', align: 'center' },
  { text: '证书名称', value: 'certificateReportName', align: 'center' },
  { text: '溯源单位', value: 'traceCompany', align: 'center' },
  { text: '计量标识', value: 'meterIdentify', align: 'center' },
  { text: '限用说明', value: 'restrictionInstruction', align: 'center' },
  { text: '检定员', value: 'measurePersonName', align: 'center' },
  { text: '检定日期', value: 'calibrationTime', align: 'center', width: '120' },
  { text: '证书有效期', value: 'expirationDate', align: 'center', width: '120' },
  { text: '证书附件', value: 'fileArr', align: 'center', isLink: true },
])
const list = ref([]) // 列表
const total = ref(0) // 数据总数
const loading = ref(false) // 加载状态
// 获取证书报告列表
function fetchData(isNowPage = false) {
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.value.offset = 1
  }
  loading.value = true
  list.value = []
  listQuery.value.sampleId = props.sampleId ? props.sampleId : listQuery.value.sampleId
  listQuery.value.customerId = props.customerId ? props.customerId : listQuery.value.customerId
  getCertificateRecords(listQuery.value).then((res) => {
    list.value = res.data.rows.map((item: { certificateReportFile: string; calibrationTime: string; expirationDate: string }) => {
      return {
        ...item,
        calibrationTime: item.calibrationTime ? dayjs(item.calibrationTime).format('YYYY-MM-DD') : item.calibrationTime,
        expirationDate: item.expirationDate ? dayjs(item.expirationDate).format('YYYY-MM-DD') : item.expirationDate,
        fileArr: [item.certificateReportFile], // 证书附件
      }
    })
    total.value = parseInt(res.data.total)
    loading.value = false
  }).catch(() => loading.value = false)
}

// 改变页容量
function handleSizeChange(val: number) {
  listQuery.value.limit = val
  fetchData()
}
// 改变当前页
function handleCurrentChange(val: number) {
  listQuery.value.offset = val
  fetchData(true)
}

onMounted(() => {
  fetchData()
})
</script>

<template>
  <detail-block title="证书报告">
    <el-table v-loading="loading" :data="list" border style="width: 100%;">
      <el-table-column label="序号" width="55" align="center">
        <template #default="scope">
          {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        v-for="item in columns"
        :key="item.value"
        :prop="item.value"
        :label="item.text"
        align="center"
      >
        <template v-if="item.value === 'fileArr'" #default="scope">
          <show-photo :minio-file-name="scope.row.certificateReportFile" width="100%" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <el-pagination
      style="width: 100%;margin-top: 10px;"
      :current-page="listQuery.offset"
      :page-sizes="[5, 10, 20, 30, 50, 100, 150, 200]"
      :page-size="listQuery.limit"
      :total="total"
      layout="total, sizes, prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </detail-block>
</template>