import React, { useState, useEffect } from 'react';
import {
  DatePicker,
  Input,
  Table,
  Row,
  Col,
  Button,
  notification,
  message,
  Tooltip,
  Spin,
} from 'antd';
import { SwapRightOutlined, SyncOutlined } from '@ant-design/icons';
import moment from 'moment';
import { get, PUBLISH_SERVICE } from '@/services/index';
import styles from './index.less';

const OmsLog = () => {
  const [loading, setLoading] = useState(false); // 源数据
  const [data, setData] = useState([]); // 源数据
  const [levelFilters, setLevelFilters] = useState([]); // 优先级筛选
  const [functionName, setFunctionName] = useState(''); // 接口名称筛选
  const [label, setLabel] = useState(''); // 标签筛选
  const [startTime, setStartTime] = useState(moment().startOf('week')); // 默认值当天0点
  const [filteredValue, setFilteredValue] = useState([]);
  const [endTime, setEndTime] = useState(
    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
  );
  const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式

  const columns = [
    {
      title: '操作时间',
      dataIndex: 'LogTime',
      key: 'LogTime',
      width: 150,
      defaultSortOrder: 'descend',
      sortDirections: ['descend', 'ascend'],
      sorter: (a, b) =>
        new Date(a.LogTime).getTime() - new Date(b.LogTime).getTime(),
    },
    {
      title: '接口名称',
      dataIndex: 'Function',
      key: 'Function',
      ellipsis: 'true',
      width: 200,
      render: item => searchStyle(item),
      // filters: functionNameFilters,
      // onFilter: (value, record) => record.functionName === value,
    },
    {
      title: '标签',
      dataIndex: 'Label',
      key: 'Label',
      ellipsis: 'true',
      width: 300,
      render: item => searchStyle1(item),
    },
    {
      title: '操作信息',
      dataIndex: 'ShortInfo',
      key: 'ShortInfo',
      width: 850,
      ellipsis: 'true',
      render: record => (
        <Tooltip placement="left" title={decodeURI(record)}>
          {decodeURI(record)}
        </Tooltip>
      ),
    },
    {
      title: '优先级',
      dataIndex: 'Level',
      key: 'Level',
      width: 100,
      filters: levelFilters,
      onFilter: (value, record) => record.Level === value,
      filteredValue,
      render: record => {
        if (record === 3) {
          return <span style={{ color: '#ff7875' }}>高</span>;
        }
        if (record === 2) {
          return <span style={{ color: '#faad14' }}>中</span>;
        }
        if (record === 1) {
          return <span style={{ color: '#52c41a' }}>低</span>;
        }
        return record;
      },
    },
  ];

  //模糊查询匹配的样式
  const searchStyle = val => {
    let n;
    if (showSearchStyle) {
      n = val.replace(
        new RegExp(functionName, 'g'),
        `<span style='color:red'>${functionName}</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 }} />;
  };

  // 在起止时间任意一个变化后获取数据
  useEffect(() => {
    if (startTime && endTime) {
      setLoading(true);
      getData();
    }
  }, [startTime, endTime]);
  const getData = () => {
    get(`${PUBLISH_SERVICE}/LogCenter/GetOmsCustomerLog`, {
      logType: 'operationLog',
      StartDateTime: startTime.format('YYYY-MM-DD HH:mm:ss'),
      EndDate: endTime.format('YYYY-MM-DD HH:mm:ss'),
      function: functionName,
      label,
      PageIndex: 1,
      PageSize: 1000,
    })
      .then(res => {
        if (res.code === 0) {
          // setData(res.root.filter(item => item.label!=="ServiceInput"&&item.label!=="ServiceReturn"));
          if (!res.data) {
            setData([]);
          } else {
            const result = res.data.list;
            setData(
              result.map((item, index) => {
                item.key = index;
                return item;
              }),
            );
            console.log(result);
            // 过滤优先级
            let arr1 = result.map(item => item.Level);
            arr1 = arr1.filter((value, index) => arr1.indexOf(value) === index);
            setLevelFilters(arr1.map(item => ({ text: item, value: item })));
          }
        } else {
          notification.error({
            message: '数据获取失败',
            description: res.message,
          });
        }
        setLoading(false);
      })
      .catch(err => {
        message.error(err);
        setLoading(false);
      });
  };
  // DatePicker改变点击确定时
  const changeStartTime = time => {
    setStartTime(time);
  };
  const changeEndTime = time => {
    setEndTime(time);
  };
  // 近1/6/12/24小时
  const setTime = time => {
    setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
    setStartTime(
      moment(
        new Date(new Date().getTime() - time * 60 * 60 * 1000),
        'YYYY-MM-DD HH:mm:ss',
      ),
    );
  };
  const handleReset = () => {
    setStartTime(moment().startOf('week'));
    setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
    setFunctionName('');
    setFilteredValue([]);
    setLabel('');
    setShowSearchStyle(false);
  };
  const onChangeInput = filters => {
    console.log('filters', filters);
    setFilteredValue(filters.Level);
  };
  return (
    <>
      <div className={styles.omsLog}>
        <Row className={styles.head}>
          <Col span={24}>
            <span style={{ lineHeight: 2 }}>时间：</span>
            <DatePicker
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              placeholder="起始时间"
              value={startTime}
              onChange={changeStartTime}
              allowClear={false}
            />
            <SwapRightOutlined style={{ verticalAlign: '0.125em' }} />
            <DatePicker
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              placeholder="结束时间"
              value={endTime}
              onChange={changeEndTime}
              style={{ marginRight: '10px' }}
              allowClear={false}
            />
            <Button onClick={() => setTime(1)}>近1小时</Button>
            {/* <Button onClick={() => setTime(6)}>近6小时</Button> */}
            <Button onClick={() => setTime(24)}>近1天</Button>
            <Button onClick={() => setTime(24 * 7)}>近1周</Button>
            <Button onClick={() => setTime(14 * 24)}>近2周</Button>
            {/* <Button onClick={() => setTime(30 * 24)}>近1月</Button> */}
            <span style={{ marginLeft: '20px' }}>接口查询：</span>
            <Input
              style={{ width: '200px' }}
              placeholder="请输入接口名称"
              onChange={e => {
                setFunctionName(e.target.value);
              }}
              value={functionName}
            />
            <span style={{ marginLeft: '20px' }}>标签查询：</span>
            <Input
              style={{ width: '200px' }}
              placeholder="请输入标签"
              onChange={e => {
                setLabel(e.target.value);
              }}
              value={label}
            />
            <Button
              type="primary"
              style={{ marginLeft: '10px' }}
              onClick={() =>{
                getData()
                setShowSearchStyle(true);
              }}
            >
              查询
            </Button>
            <Button
              icon={<SyncOutlined className={styles.icon} />}
              onClick={handleReset}
              style={{
                marginLeft: '25px',
                verticalAlign: 'middle',
                marginTop: '-3px',
              }}
            >
              重置
            </Button>
          </Col>
        </Row>
        <Spin spinning={loading} tip="loading">
          <div className={styles.table}>
            <Table
              size="small"
              bordered
              columns={columns}
              dataSource={data}
              scroll={{ x: 'max-content', y: 'calc(100vh - 230px)' }}
              pagination={{
                showTotal: (total, range) =>
                  `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                pageSizeOptions: [10, 20, 50, 100],
                defaultPageSize: 20,
                showQuickJumper: true,
                showSizeChanger: true,
              }}
              onChange={onChangeInput}
            />
          </div>
        </Spin>
      </div>
    </>
  );
};
export default OmsLog;
