import React, { useCallback, useEffect, useMemo, useState } from "react";
import styles from "./index.module.scss";
import { useDispatch, useSelector } from "react-redux";
import { A4_APIgetList } from "@/store/action/A4store";
import { RootState } from "@/store";
import { A4tableType } from "@/types";
import { Button } from "antd";
import MyPopconfirm from "@/components/MyPopconfirm";
import MyTable from "@/components/MyTable";
import { A4tableC } from "@/utils/tableData";
import A3set from "./A3set";
import A3Edit from "./A3Edit";
function A4store() {
  const dispatch = useDispatch();

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

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

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

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

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

  // 点击删除
  const delTableFu = useCallback(async (id: number) => {}, []);

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: "操作",
        render: (item: A4tableType) => (
          <>
            <Button
              size="small"
              type="text"
              onClick={() => setEditInfo({ id: item.id, type: "编辑" })}
            >
              编辑
            </Button>
            <MyPopconfirm txtK="删除" onConfirm={() => delTableFu(item.id)} />
          </>
        ),
      },
    ];
  }, [delTableFu]);

  const [editInfo, setEditInfo] = useState<{
    id: number;
    type: "" | "新增" | "编辑" | "商城设置";
  }>({ id: 0, type: "" });

  const topTit = useMemo(() => {
    let txt = "";
    if (editInfo.type !== "商城设置") txt = editInfo.type;
    return txt;
  }, [editInfo.type]);

  return (
    <div className={styles.A4store}>
      <div className="pageTitle">
        积分商城
        {topTit ? ` - ${topTit}` : ""}
      </div>
      {/* 顶部筛选 */}
      <div className="A4top">
        <div></div>
        <div>
          <Button
            type="primary"
            onClick={() => setEditInfo({ id: -1, type: "商城设置" })}
          >
            商城设置
          </Button>
          &emsp;
          <Button
            type="primary"
            onClick={() => setEditInfo({ id: -1, type: "新增" })}
          >
            新增
          </Button>
        </div>
      </div>

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

      {/* 商城设置 */}
      {editInfo.id ? (
        editInfo.type === "商城设置" ? (
          <A3set closeFu={() => setEditInfo({ id: 0, type: "" })} />
        ) : (
          <A3Edit
            editInfo={{
              id: editInfo.id,
              type: editInfo.type as "新增" | "编辑",
            }}
            closeFu={() => setEditInfo({ id: 0, type: "" })}
            upTableFu={() => getListFu()}
            addTableFu={() => resetSelectFu()}
          />
        )
      ) : null}
    </div>
  );
}

const MemoA4store = React.memo(A4store);

export default MemoA4store;
