<template>
  <div style="padding: 10px;">
    <BasicTable @register="registerTable" class="progress-data-table">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'rate'">
          <a-progress :percent="record.rate?record.rate:0" />
        </template>
      </template>
    </BasicTable>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { BasicTable, useTable } from "@/components/Table";
import { LoadDroneCaseInfoTaskByUser } from '@/api/audit/index';

const interval = ref()
const columns = [
  {
    title: "批次号",
    dataIndex: "picihao",
  },
  {
    title: "前时像",
    dataIndex: "qianshixiang",
  },
  {
    title: "后时像",
    dataIndex: "houshixiang",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
  },
  {
    title: "进度",
    dataIndex: "rate",
  },
  {
    title: "当前状态",
    dataIndex: "state",
    customRender: ({ record }) => {
      const { state } = record;
      switch(state){
        case 0:
          return '等待中'
        case 1:
          return '正在查询'
        case 2:
          return '查询已完成'
      }
    }
  },
]
const [registerTable, { reload, setLoading }] = useTable({
  columns,
  api: LoadDroneCaseInfoTaskByUser,
  showIndexColumn: false,
  showTableSetting: false,
  pagination: { pageSize: 10 },
  useSearchForm: false,
  handleSearchInfoFn(info) {
    console.log(info)
    return info;
  },
})
onMounted(() => {
  setTimeout(() => {
    interval.value = setInterval(() => {
      reload()
      setLoading(false)
    }, 1000)
  }, 1000)

})
onUnmounted(() => {
  console.log('clearInterval')
  clearInterval(interval.value)
})
</script>

<style lang="scss" scoped>
.progress-data-table{
  :deep(.ant-table-body){
    height: 530px !important;
  }
}
</style>
