import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { A1_APIgetInfo } from "@/store/action/A1wxuser";
import { Button } from "antd";
import MyTable from "@/components/MyTable";
import { A1tableClook } from "@/utils/tableData";
import A1aEdit from "./A1aEdit";

type Props = {
  info: { id: number; name: string; num: number };
  closeFu: () => void;
  upOneTableFu: (val: number) => void;
};

function A1add({ info, closeFu, upOneTableFu }: Props) {
  const getInfoFu = useCallback(async () => {
    const res = await A1_APIgetInfo(info.id);
    if (res.code === 0)
      setList(
        res.data.map((v: any) => ({
          ...v,
          score: v.score && v.score >= 0 ? "+" + v.score : v.score,
        }))
      );
  }, [info.id]);

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

  const [list, setList] = useState([]);

  // 爱心币变动
  const [editInfo, setEditInfo] = useState({ num: 0, id: 0 });

  return (
    <div className={styles.A1add}>
      <div className="A1atop">
        <div>
          {info.name}&emsp;&emsp;当前爱心币：{info.num || 0}&emsp;
          <Button
            type="primary"
            onClick={() => setEditInfo({ num: info.num || 0, id: info.id })}
          >
            修改
          </Button>
        </div>
        <div>
          <Button onClick={closeFu}>返回</Button>
        </div>
      </div>

      <div className="A1tableBox">
        <MyTable
          yHeight={680}
          list={list}
          columnsTemp={A1tableClook}
          pagingInfo={false}
        />
      </div>
      {editInfo.id ? (
        <A1aEdit
          editInfo={editInfo}
          closeFu={() => setEditInfo({ num: 0, id: 0 })}
          upTableFu={(val) => {
            getInfoFu();
            upOneTableFu(val);
          }}
        />
      ) : null}
    </div>
  );
}

const MemoA1add = React.memo(A1add);

export default MemoA1add;
