import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, Button, Table, Select, Pagination, Space, Menu, Dropdown, Modal, Breadcrumb, message, Row, Col, Tooltip } from 'antd';
import '@common/common.less';
import { useSelector } from 'react-redux'
import apiObj from '@api/index';
const { post, api, xPost } = apiObj;
const { Option } = Select;
function ExceptionLog() {
  useEffect(() => {
    getAbnormalLog();
  }, []);
  const [logList, setLogList] = useState([]);
  const [total, setTotal] = useState(0);
  const [size, setSize] = useState(15);
  const [msvisible, setMsvisible] = useState(false);
  const [tipText, setTipText] = useState('');
  const [current, setCurrent] = useState(1);
  const [params, setParams] = useState({
    pages: 1,
    current: 1,
    size: 15
  });
  const [form] = Form.useForm();

  let list = []
  let data = {
    pages: 1,
    current: 1,
    size: size,
  }
  //表格数据
  function getAbnormalLog(param) {
    post(api.getAbnormalLog, param || params).then((res) => {
      if (res.data.code === 200) {
        const data = res.data.data;
        setLogList(data.records);
        setTotal(data.total)
      }
    })
  }

  function onSizeChange(current, pageSize) {
    params.current = current
    params.size = pageSize
    setSize(pageSize)
    setCurrent(current)
    setParams(params)
    getAbnormalLog()
  }
  function changePage(page, pageSize) {
    params.current = page
    params.size = pageSize
    setCurrent(page)
    setParams(params)
    getAbnormalLog()
  }
  function showModal(operationErrorInfo) {
    setMsvisible(true)
    setTipText(operationErrorInfo)
  }
  function handleOk() {
    setMsvisible(false)
  }
  function handleCancel() {
    setMsvisible(false)
  }
  const onFinish = (value) => {
    const param = {
      ...data,
      ...value
    }
    setCurrent(1)
    setParams(param)
    getAbnormalLog(param);
  };
  const onReset = () => {
    setCurrent(1)
    setParams(data)
    form.resetFields();
    getAbnormalLog(data);
  };

  const columns = [
    { title: '编号', dataIndex: 'operationId', key: 'index' },
    { title: '请求URL', dataIndex: 'operationUrl', key: 'index' },
    { title: '请求方式', dataIndex: 'operationWay', key: 'index' },
    {
      title: '请求参数', key: 'index', render: (text, record) => (
        <Tooltip placement="top" title={record.operationParam}>
          <span className="record">{record.operationParam}</span>
        </Tooltip>

      )
    },
    { title: 'IP地址', dataIndex: 'operationIp', key: 'index' },
    { title: '用户代理', dataIndex: 'operationName', key: 'index' },
    { title: '创建时间', dataIndex: 'gmtCreate', key: 'index' },
    {
      title: '操作', dataIndex: 'key', render: (text, record) => (
        <Space size="middle">
          <a onClick={e => showModal(record.operationErrorInfo)}>查看</a>
        </Space>
      )
    }
  ]
  return (
    <div className="wrapper">
      <div className="filter-box">
        <Form
          form={form}
          name="normal_login"
          onFinish={onFinish}
          initialValues={{ status: '' }}
        >
          <Row gutter={24}>
            <Col span={5} key={0}>
              <Form.Item label="请求方式" name="operationWay">
                <Input placeholder="请求方式" autoComplete='off'/>
              </Form.Item>
            </Col>
            <Col span={5} key={1}>
              <Form.Item label="IP地址" name="operationIp">
                <Input placeholder="IP地址" autoComplete='off'/>
              </Form.Item>
            </Col>
            <Col span={6} key={3}>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
                <Button onClick={onReset}>
                  重置
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>

      <div className="table">
        <div className="table-header">
          <h2 className="table-title">异常日志</h2>
        </div>

        <Table
          columns={columns}
          scroll={{ y: 'calc(100vh - 360px)' }}
          dataSource={logList}
          rowKey={record => record.id}
          pagination={{
            current: current,
            pageSize: size,
            size: 'small',
            showSizeChanger: true,
            pageSizeOptions: ['15', '30', '60', '120'],
            showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
            onShowSizeChange: (current, pageSize) => onSizeChange(current, pageSize), // 改变每页数量时更新显示
            onChange: (page, pageSize) => changePage(page, pageSize),//点击页码事件
            total: total
          }} />

        <Modal
          title="查看异常"
          okText='确定'
          cancelText='取消'
          width={400}
          visible={msvisible}
          onOk={handleOk}
          onCancel={handleCancel}
          maskClosable={false}
        >
          <p>{tipText}</p>
        </Modal>
      </div>
    </div >
  )
}

export default ExceptionLog;