<script lang="ts" setup>
  import { BasicTable, useTable } from '/@/components/Table';
  import { columns } from './config';
  import { edgeEventPage } from '/@/api/edgeManage/edgeInstance';
  import { EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { Input, Button } from 'ant-design-vue';
  import { ref } from 'vue';

  const props = defineProps({
    recordData: {
      type: Object as PropType<EdgeInstanceItemType>,
      default: () => {},
    },
  });

  const outputData = ref<string>();

  const [registerTable] = useTable({
    columns,
    api: async ({ page, pageSize }) => {
      const res = await edgeEventPage(
        {
          page: page - 1 < 0 ? 0 : page - 1,
          pageSize,
          tenantId: props?.recordData?.tenantId?.id,
          sortOrder: 'DESC',
          sortProperty: 'ts',
        },
        props?.recordData?.id?.id
      );
      return {
        total: res?.totalElements,
        items: res?.data,
      };
    },
    showIndexColumn: false,
    clickToRowSelect: false,
    showTableSetting: true,
    bordered: true,
  });

  const [registerModal, { openModal, closeModal }] = useModal();

  const handleEventIsDetail = (record: Recordable) => {
    outputData.value = record?.body?.error;
    openModal(true);
  };
</script>

<template>
  <div>
    <BasicTable :clickToRowSelect="false" @register="registerTable">
      <template #errorDetail="{ record }">
        <Button
          v-if="record?.body?.error"
          type="link"
          class="ml-2"
          @click="handleEventIsDetail(record)"
        >
          查看
        </Button>
        <Button v-else type="link" class="ml-2"> - </Button>
      </template>
    </BasicTable>
    <BasicModal title="详情" @register="registerModal" @ok="closeModal">
      <Input.TextArea v-model:value="outputData" :autosize="true" />
    </BasicModal>
  </div>
</template>