import { PlusOutlined } from '@ant-design/icons';
import type {
  ActionType,
  ProColumns,
  ProFormInstance,
} from '@ant-design/pro-components';
import {
  ProCard,
  ProTable,
} from '@ant-design/pro-components';
import dayjs from 'dayjs'
import { Button, message, Popconfirm, Space, DatePicker } from 'antd';
import { useState, useRef } from 'react';
//引入接口
import { alarmlogApi } from '@/api/logs/service'
const { RangePicker } = DatePicker;
export default () => {
  const [fromType, setFromType] = useState<any>('table')
  const ref = useRef<ProFormInstance>();
  const actionRef = useRef<ActionType>();

  const Reolod = () => {
    ref.current?.resetFields()
    actionRef.current?.reload()
  }
  const columns: ProColumns<alarmlog.output>[] = [
    {
      title: '主键',
      dataIndex: 'id',
      hideInForm: true,
      search: false,
    },
    {
      title: '设备名称',
      dataIndex: 'deviceName',
    },
    {
      title: '时间',
      dataIndex: 'createDate',

      renderFormItem: (_, { type, defaultRender, ...rest }, form) => {
        return <RangePicker showTime />
      },
      render(_, record) {
        return <>{record.createDate ? dayjs(record.createDate).format("YYYY-MM-DD HH:mm:ss") : ""}</>
      },
    },
    {
      title: '报警等级',
      dataIndex: 'grade',
    },
    {
      title: '报警类型',
      dataIndex: 'logType',
    },
    {
      title: '报警值',
      dataIndex: 'value',
      search: false,
    },
    {
      title: '报警信息',
      dataIndex: 'msgInfo',
      search: false,
    },

  ];

  return (
    <>
      <ProCard>
        {fromType === 'form' ? <Button type='link' onClick={() => {
          ref.current?.resetFields();
          setFromType("table")
        }}>⬅返回</Button> : ""}
        <ProTable<alarmlog.output>
          columns={columns}
          type={fromType as 'table'}
          formRef={ref}
          actionRef={actionRef}
          onSubmit={(params: any) => {
            console.log(params);
            if (fromType === 'form') {
              if (params.id) {
                alarmlogApi.Update(params).then((res: MyResponse.Content) => {
                  if (res.statusCode === 200) {
                    message.info("更新成功!");
                    setFromType('table')
                    Reolod()
                  } else {
                    message.error(res.errors);
                  }
                })
              } else {
                alarmlogApi.Add(params).then((res: MyResponse.Content) => {
                  if (res.statusCode === 200) {
                    message.info("新增成功!");
                    setFromType('table')
                    Reolod()
                  } else {
                    message.error(res.errors);
                  }
                })
              }
            }
          }}
          request={async (params = {}) => {
            const jsonData: alarmlog.queryPage = {
              pageIndex: params.current || 1,
              pageSize: params.pageSize || 10,
              msgInfo: params.msgInfo,
              value: params.value,
              grade: params.grade,
              deviceName: params.deviceName,
              startTime: params.createDate ? dayjs(params.createDate[0]) : null,
              endTime: params.createDate ? dayjs(params.createDate[1]) : null
            };
            const response = await alarmlogApi.PagedList(jsonData);
            if (response.statusCode === 200) {
              return {
                data: response.data.items,
                success: true,
                total: response.data.total,
              };
            } else {
              return {
                data: [],
                success: false,
                total: 0,
              };
            }
          }}
          pagination={{
            pageSize: 5,
            showSizeChanger:false
          }}
          rowKey="id"
          dateFormatter="string"
          headerTitle="列表"
          toolBarRender={false}
        />
      </ProCard>
    </>
  );
};