import React, { useState, useEffect } from "react";
import AutoTable from "@/components/AutoTable";
import InitForm from "@/components/InitForm";
import { Container, Box, Typography } from "@mui/material";
import DraggableDialog from "@/components/DraggableDialog";

function Organization() {
  return (
    <Container maxWidth="xxl">
      <Box sx={{ mb: 3 }} mt={0}>
        <Typography variant="h5">组织管理</Typography>
      </Box>
      <DraggableDialog
      >
        <InitForm
          fields={[
            {
              title: "姓名",
              dataIndex: "userName",
              key: "userId",
              sorter: (a, b) => a.containers - b.containers,
              hideInForm: {
                accountName: { reverse: ["1", "2", "5"] },
                remark: ["3"],
              },
              search: false,
            },
            {
              title: "用户名123",
              dataIndex: "accountName",
              formItemProps: {
                rules: [{ required: false, message: "此项为必填项" }],
              },
              hideInForm: false,
              key: "accountName",
              valueType: "select",
              mode: "tags",
              options: [{ label: "123", value: "123" }],
            },
            { title: "基础信息", valueType: "split", key: "基础信息" },
            { title: "额外信息", valueType: "split", key: "额外信息" },
            {
              title: "联系电话",
              dataIndex: "telephone",
              formItemProps: {
                rules: [{ required: false, message: "此项为必填项" }],
              },
              search: false,
              key: "telephone",
            },
            {
              title: "邮箱",
              dataIndex: "mailNo",
              formItemProps: {
                rules: [{ required: false, message: "此项为必填项" }],
              },
              search: false,
              key: "mailNo",
            },
            {
              title: "备注",
              dataIndex: "remark",
              valueType: "editor",
              search: false,
              colProps: { span: 24 },
              initialValue: "<p>Hello<b>World!</b></p>",
              key: "remark",
            },
            {
              title: "上传样式-图片",
              dataIndex: "uploadImage",
              key: "uploadImage",
              valueType: "uploadImage",
              fieldProps: { limit: 2 },
              formItemProps: {
                rules: [{ required: false, message: "此项为必填项" }],
              },
            },
            { title: "操作", valueType: "option", width: 150, key: "操作" },
          ]}
        ></InitForm>
      </DraggableDialog>
      <Box boxShadow={"0 0 18px #f0f0f0"} borderRadius={2}>
        <AutoTable
          columns={[
            {
              title: "姓名",
              dataIndex: "userName",
              key: "userId",
              sorter: (a, b) => a.containers - b.containers,
              hideInForm: {
                accountName: { reverse: ["1", "2", "5"] },
                remark: ["3"],
              },
              search: false,
            },
            {
              title: "用户名123",
              dataIndex: "accountName",
              formItemProps: {
                rules: [{ required: false, message: "此项为必填项" }],
              },
              hideInForm: false,
              key: "accountName",
              valueType: "select",
              mode: "tags",
              options: [{ label: "123", value: "123" }],
            },
            { title: "基础信息", valueType: "split", key: "基础信息" },
            { title: "额外信息", valueType: "split", key: "额外信息" },
            {
              title: "联系电话",
              dataIndex: "telephone",
              formItemProps: {
                rules: [{ required: false, message: "此项为必填项" }],
              },
              search: false,
              key: "telephone",
            },
            {
              title: "邮箱",
              dataIndex: "mailNo",
              formItemProps: {
                rules: [{ required: false, message: "此项为必填项" }],
              },
              search: false,
              key: "mailNo",
            },
            {
              title: "备注",
              dataIndex: "remark",
              valueType: "editor",
              search: false,
              colProps: { span: 24 },
              initialValue: "<p>Hello<b>World!</b></p>",
              key: "remark",
            },
            {
              title: "上传样式-图片",
              dataIndex: "uploadImage",
              key: "uploadImage",
              valueType: "uploadImage",
              fieldProps: { limit: 2 },
              formItemProps: {
                rules: [{ required: false, message: "此项为必填项" }],
              },
            },
            { title: "操作", valueType: "option", width: 150, key: "操作" },
          ]}
          dataSource={[
            {
              userName: "123",
            },
          ]}
        ></AutoTable>
      </Box>
    </Container>
  );
}

export default Organization;