import React, { useEffect, useCallback } from "react";
import { Layout, Card, Select, Radio, Button, Modal } from "antd";
import { useData, useActions, useCommit } from "@ttk/app-loader";
import Box from "@/components/floatbox";
import Pagination from "./components/Pagination";
import PageHeader from "./components/PageHeader";
import TableArea from "./components/TableArea";
import ModalForm from "./components/ModalForm";
import Role from "./role/role";
import User from "./user/user";
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 { showRole } = useData([props, "showModal"]).toJS();
  const { showUser } = useData([props, "showModal"]).toJS();
  const close = useCallback(() => {
    commit([props, "showModal"], { type: "visible", data: false });
    commit([props, "showModal"], { type: "showRole", data: false });
    commit([props, "showModal"], { type: "showUser", 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={close}
        onCancel={close}
        footer={null}
        width="920px"
        className="modal-style"
      >
        <ModalForm {...props} />
      </Modal>
      <Modal
        title="角色分配"
        visible={showRole}
        onOk={close}
        onCancel={close}
        footer={null}
        width="920px"
        className="modal-style"
      >
        <Role {...props} />
      </Modal>
      <Modal
        title="用户分配"
        visible={showUser}
        onOk={close}
        onCancel={close}
        footer={null}
        width="920px"
        className="modal-style"
      >
        <User {...props} />
      </Modal>
    </Fragment>
  );
}
