import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Button } from "antd";
import MyTable from "@/components/MyTable";
import { useDispatch, useSelector } from "react-redux";
import { C1_APIgetList } from "@/store/action/C1orderset";
import { RootState } from "@/store";
import { C1tableC } from "@/utils/tableData";
import C1setTime from "./C1setTime";
import C1setTxt from "./C1setTxt";
import C1edit from "./C1edit";
function C1orderset() {
  const dispatch = useDispatch();

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

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

  const { list } = useSelector((state: RootState) => state.C1orderset);

  // 设置 不可预约时间
  const [noTime, setNoTime] = useState(false);

  // 设置 预约需知
  const [txt, setTxt] = useState(false);

  // 编辑
  const [edit, setEdit] = useState(false);

  return (
    <div className={styles.C1orderset}>
      <div className="pageTitle">展馆预约设置{edit ? " - 编辑" : null}</div>
      <div className="C1top">
        <Button type="primary" onClick={() => setNoTime(true)}>
          设置不可预约日期
        </Button>
        &emsp;
        <Button type="primary" onClick={() => setTxt(true)}>
          设置预约需知
        </Button>
        &emsp;
        <Button type="primary" onClick={() => setEdit(true)}>
          编辑
        </Button>
      </div>
      <MyTable
        list={list}
        columnsTemp={C1tableC}
        pagingInfo={false}
        isNull="闭馆"
      />

      {/* 不可预约日期 */}
      {noTime ? <C1setTime closeFu={() => setNoTime(false)} /> : null}

      {/* 预约需知 */}
      {txt ? <C1setTxt closeFu={() => setTxt(false)} /> : null}

      {/* 编辑 */}
      {edit ? (
        <C1edit
          list={list}
          closeFu={() => setEdit(false)}
          editTableFu={getListFu}
        />
      ) : null}
    </div>
  );
}

const MemoC1orderset = React.memo(C1orderset);

export default MemoC1orderset;
