/* eslint-disable no-else-return */
/* eslint-disable no-unneeded-ternary */
import React, { useState, useEffect, useRef } from 'react';
import {
  DatePicker,
  Input,
  Table,
  Row,
  Col,
  Button,
  notification,
  message,
  Tooltip,
  Spin,
  Pagination,
  Select,
  Tag,
  Modal,
} from 'antd';
import { CalculatorFilled, SwapRightOutlined, SyncOutlined } from '@ant-design/icons';
import moment from 'moment';
import 'moment/dist/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import styles from './index.less';
import { GetCallLogPages } from '@/services/logCenter/api';
import { GetWayPages } from '@/services/homePage/api';

const { RangePicker } = DatePicker;
const { Option } = Select;

const LogCenter = () => {
  const [loading, setLoading] = useState(false); // 源数据
  const [requestUrl, setRequestUrl] = useState(''); // 接口名称筛选
  const [label, setLabel] = useState(''); // 标签筛选
  const [allTime, setAllTime] = useState([
    moment().startOf('month'),
    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
  ]);
  const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
  const [total, setTotal] = useState();
  const [pageSize, setPageSize] = useState(20);
  const [currentPage, setCurrentPage] = useState(1);
  const [loginCodeFilters, setLoginCodeFilters] = useState([]);
  const [loginStateCodeFilters, setLoginStateCodeFilters] = useState([]);
  const [content, setContent] = useState();
  const [modalVisible, setModalVisible] = useState(false);
  const [tableData, setTableData] = useState([]);
  const [selectState, setSelectState] = useState('失败');
  const timeSorter = useRef('desc');
  const filterSorter = useRef('requestDate');

  useEffect(() => {
    getTableList();
  }, []);

  const getTableList = (pageIndex, page, time, url, tag, success, flag) => {
    setLoading(true);
    let successState = '';
    if (success) {
      if (success === '成功') {
        successState = true;
      } else if (success === '失败') {
        successState = false;
      }
    } else {
      if (selectState === '全部') {
        successState = '';
      } else if (selectState === '成功') {
        successState = true;
      } else if (selectState === '失败') {
        successState = false;
      }
    }
    let newUrl = url ? url : requestUrl;
    GetWayPages({
      pageIndex: pageIndex ? pageIndex : currentPage,
      pageSize: page ? page : pageSize,
      dateFrom: time
        ? time[0].format('YYYY-MM-DD HH:mm:ss')
        : allTime[0].format('YYYY-MM-DD HH:mm:ss'),
      dateTo: time
        ? time[1].format('YYYY-MM-DD HH:mm:ss')
        : allTime[1].format('YYYY-MM-DD HH:mm:ss'),
      info: flag ? '' : newUrl,
      methodType: 0,
      sortFieldsAndDirection: `${filterSorter.current} ${timeSorter.current}`,
      isSuccess: successState,
    }).then(res => {
      setLoading(false);
      if (res.code === 0) {
        setTableData(res.data.listData.list);
        setTotal(res.data.listData.totalCount);
        setLoginCodeFilters([{ text: '成功', value: 1 }, { text: '失败', value: 0 }]);
        let arr2 = res.data.listData.list.map(item => item.result);
        arr2 = arr2.filter((value, index) => arr2.indexOf(value) === index);
        setLoginStateCodeFilters(arr2.map(item => ({ text: item, value: item })));
      } else {
        setTableData([]);
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  };

  const columns = [
    {
      title: '接口名称',
      dataIndex: 'path',
      key: 'path',
      width: 300,
      fixed: 'left',
      onCell: () => ({
        style: {
          maxWidth: 400,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {searchStyle(record)}
        </Tooltip>
      ),
    },
    {
      title: '调用时间',
      dataIndex: 'requestDate',
      key: 'requestDate',
      width: 140,
      align: 'center',
      sorter: true,
    },
    {
      title: '调用结果',
      dataIndex: 'errorMsg',
      key: 'errorMsg',
      width: 100,
      align: 'center',
      render: record => {
        if (record) {
          return <span style={{ color: 'red', fontWeight: 'bold' }}>失败</span>;
        } else {
          return <span style={{ color: '#6ecd3d', fontWeight: 'bold' }}>成功</span>;
        }
      },
    },
    {
      title: '耗时/ms',
      dataIndex: 'consumerTime',
      key: 'consumerTime',
      align: 'center',
      width: 80,
      sorter: true,
    },
    // {
    //   title: '返回状态码',
    //   dataIndex: 'result',
    //   key: 'result',
    //   width: 100,
    //   align: 'center',
    // },
    {
      title: '请求方法',
      dataIndex: 'method',
      key: 'method',
      width: 80,
      align: 'center',
      render: record => {
        if (record === 'GET') {
          return (
            <Tag color="orange" style={{ width: '44.44px' }}>
              GET
            </Tag>
          );
        }
        return <Tag color="green">POST</Tag>;
      },
    },
    {
      title: '返回体大小/byte',
      dataIndex: 'responseSize',
      key: 'responseSize',
      width: 130,
      align: 'center',
    },
    {
      title: '异常信息',
      dataIndex: 'errorMsg',
      key: 'errorMsg',
      align: 'center',
      width: 100,
      render: record => {
        if (record) {
          return (
            <Button
              size="small"
              type="primary"
              onClick={() => {
                handleLog(record);
              }}
              style={{ backgroundColor: 'red' }}
            >
              错误内容
            </Button>
          );
        }
      },
    },
  ];

  const handleLog = text => {
    setModalVisible(true);
    setContent(text);
  };

  // 模糊查询匹配的样式
  const searchStyle = val => {
    let n;
    if (showSearchStyle) {
      n = val.replace(new RegExp(requestUrl, 'g'), `<span style='color:red'>${requestUrl}</span>`);
    } else {
      n = val;
    }
    return <div dangerouslySetInnerHTML={{ __html: n }} />;
  };

  const searchStyle1 = val => {
    let n;
    if (showSearchStyle) {
      n = val.replace(new RegExp(label, 'g'), `<span style='color:red'>${label}</span>`);
    } else {
      n = val;
    }
    return <div dangerouslySetInnerHTML={{ __html: n }} />;
  };

  const changeTime = time => {
    let time1 = time[0].format('YYYY-MM');
    let time2 = time[1].format('YYYY-MM');
    if (time1 !== time2) {
      message.warning('不允许跨月查询');
    } else {
      setAllTime(time);
      setPageSize(20);
      setCurrentPage(1);
      getTableList(1, 20, time);
    }
  };
  // 近1/6/12/24小时
  const setTime = time => {
    setAllTime([
      moment(new Date(new Date().getTime() - time * 60 * 60 * 1000), 'YYYY-MM-DD HH:mm:ss'),
      moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
    ]);
  };
  const handleReset = () => {
    setAllTime([moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')]);
    setRequestUrl('');
    setLabel('');
    setSelectState('失败');
    setShowSearchStyle(false);
    getTableList(
      1,
      20,
      [moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')],
      '',
      '',
      '失败',
      'rest',
    );
  };

  const paginationChange = (page, pageSizes) => {
    getTableList(page, pageSizes);
    setCurrentPage(page);
    setPageSize(pageSizes);
  };

  const onChangeInput = (pagination, filters, sorter) => {
    timeSorter.current = sorter.order === 'ascend' ? 'asc' : 'desc';
    filterSorter.current = sorter.field ? sorter.field : 'requestDate';
    getTableList();
  };

  const changeSuccess = e => {
    setSelectState(e);
    getTableList('', '', '', '', '', e);
  };
  return (
    <div className={styles.centerLog}>
      <div className={styles.head}>
        <span style={{ lineHeight: 2, marginLeft: '7px' }}>时间：</span>
        <RangePicker
          locale={locale}
          showTime
          format="YYYY-MM-DD HH:mm:ss"
          onChange={changeTime}
          value={allTime}
          allowClear={false}
        />
        <span style={{ marginLeft: '20px' }}>调用结果：</span>
        <Select style={{ width: '180px' }} value={selectState} onSelect={e => changeSuccess(e)}>
          <Option value="全部">全部</Option>
          <Option value="成功">成功</Option>
          <Option value="失败">失败</Option>
        </Select>
        <span style={{ marginLeft: '20px' }}>接口名称：</span>
        <Input
          style={{ width: '200px' }}
          placeholder="请输入接口名称"
          onChange={e => {
            setRequestUrl(e.target.value);
          }}
          value={requestUrl}
          allowClear
        />
        <Button
          type="primary"
          style={{ marginLeft: '10px' }}
          onClick={() => {
            setPageSize(20);
            setCurrentPage(1);
            getTableList(1, 20);
            setShowSearchStyle(true);
          }}
        >
          查询
        </Button>
        <Button
          icon={<SyncOutlined className={styles.icon} />}
          onClick={handleReset}
          style={{
            marginLeft: '25px',
            verticalAlign: 'middle',
          }}
        >
          重置
        </Button>
      </div>
      <div className={styles.table}>
        <Table
          size="small"
          bordered
          columns={columns}
          dataSource={tableData}
          scroll={{ y: 'calc(100% - 35px)' }}
          pagination={false}
          onChange={onChangeInput}
          loading={loading}
        />
      </div>
      <div className={styles.footer}>
        <Pagination
          total={total}
          showTotal={(aa, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`}
          pageSizeOptions={[10, 20, 40, 100]}
          current={currentPage}
          onChange={paginationChange}
          size="small"
          pageSize={pageSize}
          showSizeChanger
        />
      </div>
      <Modal
        title="详细信息"
        visible={modalVisible}
        keyboard={false}
        maskClosable
        centered
        onOk={() => setModalVisible(false)}
        onCancel={() => setModalVisible(false)}
        width="1000px"
        bodyStyle={{
          minHeight: '100px',
          maxHeight: '600px',
          overflowY: 'scroll',
        }}
        style={{ top: '40px' }}
        footer={[
          <Button type="primary" onClick={() => setModalVisible(false)} key="back">
            关闭窗口
          </Button>,
        ]}
      >
        {content}
      </Modal>
    </div>
  );
};
export default LogCenter;
