import React, { useState, useEffect } from 'react';
import {
  DatePicker,
  Input,
  Table,
  Row,
  Col,
  Button,
  notification,
  message,
  Tooltip,
  Spin,
  Pagination,
} from 'antd';
import { 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 { get, PUBLISH_SERVICE } from '@/services/index';
import styles from './index.less';

const { RangePicker } = DatePicker;

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('month')); // 默认值当天0点
  const [filteredValue, setFilteredValue] = useState([]);
  const [endTime, setEndTime] = useState(
    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
  );
  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 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: 300,
      render: item => searchStyle(item),
      // filters: functionNameFilters,
      // onFilter: (value, record) => record.functionName === value,
    },
    {
      title: '标签',
      dataIndex: 'Label',
      key: 'Label',
      // width: 300,
      onCell: () => ({
        style: {
          maxWidth: 300,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {searchStyle1(record)}
        </Tooltip>
      ),
    },
    {
      title: '操作信息',
      dataIndex: 'ShortInfo',
      key: 'ShortInfo',
      onCell: () => ({
        style: {
          maxWidth: 700,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {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) {
      const escapedSearchValue = functionName.replace(/\\/g, '\\\\');
      const regex = new RegExp(escapedSearchValue, 'g');
      n = val.replace(
        regex,
        `<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 (allTime) {
      setLoading(true);
      getData();
    }
  }, [allTime]);
  const getData = () => {
    get(`${PUBLISH_SERVICE}/LogCenter/GetOmsCustomerLog`, {
      logType: 'operationLog',
      StartDateTime: allTime[0].format('YYYY-MM-DD HH:mm:ss'),
      EndDate: allTime[1].format('YYYY-MM-DD HH:mm:ss'),
      function: functionName,
      label,
      PageIndex: 1,
      PageSize: 20,
    })
      .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;
            setTotal(res.data.TotalCount);
            setPageSize(20);
            setCurrentPage(1);
            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);
      });
  };

  const getData1 = (page, size) => {
    get(`${PUBLISH_SERVICE}/LogCenter/GetOmsCustomerLog`, {
      logType: 'operationLog',
      StartDateTime: allTime[0].format('YYYY-MM-DD HH:mm:ss'),
      EndDate: allTime[1].format('YYYY-MM-DD HH:mm:ss'),
      function: functionName,
      label,
      PageIndex: page,
      PageSize: size,
    })
      .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;
            setTotal(res.data.TotalCount);
            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);
  };
  const changeTime = time => {
    setAllTime(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'),
    );
    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 = () => {
    setStartTime(moment().startOf('month'));
    setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
    setAllTime([moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')]);
    setFunctionName('');
    setFilteredValue([]);
    setLabel('');
    setShowSearchStyle(false);
  };
  const onChangeInput = filters => {
    console.log('filters', filters);
    setFilteredValue(filters.Level);
  };

  const paginationChange = (page, pageSizes) => {
    getData1(page, pageSizes);
    setCurrentPage(page);
    setPageSize(pageSizes);
  };
  return (
    <>
      <div className={styles.omsLog}>
        <Row className={styles.head}>
          <Col span={24}>
            <span style={{ lineHeight: 2, marginLeft: '27px' }}>时间：</span>
            <RangePicker
              locale={locale}
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              onChange={changeTime}
              value={allTime}
              allowClear={false}
            />
            {/* <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)} style={{ marginLeft: '20px' }}>
              近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>
            <br />
            <br />
            <span>接口查询：</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 - 285px)' }}
              pagination={false}
              onChange={onChangeInput}
            />
          </div>
          <Pagination
            style={{ display: 'flex', justifyContent: 'end', padding: '10px' }}
            total={total}
            showTotal={(aa, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`}
            defaultPageSize={pageSize}
            defaultCurrent={1}
            pageSizeOptions={[10, 20, 50, 100]}
            current={currentPage}
            onChange={paginationChange}
            size="small"
            showQuickJumper
          />
        </Spin>
      </div>
    </>
  );
};
export default OmsLog;
