<template>
  <BasicTable @register="registerTable">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction
          :actions="[
            {
              label: '查看',
              onClick: () => {
                showHistory(record)
              },
            },
          ]"
        />
      </template>
    </template>
  </BasicTable>
  <a-modal
    width="70%"
    v-model:open="showHistoryModal" 
    title="历史详细"
    :destroyOnClose="true"
    @ok="closeShowHistoryModal" 
    @cancel="closeShowHistoryModal">
    <ShowDetail :info="info"/>
  </a-modal>
</template>

<script setup lang="ts">
import { defineProps, ref } from "vue"
import { BasicTable,useTable,TableAction } from "@/components/Table";
import { LoadCaseHistoryInfoList } from '@/api/demo/system';
import { columns } from './util'
import ShowDetail from './ShowDetail/index.vue'

const props = defineProps(['caseId'])
const showHistoryModal = ref(false)
const info = ref({})

const [registerTable, {  }] =
  useTable({
    title: '历史记录',
    beforeFetch: (params) => {
      return {
        ...params,
        key: props.caseId,
      }
    },
    api: LoadCaseHistoryInfoList,
    columns,
    rowKey: 'id',
    // 使用搜索表单
    useSearchForm: false,
    showTableSetting: true,
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
    },
  });
const showHistory = (record) => {
  showHistoryModal.value = true
  info.value = record
}
const closeShowHistoryModal = () => {
  showHistoryModal.value = false
}
</script>

<style lang="scss" scoped></style>
