import { Button, Space, Modal, FormInstance } from "antd";
import { inject, observer } from "mobx-react";
import BTable from "@/components/b_table";
import { useEffect, useState } from "react";
import { Store } from "antd/lib/form/interface";
import React from "react";
import { columns } from "./role_config";
import "./role.less";

const Role = (props: Store) => {
  const { roleStore } = props;
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const formRef = React.useRef<FormInstance>(null);
  const [userId, setId] = useState<Number | null>(null);

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

  const addHandler = () => {};
  return (
    <div className="contentBox">
      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
        <Button type="default" onClick={() => addHandler()}>
          添加角色
        </Button>
        <BTable
          store={roleStore}
          scroll={{ x: "max-content" }}
          columns={columns}
          dataSource={roleStore.list}
        />

        <Modal
          title={!userId ? "添加角色" : "编辑角色"}
          width={800}
          open={isModalOpen}
          afterClose={() => formRef.current?.resetFields()}
          onOk={() => formRef.current?.submit()}
          okText="确定"
          cancelText="取消"
          onCancel={() => {
            setId(null);
            setIsModalOpen(false);
          }}
        ></Modal>
      </Space>
    </div>
  );
};

export default inject("roleStore")(observer(Role));