<script lang="ts" setup>
  import { BasicTable, useTable } from '/@/components/Table';
  import { formSchemas, columnSchema } from './config';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { Input } from 'ant-design-vue';
  import { ref } from 'vue';
  import { EyeOutlined } from '@ant-design/icons-vue';
  import { getEventManageListRecord } from '/@/api/device/eventManage';
  import { EventManageRequest } from '/@/api/device/model/eventManageModel';

  const outputData = ref<string>();

  const props = defineProps<{ tbDeviceId: string }>();

  const [register] = useTable({
    columns: columnSchema,
    size: 'small',
    showIndexColumn: false,
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    api: getEventManageListRecord,
    fetchSetting: {
      totalField: 'totalElements',
      listField: 'data',
    },
    formConfig: {
      layout: 'inline',
      baseColProps: { span: 6 },
      labelWidth: 80,
      schemas: formSchemas,
      fieldMapToTime: [['dateRange', ['startTime', 'endTime']]],
    },
    beforeFetch: (params: EventManageRequest) => {
      return {
        ...params,
        startTime: params.startTime ? new Date(params.startTime).getTime() : params.startTime,
        endTime: params.endTime ? new Date(params.endTime).getTime() : params.endTime,
        tbDeviceId: props.tbDeviceId,
      };
    },
  });

  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">
    <Input.TextArea v-model:value="outputData" :autosize="true" />
  </BasicModal>
</template>

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