import React, { useCallback, useEffect, useMemo, useState } from "react";
import styles from "./index.module.scss";
import { Button } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { A1_APIdel, A1_APIgetList, A1_APIsort } from "@/store/action/A1video";
import { RootState } from "@/store";
import { A1TableType } from "@/types";
import { MessageFu } from "@/utils/message";
import A1add from "../A1add";
import MyTable from "@/components/MyTable";
import { A1tableCFu } from "@/utils/tableData";
import MyPopconfirm from "@/components/MyPopconfirm";

type Props = {
  type: "video" | "poster";
};

function A1main({ type }: Props) {
  const dispatch = useDispatch();

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

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

  const tableList = useSelector((state: RootState) => {
    return type === "video"
      ? state.A1video.tableList
      : state.A2poster.tableList;
  });

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

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

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

  // 点击新增和编辑
  const [addId, setAddId] = useState(0);

  return (
    <div className={styles.A1main}>
      <div className="pageTitle">
        {type === "video" ? "视频" : "海报"}管理
        {addId ? (addId > 0 ? " - 编辑" : " - 新增") : ""}
      </div>
      <div className="A1addBtn">
        <Button
          type="primary"
          onClick={() => {
            if (tableList.length >= 20)
              return MessageFu.warning("最多新增20条数据!");
            setAddId(-1);
          }}
        >
          新增
        </Button>
      </div>
      {/* 表格 */}
      <div className="A1main">
        <MyTable
          yHeight={680}
          list={tableList}
          columnsTemp={A1tableCFu(type)}
          pagingInfo={false}
          lastBtn={tableLastBtn}
        />
      </div>
      {/* 点击新增和编辑 */}
      {addId ? (
        <A1add
          addId={addId}
          closeFu={() => setAddId(0)}
          addTableFu={() => getListFu()}
          type={type}
        />
      ) : null}
    </div>
  );
}

const MemoA1main = React.memo(A1main);

export default MemoA1main;
