import { logPage } from '@/services/system/log';


import React, { useRef, useEffect } from 'react';
import { useIntl, useAccess } from '@umijs/max';
import { message, Tag, Select, Tooltip } from 'antd';
import { ActionType, PageContainer, ProTable } from '@ant-design/pro-components';




const LogTableList: React.FC = () => {
  const actionRef = useRef<ActionType>();

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      valueType: 'text',
      search: false,
    },
    {
      title: '标题',
      dataIndex: 'title',
      valueType: 'text',
      search: true,
    },
    {
      title: '类型',
      dataIndex: 'businessType',
      valueType: 'text',
      search: false,
      render: (_: any, record: any) => {
        let color = record.businessType == 1 ? 'purple' : record.businessType == 2 ? 'blue' : record.businessType == 3 ? 'magenta' : 'red'
        let statusMap = [
          { label: '其它', value: 0 },
          { label: '新增', value: 1 },
          { label: '修改', value: 2 },
          { label: '删除', value: 3 },
        ]
        return <Tag color={color}>{statusMap.find((val) => val.value == record.businessType)?.label}</Tag>
      },
      // （0其它 1新增 2修改 3删除）
      // renderFormItem: (
      //   _,
      //   { type, defaultRender, formItemProps, fieldProps, ...rest },
      //   form,
      // ) => {
      //   const statusMap = [
      //     { label: '其它', value: 0 },
      //     { label: '新增', value: 1 },
      //     { label: '修改', value: 2 },
      //     { label: '删除', value: 3 },
      //   ]
      //   return <Select
      //     {...fieldProps}
      //     allowClear
      //     style={{ width: "100%" }}
      //     filterOption={false}
      //     fieldNames={{
      //       label: "label",
      //       value: "value"
      //     }}
      //     options={statusMap}
      //   />
      // },
    },
    {
      title: '方法',
      dataIndex: 'method',
      valueType: 'text',
      search: true,
      render: (data) => {
        return (
          <div className="ellipsis" style={{
            float: 'left',
            maxWidth: '100px',
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
          }} title={data}>
            <Tooltip placement="topLeft" title={data}>{data}</Tooltip>
          </div>
        )
      },
    },
    {
      title: '请求方式',
      dataIndex: 'requestMethod',
      valueType: 'text',
      search: true,
    },
    {
      title: '操作类别',
      dataIndex: 'operatorType',
      valueType: 'text',
      search: false,
      render: (_: any, record: any) => {
        let statusMap = [
          { label: '其它', value: 0 },
          { label: '后台用户', value: 1 },
          { label: '手机端用户', value: 2 },
        ]
        return statusMap.find((val) => val.value == record.operatorType)?.label
      },
    },
    {
      title: '操作人员',
      dataIndex: 'operName',
      valueType: 'text',
      search: false,
    },
    {
      title: '请求URL',
      dataIndex: 'operUrl',
      valueType: 'text',
      search: false,
      render: (data) => {
        return (
          <div className="ellipsis" style={{
            float: 'left',
            maxWidth: '100px',
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
          }} title={data}>
            <Tooltip placement="topLeft" title={data}>{data}</Tooltip>
          </div>
        )
      },
    },

    {
      title: '主机地址',
      dataIndex: 'operIp',
      valueType: 'text',
      search: false,
      render: (data) => {
        return (
          <div className="ellipsis" style={{
            float: 'left',
            maxWidth: '100px',
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
          }} title={data}>
            <Tooltip placement="topLeft" title={data}>{data}</Tooltip>
          </div>
        )
      },
    },
    {
      title: '操作地点',
      dataIndex: 'operLocation',
      valueType: 'text',
      search: false,
      render: (data) => {
        return (
          <div className="ellipsis" style={{
            float: 'left',
            maxWidth: '100px',
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
          }} title={data}>
            <Tooltip placement="topLeft" title={data}>{data}</Tooltip>
          </div>
        )
      },
    },
    {
      title: '请求参数',
      dataIndex: 'operParam',
      valueType: 'text',
      search: false,
      render: (data) => {
        return (
          <div className="ellipsis" style={{
            float: 'left',
            maxWidth: '100px',
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
          }} title={data}>
            <Tooltip placement="topLeft" title={data}>{data}</Tooltip>
          </div>
        )
      },
    },
    {
      title: '返回参数',
      dataIndex: 'jsonResult',
      valueType: 'text',
      search: false,
      render: (data) => {
        return (
          <div className="ellipsis" style={{
            float: 'left',
            maxWidth: '100px',
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
          }} title={data}>
            <Tooltip placement="topLeft" title={data}>{data}</Tooltip>
          </div>
        )
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueType: 'text',
      search: false,
      render: (_: any, record: any) => {
        let color = record.status == 0 ? 'green' : 'red'
        return <Tag color={color}>{record.status == 0 ? '正常' : '异常'}</Tag>
      },
    },
    {
      title: '错误消息',
      dataIndex: 'errorMsg',
      valueType: 'text',
      search: false,
      render: (data) => {
        return (
          <div className="ellipsis" style={{
            float: 'left',
            maxWidth: '100px',
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
          }} title={data}>
            <Tooltip placement="topLeft" title={data}>{data}</Tooltip>
          </div>
        )
      },
    },
    {
      title: '操作时间',
      dataIndex: 'operTime',
      valueType: 'text',
      search: false,
    },
    {
      title: '消耗时间',
      dataIndex: 'costTime',
      valueType: 'text',
      search: false,
    },
  ];

  return (
    <PageContainer>
      <div style={{ width: '100%', float: 'right' }}>
        <ProTable
          actionRef={actionRef}
          rowKey="id"
          key="logList"
          search={{
            labelWidth: 120,
          }}
          request={async (params, sorter, filter) => {
            let { data } = await logPage(params)
            return {
              data: data?.records || [],
              total: data?.total,
            };
          }}
          columns={columns}
        />
      </div>
    </PageContainer>
  );
};

export default LogTableList;
