import {forwardRef, memo, useState} from "react";
import {ModalConfigPanel} from "../../ModalManage/components/ModalConfigPanel";
import {Button, Modal} from "antd";
import useMount from "../../../hooks/useMount";
import {columnsFactory} from "../../../../utils/columnsFactory";
/** 表头信息*/
const configColumns = [
  {
    title: '角色',
    dataIndex: 'role',
  },
  {
    title: '名称',
    dataIndex: 'name',
    fieldProps: {
      allowClear:false,
    },
  },
  {
    title: '允许创建版本',
    dataIndex: 'allowAdd',
    valueType: 'switch',
  },
  {
    title: '允许查看',
    dataIndex: 'allowDetail',
    valueType: 'switch',
  },
  {
    title: '允许发布',
    dataIndex: 'allowPublish',
    valueType: 'switch',
  },
];

const initialValue = [{id:1,role:"123",name:"123",allowAdd:false,allowDetail:false,allowPublish:false}]

const component = forwardRef(({
  open,
  values,
  onCancel,
  onFinish,
},ref)=>{
  const [columns, setColumns]=useState([]);
  /** 初始渲染的钩子 */
  useMount(
    ()=>{
      // 格式化表头
      setColumns(
        columnsFactory({
          dataSource: configColumns,
          onEditRow:()=>{},
          onDelete:({id})=>{}
        })
      )
    },
    ()=>{}
  )
  return (
    <Modal
      width={1200}
      title="授权管理"
      open={open}
      footer={null}
      maskClosable={false}
      destroyOnClose
      onCancel={onCancel}
    >
      <ModalConfigPanel
        ref={ref}
        style={{height:500}}
        values={initialValue}
        columns={columns}
        editable={{
          type: 'multiple',
        }}
        toolBarRender={()=>[<Button type='primary'>+ 添加</Button>]}
      />
    </Modal>
  )
})

export const AuthorizationPanel = memo(component)