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 Gwlb from "./gwlb/gwlb";
import Yyqx from "./yyqx/yyqx";
import Fpqx from "./fpqx/fpqx";
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 { showGwlb } = useData([props, "showModal"]).toJS();
  const { showYyqx } = useData([props, "showModal"]).toJS();
  const { showFpqx } = useData([props, "showModal"]).toJS();
  const close = useCallback(() => {
    commit([props, "showModal"], { type: "visible", data: false });
    commit([props, "showModal"], { type: "showGwlb", data: false });
    commit([props, "showModal"], { type: "showYyqx", data: false });
    commit([props, "showModal"], { type: "showFpqx", 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="500px"
        className="modal-style"
      >
        <ModalForm {...props} />
      </Modal>
      <Modal
        title="岗位列表"
        visible={showGwlb}
        onOk={close}
        onCancel={close}
        footer={null}
        width="920px"
        className="modal-style"
      >
        <Gwlb {...props} />
      </Modal>
      <Modal
        title="已有菜单权限"
        visible={showYyqx}
        onOk={close}
        onCancel={close}
        footer={null}
        width="400PX"
        className="modal-style"
      >
        <Yyqx {...props} />
      </Modal>
      <Modal
        title="分配菜单权限"
        visible={showFpqx}
        onOk={close}
        onCancel={close}
        footer={null}
        width="400PX"
        className="modal-style"
      >
        <Fpqx {...props} />
      </Modal>
    </Fragment>
  );
}
