import React, { useCallback, useEffect, useMemo, useState } from "react";
import styles from "./index.module.scss";
import { useDispatch, useSelector } from "react-redux";
import { A2_APIdelFile, A2_APIgetListFile } from "@/store/action/A2Dict";
import { Button, Popconfirm, Table } from "antd";
import { RootState } from "@/store";
import { A2Tab2Type } from "@/types/api/A2Dict";
import A2Tab2Add from "./A2Tab2Add";
import { MessageFu } from "@/utils/message";
function A2Tab2() {
  const dispatch = useDispatch();

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

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

  const tableList = useSelector((state: RootState) => state.A2Dict.A2Tab2Arr);

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

  const columns = useMemo(() => {
    return [
      {
        title: "文件名称",
        dataIndex: "name",
      },
      {
        title: "文件说明",
        render: (item: A2Tab2Type) =>
          item.description ? (
            item.description.length >= 30 ? (
              <span style={{ cursor: "pointer" }} title={item.description}>
                {item.description.substring(0, 30) + "..."}
              </span>
            ) : (
              item.description
            )
          ) : (
            "（空）"
          ),
      },
      {
        title: "责任部门",
        render: (item: A2Tab2Type) =>
          item.deptName ? item.deptName : "（空）",
      },
      {
        title: "所属阶段",
        render: (item: A2Tab2Type) =>
          item.stageName ? item.stageName : "（空）",
      },
      {
        title: "操作",
        render: (item: A2Tab2Type) => (
          <>
            <Button size="small" type="text" onClick={() => setAddInfo(item)}>
              编辑
            </Button>
            {item.name !== "其它" ? (
              <Popconfirm
                title="删除后无法恢复，是否删除?"
                okText="删除"
                cancelText="取消"
                onConfirm={() => delById(item.id)}
                okButtonProps={{ loading: false }}
              >
                <Button size="small" type="text" danger>
                  删除
                </Button>
              </Popconfirm>
            ) : null}
          </>
        ),
      },
    ];
  }, [delById]);

  // 新增和编辑的 数据
  const [addInfo, setAddInfo] = useState({} as A2Tab2Type);

  return (
    <div className={styles.A2Tab2}>
      <div className="A2Tab2AddBtnClick">
        <Button
          type="primary"
          onClick={() => setAddInfo({ id: -1 } as A2Tab2Type)}
        >
          新增
        </Button>
      </div>

      <Table
        scroll={{ y: 685 }}
        dataSource={tableList}
        columns={columns}
        rowKey="id"
        pagination={false}
      />

      {addInfo.id ? (
        <A2Tab2Add
          info={addInfo}
          closeFu={() => setAddInfo({} as A2Tab2Type)}
          addFu={() => getListFu()}
        />
      ) : null}
    </div>
  );
}

const MemoA2Tab2 = React.memo(A2Tab2);

export default MemoA2Tab2;
