import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import styles from "./index.module.scss";
import { useDispatch, useSelector } from "react-redux";
import { A1_APIgetList } from "@/store/action/A1wxuser";
import { RootState } from "@/store";
import { Button, Input } from "antd";
import MyTable from "@/components/MyTable";
import { A1tableC } from "@/utils/tableData";
import { A1tableType } from "@/types";
import A1add from "./A1add";
function A1wxuser() {
  const dispatch = useDispatch();

  const [fromData, setFromData] = useState({
    pageNum: 1,
    pageSize: 10,
    searchKey: "",
  });

  const getListFu = useCallback(() => {
    dispatch(A1_APIgetList(fromData));
  }, [dispatch, fromData]);

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

  const [inputKey, setInputKey] = useState(1);

  // 标题的输入
  const timeRef = useRef(-1);
  const fromKeyChangeFu = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>, key: "searchKey") => {
      clearTimeout(timeRef.current);
      timeRef.current = window.setTimeout(() => {
        setFromData({ ...fromData, [key]: e.target.value, pageNum: 1 });
      }, 500);
    },
    [fromData]
  );

  // 点击重置
  const resetSelectFu = useCallback(() => {
    setInputKey(Date.now());
    setFromData({
      pageNum: 1,
      pageSize: 10,
      searchKey: "",
    });
  }, []);

  const tableInfo = useSelector((state: RootState) => state.A1wxuser.tableInfo);

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: "操作",
        render: (item: A1tableType) => (
          <>
            <Button
              size="small"
              type="text"
              onClick={() =>
                setLookInfo({
                  id: item.id,
                  name: item.userName,
                  num: item.score,
                })
              }
            >
              积分管理
            </Button>
          </>
        ),
      },
    ];
  }, []);

  // 点击积分管理出来的页面
  const [lookInfo, setLookInfo] = useState({ id: 0, name: "", num: 0 });

  return (
    <div className={styles.A1wxuser}>
      <div className="pageTitle">
        用户管理{lookInfo.id ? " - 积分管理" : ""}
      </div>

      {/* 顶部筛选 */}
      <div className="A1top">
        <div>
          <span>昵称：</span>
          <Input
            key={inputKey}
            maxLength={10}
            showCount
            style={{ width: 300 }}
            placeholder="请输入"
            allowClear
            onChange={(e) => fromKeyChangeFu(e, "searchKey")}
          />
        </div>
        <div>
          <Button onClick={resetSelectFu}>重置</Button>
        </div>
      </div>

      {/* 表格主体 */}
      <div className="A1tableBox">
        <MyTable
          yHeight={625}
          list={tableInfo.list}
          columnsTemp={A1tableC}
          lastBtn={tableLastBtn}
          pageNum={fromData.pageNum}
          pageSize={fromData.pageSize}
          total={tableInfo.total}
          onChange={(pageNum, pageSize) =>
            setFromData({ ...fromData, pageNum, pageSize })
          }
        />
      </div>

      {/* 点击积分管理 */}
      {lookInfo.id ? (
        <A1add
          info={lookInfo}
          closeFu={() => setLookInfo({ id: 0, name: "", num: 0 })}
          upOneTableFu={(val) => {
            getListFu();
            setLookInfo({ ...lookInfo, num: val });
          }}
        />
      ) : null}
    </div>
  );
}

const MemoA1wxuser = React.memo(A1wxuser);

export default MemoA1wxuser;
