import React, { useCallback, useEffect, useMemo, useState } from "react";
import styles from "./index.module.scss";
import MyTable from "@/components/MyTable";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import { B1_APIdel, B1_APIgetList } from "@/store/action/B1orderz";
import { B1tableType } from "@/types";
import { Button } from "antd";
import MyPopconfirm from "@/components/MyPopconfirm";
import { MessageFu } from "@/utils/message";
import { B1tableC } from "@/utils/tableData";
import B1look from "./B1look";
function B1orderz() {
  const dispatch = useDispatch();

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

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

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

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

  const tableInfo = useSelector((state: RootState) => state.B1orderz.tableInfo);

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: "操作",
        render: (item: B1tableType) => (
          <>
            <Button size="small" type="text" onClick={() => setLookInfo(item)}>
              查看
            </Button>
            <MyPopconfirm txtK="删除" onConfirm={() => delTableFu(item.id)} />
          </>
        ),
      },
    ];
  }, [delTableFu]);

  // 点击查看
  const [lookInfo, setLookInfo] = useState({} as B1tableType);

  return (
    <div className={styles.B1orderz}>
      <div className="pageTitle">展馆预约</div>
      <MyTable
        yHeight={702}
        list={tableInfo.list}
        columnsTemp={B1tableC}
        lastBtn={tableLastBtn}
        pageNum={fromData.pageNum}
        pageSize={fromData.pageSize}
        total={tableInfo.total}
        onChange={(pageNum, pageSize) =>
          setFromData({ ...fromData, pageNum, pageSize })
        }
      />

      {lookInfo.id ? (
        <B1look
          lookInfo={lookInfo}
          closeFu={() => setLookInfo({} as B1tableType)}
        />
      ) : null}
    </div>
  );
}

const MemoB1orderz = React.memo(B1orderz);

export default MemoB1orderz;
