<script lang="ts" setup>
  import { BasicTable, useTable } from '/@/components/Table';
  import { formSchemas, columnSchema } from './config';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { Textarea } from 'ant-design-vue';
  import { ref } from 'vue';
  import { formatToDateTime } from '/@/utils/dateUtil';
  import { EyeOutlined } from '@ant-design/icons-vue';

  const outputData = ref<string>();

  const [register] = useTable({
    columns: columnSchema,
    size: 'small',
    showIndexColumn: false,
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    dataSource: [
      {
        time: formatToDateTime(new Date()),
        identifier: '标识符',
        eventName: '事件名',
        eventType: '告警',
        outputParams: { test: 1 },
      },
    ],
    formConfig: {
      layout: 'inline',
      baseColProps: { span: 6 },
      labelWidth: 80,
      schemas: formSchemas,
    },
    handleSearchInfoFn: (params: Recordable) => {
      // console.log(params);
      return params;
    },
  });

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

  const handleViewDetail = () => {
    outputData.value = JSON.stringify(
      {
        test: '123',
      },
      null,
      2
    );
    openModal(true);
  };
</script>

<template>
  <BasicTable class="event-manage-table" @register="register">
    <template #outputParams>
      <span class="cursor-pointer text-blue-500" @click="handleViewDetail">
        <EyeOutlined class="svg:text-blue-500" />
        <span class="ml-2">详情</span>
      </span>
    </template>
  </BasicTable>
  <BasicModal title="输出参数" @register="registerModal">
    <Textarea v-model:value="outputData" :autosize="true" />
  </BasicModal>
</template>

<style lang="less" scoped>
  .event-manage-table {
    background-color: #f0f2f5;
  }
</style>