import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { useDispatch, useSelector } from "react-redux";
import { Z0_APIdel, Z0_APIgetList, Z0_APIsort } from "@/store/action/Z0column";
import MyTable from "@/components/MyTable";
import { RootState } from "@/store";
import { Z0tableC } from "@/utils/tableData";
import { Button } from "antd";
import { Z0tableType } from "@/types";
import MyPopconfirm from "@/components/MyPopconfirm";
import { Z0EditInfoType, Z0tableList } from "./data";
import { MessageFu } from "@/utils/message";
import Z0edit from "./Z0edit";
function Z0column() {
  const dispatch = useDispatch();

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

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

  const { dynamic, goods, activity } = useSelector(
    (state: RootState) => state.Z0column.tableInfo
  );

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

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

  // 编辑
  const [editInfo, setEditInfo] = useState({} as Z0EditInfoType);

  const tableLastBtn = useCallback(
    (type: string, list: Z0tableType[], tit: string) => {
      return [
        {
          title: "操作",
          render: (item: Z0tableType, _: any, index: number) =>
            item.name === "其他" ? (
              "-"
            ) : (
              <>
                <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 - 2}
                >
                  下移
                </Button>
                <Button
                  size="small"
                  type="text"
                  onClick={() =>
                    setEditInfo({
                      id: item.id,
                      name: item.name,
                      rtf: item.rtf,
                      type,
                      tit,
                    })
                  }
                >
                  编辑
                </Button>
                <MyPopconfirm
                  txtK="删除"
                  onConfirm={() => delTableFu(item.id)}
                />
              </>
            ),
        },
      ];
    },
    [delTableFu, moveTableFu]
  );

  // 整理表格数据
  const tableListRes = useCallback(
    (id: number) => {
      const objTemp = {
        1: dynamic,
        2: goods,
        3: activity,
      };
      return Reflect.get(objTemp, id) || ([] as Z0tableType[]);
    },
    [activity, dynamic, goods]
  );

  return (
    <div className={styles.Z0column}>
      <div className="pageTitle">栏目管理</div>

      {Z0tableList.map((v) => (
        <div key={v.id}>
          <div className="Z0tit">
            {v.name}
            <Button
              type="primary"
              onClick={() =>
                setEditInfo({
                  id: -1,
                  tit: v.name,
                  type: v.type,
                } as Z0EditInfoType)
              }
            >
              新增
            </Button>
          </div>
          <MyTable
            list={tableListRes(v.id)}
            columnsTemp={Z0tableC}
            lastBtn={tableLastBtn(v.type, tableListRes(v.id), v.name)}
            pagingInfo={false}
          />
        </div>
      ))}

      {/* 新增和编辑 */}
      {editInfo.id ? (
        <Z0edit
          editInfo={editInfo}
          closeFu={() => setEditInfo({} as Z0EditInfoType)}
          upTableFu={getListFu}
        />
      ) : null}
    </div>
  );
}

const MemoZ0column = React.memo(Z0column);

export default MemoZ0column;
