import {ModalForm, ProForm, ProFormDependency} from '@ant-design/pro-components';
import {ProFormText} from '@ant-design/pro-components';
import {ProFormSwitch} from '@ant-design/pro-components';
import {ProFormSelect, ProFormDigit, ProFormRadio} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import {postDepartmentCreateDepartment} from "@/services/system/Department";
// import {systemDepartmentGetDepartmentPkIdSelectList} from "@/services/system/system";
import React, {useEffect, useState} from 'react';
import {App, Button, Form, Modal, message} from 'antd';
// 表单宽度 804 两列
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.Department>;

export type CreateFormProps = {
  createModalOpen: boolean;
  handleModal: () => void;
  values: Partial<API.Department>;
  reload: any;
};
const CreateForm: React.FC<CreateFormProps> = (props) => {

  const intl = useIntl();
  const [form] = Form.useForm<API.Department>();
  // const {message} = App.useApp()
  const [parentId, setParentId] = useState<number>(0);
  const [parentSelectOptions, setParentSelectOptions] = useState<any[]>([{label: '根节点', value: 0}]);

  useEffect(()=>{
    if (props.values.id !== undefined && props.values.id !== 0) {
      setParentId(props.values.id as number)
      setParentSelectOptions([{label: props.values.name, value: props.values.id}])
    } else {
      setParentId(0)
      setParentSelectOptions([{label: '根节点', value: 0}])
    }
  }, [props.createModalOpen])

  return (
    <ModalForm<API.Department>
      width={proFormModelWidth}
      title={intl.formatMessage({
        id: props.values.id ? 'system.department.table.list.create_son_department': 'system.department.table.list.create',
        defaultMessage: '$$$',
      })}
      open={props.createModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.handleModal(),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        console.log(values)
        postDepartmentCreateDepartment(values).then(() => {
          message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
          props.reload()
        }).catch(() => {
          message.error(intl.formatMessage({id: 'common.error', defaultMessage: '$$$'}))
        })
        props.handleModal();
        return true;
      }}
    >

      <ProForm.Group>
        <ProFormSelect width={proFormItemStyleProps.column2Width} name="parentId"
                     disabled={true}
                     initialValue={parentId}
                       options={parentSelectOptions}
                       request={async () => parentSelectOptions}
           label={<FormattedMessage id="system.department.table.list.parentId" defaultMessage="$$$"/>}
           placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.department.table.list.parentId', defaultMessage: '$$$'})}`}
        />
        <ProFormDigit width={proFormItemStyleProps.column2Width} fieldProps={{precision: 0}} name="sort"
                      label={<FormattedMessage id="system.department.table.list.sort" defaultMessage="$$$"/>}
                      placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.department.table.list.sort', defaultMessage: '$$$'})}`}
                      initialValue={1}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText width={proFormItemStyleProps.column2Width} name="name"
                     label={<FormattedMessage id="system.department.table.list.name" defaultMessage="$$$"/>}
                     placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.department.table.list.name', defaultMessage: '$$$'})}`}
                     required={true}
                     rules={[
                       {
                         required: true,
                         message: (
                           <FormattedMessage
                             id="system.department.table.rule.required.name"
                             defaultMessage="name is required"
                           />
                         ),
                       },
                     ]}
        />
        <ProFormText width={proFormItemStyleProps.column2Width} name="code"
                     label={<FormattedMessage id="system.department.table.list.code" defaultMessage="$$$"/>}
                     placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.department.table.list.code', defaultMessage: '$$$'})}`}
        />
      </ProForm.Group>
      {/* <ProForm.Group>

        <ProFormDigit width={proFormItemStyleProps.column2Width} fieldProps={{precision: 0}} name="sort"
                      label={<FormattedMessage id="system.department.table.list.sort" defaultMessage="$$$"/>}
                      placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.department.table.list.sort', defaultMessage: '$$$'})}`}
                      initialValue={1}
        />
      </ProForm.Group> */}
      <ProForm.Group>
        <ProFormText width={proFormItemStyleProps.column2Width} name="phone"
                     label={<FormattedMessage id="system.department.table.list.phone" defaultMessage="$$$"/>}
                     placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.department.table.list.phone', defaultMessage: '$$$'})}`}
                     required={false}/>
        <ProFormText width={proFormItemStyleProps.column2Width} name="email"
                     label={<FormattedMessage id="system.department.table.list.email" defaultMessage="$$$"/>}
                     placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.department.table.list.email', defaultMessage: '$$$'})}`}
                     required={false}/>
      </ProForm.Group>
    <ProForm.Group>
        <ProFormText width={proFormItemStyleProps.column2Width} name="remark"
                     label={<FormattedMessage id="system.department.table.list.remark" defaultMessage="$$$"/>}
                     placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.department.table.list.remark', defaultMessage: '$$$'})}`}
                     required={false}/>
        <ProFormSwitch width={proFormItemStyleProps.column2Width} name="status" initialValue={true}
                       label={<FormattedMessage id="system.department.table.list.status" defaultMessage="$$$"/>}
                       required={false}>

        </ProFormSwitch>
    </ProForm.Group>
    </ModalForm>

  )
}
export default CreateForm;
