import React, { useEffect, useCallback } from "react";
import { Layout, Card, Select, Radio, Button, Modal } from "antd";
import { useData, useActions, useCommit } from "@ttk/app-loader";
import Pagination from "./components/Pagination";
import PageHeader from "./components/PageHeader";
import TableArea from "./components/TableArea";
import ModalForm from "./components/ModalForm";
import Box from "@/components/floatbox";
import "./style.less";
const { Fragment } = React;
export default React.memo(Page);
function Page(props) {
  const commit = useCommit();
  const { visible } = useData([props, "showModal"]).toJS();
  const { isEdit } = useData([props, "showModal"]).toJS();
  const onOk = useCallback(() => {
    commit([props, "showModal"], { type: "visible", data: false });
  });

  const onCancel = useCallback(() => {
    commit([props, "showModal"], { type: "visible", data: false });
  });
  return (
    <Fragment>
      <Box className="box-header" width="100%" height="60">
        <PageHeader {...props} />
      </Box>
      <Box className="box-content" width="100%" height="100%-100px">
        {" "}
        <TableArea {...props} />
      </Box>
      <Box className="box-footer" width="100%" height="40">
        <Pagination {...props} />
      </Box>
      <Modal
        title={isEdit ? "编辑" : "新增"}
        visible={visible}
        onOk={onOk}
        onCancel={onCancel}
        footer={null}
        width="920px"
        className="modal-style"
      >
        <ModalForm {...props} />
      </Modal>
    </Fragment>
  );
}
