import { RootState } from "@/store";
import { getLogListAPI } from "@/store/action/Z2log";
import { Input, DatePicker } from "antd";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";

import styles from "./index.module.scss";
import MyTable from "@/components/MyTable";
import { Z2tableC } from "@/utils/tableData";

const { RangePicker } = DatePicker;

function Z2log() {
  const dispatch = useDispatch();

  // 筛选和分页
  const [fromData, setFromData] = useState({
    searchKey: "",
    pageSize: 10,
    pageNum: 1,
    startTime: "",
    endTime: "",
  });

  // 账号的输入
  const nameTime = useRef(-1);
  const nameChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      clearTimeout(nameTime.current);
      nameTime.current = window.setTimeout(() => {
        setFromData({ ...fromData, searchKey: e.target.value, pageNum: 1 });
      }, 500);
    },
    [fromData]
  );
  // 时间选择器改变
  const timeChange = useCallback(
    (date: any, dateString: any) => {
      let startTime = "";
      let endTime = "";
      if (dateString[0] && dateString[1]) {
        startTime = dateString[0] + " 00:00:00";
        endTime = dateString[1] + " 23:59:59";
      }
      setFromData({ ...fromData, startTime, endTime, pageNum: 1 });
    },
    [fromData]
  );

  useEffect(() => {
    dispatch(getLogListAPI(fromData));
  }, [dispatch, fromData]);

  // ---------关于表格
  const tableInfo = useSelector((state: RootState) => state.Z2log.tableInfo);

  return (
    <div className={styles.Z2log}>
      <div className="pageTitle">操作日志</div>
      <div className="logTop">
        <div className="tableSelectBox">
          <div className="row">
            <span>账号：</span>
            <Input
              maxLength={10}
              showCount
              style={{ width: 300 }}
              placeholder="请输入账号"
              allowClear
              onChange={(e) => nameChange(e)}
            />
          </div>
          <div className="row">
            <span>操作日期：</span>
            <RangePicker onChange={timeChange} />
          </div>
        </div>
      </div>

      {/* 表格主体 */}
      <div className="tableMain">
        <MyTable
          yHeight={630}
          list={tableInfo.list}
          columnsTemp={Z2tableC}
          pageNum={fromData.pageNum}
          pageSize={fromData.pageSize}
          total={tableInfo.total}
          onChange={(pageNum, pageSize) =>
            setFromData({ ...fromData, pageNum, pageSize })
          }
        />
      </div>
    </div>
  );
}

const MemoZ2log = React.memo(Z2log);

export default MemoZ2log;