import { putProjectUpdateProject } from '@/services/project/Project';
import {
  ModalForm,
  ProForm,
  ProFormCheckbox,
  ProFormDateTimePicker,
  ProFormSwitch,
  ProFormText,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message } from 'antd';
import { proFormSmallItemStyleProps, proFormSmallModelWidth } from '../../../../../config/defaultForm';
import React from 'react';
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.Project>;

export type UpdateFormProps = {
  updateModalOpen: boolean;
  handleModal: () => void;
  values: Partial<API.Project>;
  reload: any;
};



const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const intl = useIntl();
  const [form] = Form.useForm<API.Project>();

  return (
    <ModalForm<API.Project>
      width={proFormSmallModelWidth}
      title={intl.formatMessage({
        id: 'contact.contact.table.list.update',
        defaultMessage: '$$$',
      })}
      open={props.updateModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.handleModal(),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        putProjectUpdateProject(values)
          .then(() => {
            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
            props.reload();
          })
          .catch(() => {
            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
          });

        props.handleModal();
        return true;
      }}
    >
      <ProForm.Group>
        {/* <ProFormText
          width={proFormSmallItemStyleProps.width}
          name="id"
          label="id"
          disabled={true}
          initialValue={props.values.id}
        /> */}
        <ProFormText
          width={proFormSmallItemStyleProps.width}
          name="name"
          label={<FormattedMessage id="contact.contact.table.list.name" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'contact.contact.table.list.name',
            defaultMessage: '$$$',
          })}`}
          required={true}
          initialValue={props.values.name}
          disabled={false}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="contact.contact.table.rule.required.name"
                  defaultMessage="name is required"
                />
              ),
            },
          ]}
        />
        <ProFormText
          width={proFormSmallItemStyleProps.width}
          name="code"
          label={<FormattedMessage id="contact.contact.table.list.phone" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'contact.contact.table.list.phone',
            defaultMessage: '$$$',
          })}`}
          required={true}
          initialValue={props.values.code}
          disabled={false}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="project.project.table.rule.required.code"
                  defaultMessage="code is required"
                />
              ),
            },
          ]}
        />
        <ProFormText
          width={proFormSmallItemStyleProps.width}
          name="info"
          label={<FormattedMessage id="contact.contact.table.list.mail" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'contact.contact.table.list.mail',
            defaultMessage: '$$$',
          })}`}
          required={true}
          initialValue={props.values.info}
          disabled={false}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="project.project.table.rule.required.info"
                  defaultMessage="info is required"
                />
              ),
            },
          ]}
        />

        {/* <ProFormCheckbox.Group
          width={proFormSmallItemStyleProps.width}
          name="isEnable"
          layout="vertical"
          label={<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />}
          options={[{label: '启用此项目', value: true}]}
        /> */}
        {/* <div style={{ width: formItemStyleProps.width, paddingBottom: 10}}>
          <div>
            {<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />}
          </div>
          <ProFormCheckbox noStyle name="isEnable"></ProFormCheckbox>
          启用此项目
        </div> */}
        <ProFormText
          width={proFormSmallItemStyleProps.width}
          name="remark"
          label={<FormattedMessage id="contact.contact.table.list.WeChatID" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'contact.contact.table.list.WeChatID',
            defaultMessage: '$$$',
          })}`}
          required={false}
          initialValue={props.values.remark}
          disabled={false}
        />
        <ProFormText
          width={proFormSmallItemStyleProps.width}
          name="remark"
          label={<FormattedMessage id="project.project.table.list.remark" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'project.project.table.list.remark',
            defaultMessage: '$$$',
          })}`}
          required={false}
          initialValue={props.values.remark}
          disabled={false}
        />
                {/* <ProFormSwitch
          width={proFormSmallItemStyleProps.width}
          name="isEnable"
          label={<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />}
          initialValue={props.values.isEnable}
          disabled={false}
        /> */}
        {/* <ProFormDateTimePicker
          width={proFormSmallItemStyleProps.width}
          name="createTime"
          label={
            <FormattedMessage id="project.project.table.list.createTime" defaultMessage="$$$" />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'project.project.table.list.createTime',
            defaultMessage: '$$$',
          })}`}
          required={false}
          initialValue={props.values.createTime}
          disabled={true}
        />
        <ProFormDateTimePicker
          width={proFormSmallItemStyleProps.width}
          name="updateTime"
          label={
            <FormattedMessage id="project.project.table.list.updateTime" defaultMessage="$$$" />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'project.project.table.list.updateTime',
            defaultMessage: '$$$',
          })}`}
          required={false}
          initialValue={props.values.updateTime}
          disabled={true}
        /> */}
      </ProForm.Group>
    </ModalForm>
  );
};
export default UpdateForm;
