import React, { useCallback, useEffect, useMemo, useState } from "react";
import styles from "./index.module.scss";
import { Button } from "antd";
import MyTable from "@/components/MyTable";
import {
  A7_APIgetListByTheme,
  A7_APIthemeDel,
  A7_APIthemeSort,
} from "@/store/action/A7school";
import { A7tableCtheme } from "@/utils/tableData";
import MyPopconfirm from "@/components/MyPopconfirm";
import { MessageFu } from "@/utils/message";
import A7tEdit from "./A7tEdit";

export type ListType = {
  id: number;
  name: string;
};

type Props = {
  closeFu: () => void;
};

function A7theme({ closeFu }: Props) {
  const getListFu = useCallback(async () => {
    const res = await A7_APIgetListByTheme();
    if (res.code === 0) {
      setList(res.data);
    }
  }, []);

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

  const [list, setList] = useState<ListType[]>([]);

  // 点击删除
  const delTableFu = useCallback(
    async (id: number) => {
      const res = await A7_APIthemeDel(id);
      if (res.code === 0) {
        MessageFu.success("删除成功!");
        getListFu();
      }
    },
    [getListFu]
  );

  // 点击上移和下移动
  const moveTableFu = useCallback(
    async (id1: number, id2: number) => {
      const res = await A7_APIthemeSort(id1, id2);
      if (res.code === 0) getListFu();
    },
    [getListFu]
  );

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: "操作",
        render: (item: ListType, _: any, index: number) => (
          <>
            <Button
              size="small"
              type="text"
              onClick={() => moveTableFu(item.id, list[index - 1].id)}
              disabled={index === 0}
            >
              上移
            </Button>
            <Button
              size="small"
              type="text"
              onClick={() => moveTableFu(item.id, list[index + 1].id)}
              disabled={index === list.length - 1}
            >
              下移
            </Button>
            <Button
              size="small"
              type="text"
              onClick={() => setEditInfo({ id: item.id, name: item.name })}
            >
              编辑
            </Button>
            <MyPopconfirm txtK="删除" onConfirm={() => delTableFu(item.id)} />
          </>
        ),
      },
    ];
  }, [delTableFu, list, moveTableFu]);

  // 点击新增
  const [editInfo, setEditInfo] = useState({ id: 0, name: "" });

  return (
    <div className={styles.A7theme}>
      <div className="A7tBack">
        <Button
          type="primary"
          onClick={() => {
            if (list.length >= 20) {
              return MessageFu.warning("最多20个主题!");
            }
            setEditInfo({ id: -1, name: "" });
          }}
        >
          新增
        </Button>
        &emsp;
        <Button onClick={closeFu}>返回</Button>
      </div>
      <MyTable
        yHeight={680}
        list={list}
        lastBtn={tableLastBtn}
        columnsTemp={A7tableCtheme}
        pagingInfo={false}
      />

      {editInfo.id ? (
        <A7tEdit
          editInfo={editInfo}
          upTableFu={() => getListFu()}
          closeFu={() => setEditInfo({ id: 0, name: "" })}
        />
      ) : null}
    </div>
  );
}

const MemoA7theme = React.memo(A7theme);

export default MemoA7theme;
