<!-- 证书监控 -->
<script lang="ts" setup name="CertificationMonitor">
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getCertificateMonitors } from '@/api/business/manager/sendReceive'
const props = defineProps({
  sampleId: { // 样品id
    type: String,
    required: true, // 设置之后,props必须要接收到这个数据
    default: '',
  },
  orderId: { // 任务单id
    type: String,
  },
  customerId: { // 任务单id
    type: String,
  },
})

// 查询条件
const listQuery = ref({
  sampleId: props.sampleId!, // 样品id
  customerId: props.customerId!, // 委托方id
  orderId: props.orderId!, // 委托书id、任务单id
  limit: 10,
  offset: 1,
})
// 表格表头
const columns = ref<TableColumn[]>([
  { text: '证书编号', value: 'certificateReportNo', align: 'center', width: '160' },
  { text: '证书名称', value: 'certificateReportName', align: 'center' },
  { text: '证书状态', value: 'certificateStatus', align: 'center' },
  { text: '初次提交审核时间', value: 'submitTime', align: 'center', width: '180' },
  { text: '完成时间', value: 'finishedTime', align: 'center', width: '180' },
  { text: '退回次数', value: 'returns', align: 'center' },
  { text: '检定员', value: 'staffName', align: 'center' },
])
const requireCertifications = ref(0) // 应出具证书数
const currentCertifications = ref(0) // 当前证书数
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!
  listQuery.value.customerId = props.customerId!
  listQuery.value.orderId = props.orderId!
  getCertificateMonitors({ ...listQuery.value }).then((res) => {
    list.value = res.data.rows
    requireCertifications.value = res.data.requireCertCount // 应出具证书数量
    currentCertifications.value = res.data.completeCertCount // 已完成证书数量
    total.value = parseInt(res.data.total)
  })
  loading.value = false
}

// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    listQuery.value.limit = val.size
  }
  if (val && val.page) {
    listQuery.value.offset = val.page
  }
  fetchData(true)
}
watch(
  [() => props.orderId, () => props.customerId],
  (newVal, oldVal) => {
    console.log(newVal[0], newVal[1])

    if (newVal[0] && newVal[1]) {
      fetchData()
    }
  },
  {
    deep: true,
    immediate: false,
  },
)
onMounted(() => {
  // nextTick(() => {
  //   fetchData()
  // })
  // setTimeout(() => {
  //   fetchData()
  // }, 5000)
})
</script>

<template>
  <div class="certification-monitor">
    <div class="certification">
      <div><span>本次检定应出具证书:</span> <span class="number">{{ requireCertifications }}</span></div>
      <div class="finish">
        <span>已完成:</span> <span class="number">{{ currentCertifications }}</span>
      </div>
    </div>
    <normal-table
      :data="list"
      :total="total"
      :query="listQuery"
      :columns="columns"
      :list-loading="loading"
      :pagination="true"
      :page-sizes="[5, 10, 20, 30, 50, 100, 150, 200]"
      @change="changePage"
    >
      <template #preColumns>
        <el-table-column label="序号" width="55" align="center">
          <template #default="scope">
            {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
          </template>
        </el-table-column>
      </template>
    </normal-table>
  </div>
</template>

<style lang="scss" scoped>
.certification-monitor {
  .certification {
    display: flex;
    justify-content: flex-end;

    .finish {
      margin-left: 40px;
    }

    .number {
      font-weight: 600;
    }
  }
}
</style>