import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import styles from "./index.module.scss";
import { Button, Input } from "antd";
import { useDispatch, useSelector } from "react-redux";
import A6Qadd from "./A6Qadd";
import { A6QInfoType } from "./data";
import A6Qtopic from "./A6Qtopic";
import { A6Q_APIdel, A6Q_APIgetList } from "@/store/action/A6_1ques";
import MyTable from "@/components/MyTable";
import { RootState } from "@/store";
import { A6QtableC } from "@/utils/tableData";
import { A6QtableType } from "@/types";
import MyPopconfirm from "@/components/MyPopconfirm";
import { MessageFu } from "@/utils/message";
import A6QInfo from "./A6QInfo";

function A6_1ques() {
  const dispatch = useDispatch();

  const [fromData, setFromData] = useState({
    pageNum: 1,
    pageSize: 10,
    searchKey: "",
  });

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

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

  const [inputKey, setInputKey] = useState(1);

  // 标题的输入
  const timeRef = useRef(-1);
  const fromKeyChangeFu = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>, key: "searchKey") => {
      clearTimeout(timeRef.current);
      timeRef.current = window.setTimeout(() => {
        setFromData({ ...fromData, [key]: e.target.value, pageNum: 1 });
      }, 500);
    },
    [fromData]
  );

  // 点击重置
  const resetSelectFu = useCallback(() => {
    setInputKey(Date.now());
    setFromData({
      pageNum: 1,
      pageSize: 10,
      searchKey: "",
    });
  }, []);

  // 点击新增和编辑/查看详情
  const [info, setInfo] = useState<A6QInfoType>({
    id: 0,
    txt: "",
    title: "",
  });

  // 从仓库获取列表数据
  const tableInfo = useSelector((state: RootState) => state.A6_1ques.tableInfo);

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

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: "操作",
        render: (item: A6QtableType) => (
          <>
          {/* 待完善 - 暂时隐藏 */}
            {/* <Button
              size="small"
              type="text"
              onClick={() => setInfo({ id: item.id, txt: "查看" })}
            >
              查看
            </Button> */}
            <Button
              size="small"
              type="text"
              onClick={() => setInfo({ id: item.id, txt: "编辑" })}
            >
              编辑
            </Button>
            <Button
              size="small"
              type="text"
              onClick={() =>
                setInfo({ id: item.id, txt: "题目管理", title: item.name })
              }
            >
              题目管理
            </Button>
            <MyPopconfirm txtK="删除" onConfirm={() => delTableFu(item.id)} />
          </>
        ),
      },
    ];
  }, [delTableFu]);

  return (
    <div className={styles.A6_1ques}>
      <div className="pageTitle">
        问卷管理 {info.txt ? ` - ${info.txt}` : ""}
      </div>

      {/* 顶部筛选 */}
      <div className="A6_1top">
        <div>
          <span>搜索项：</span>
          <Input
            key={inputKey}
            maxLength={10}
            showCount
            style={{ width: 300 }}
            placeholder="请输入标题"
            allowClear
            onChange={(e) => fromKeyChangeFu(e, "searchKey")}
          />
        </div>
        <div>
          <Button onClick={resetSelectFu}>重置</Button>
          &emsp;&emsp;
          <Button
            type="primary"
            onClick={() => setInfo({ id: -1, txt: "新增" })}
          >
            新增
          </Button>
        </div>
      </div>

      {/* 表格主体 */}
      <div className="A6_1tableBox">
        <MyTable
          yHeight={625}
          list={tableInfo.list}
          columnsTemp={A6QtableC}
          lastBtn={tableLastBtn}
          pageNum={fromData.pageNum}
          pageSize={fromData.pageSize}
          total={tableInfo.total}
          onChange={(pageNum, pageSize) =>
            setFromData({ ...fromData, pageNum, pageSize })
          }
        />
      </div>

      {/* 点击新增/编辑出来的页面 */}
      {["编辑", "新增"].includes(info.txt) ? (
        <A6Qadd
          sInfo={info}
          closeFu={() => setInfo({ id: 0, txt: "" })}
          addTableFu={resetSelectFu}
          editTableFu={getListFu}
        />
      ) : null}

      {/* 查看 */}
      {info.txt === "查看" ? (
        <A6QInfo sId={info.id} closeFu={() => setInfo({ id: 0, txt: "" })} />
      ) : null}

      {/* 题目管理 */}
      {info.txt === "题目管理" ? (
        <A6Qtopic
          sId={info.id}
          fTitle={info.title}
          closeFu={() => {
            getListFu();
            setInfo({ id: 0, txt: "", title: "" });
          }}
        />
      ) : null}
    </div>
  );
}

const MemoA6_1ques = React.memo(A6_1ques);

export default MemoA6_1ques;
