/**
 * 接口管理新建弹框
 * 
 */
import { postBusinessImageCreateBusinessImage } from '@/services/resource/BusinessImage';
import { ModalForm, ProForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Button, Form, message } from 'antd';
import { postInterfaces, postTestDevice } from '@/services/alarm/Interfaces';
import { proFormSmallItemStyleProps, proFormSmallModelWidth } from '../../../../../config/defaultForm';
import React, { useState } from 'react';
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.UpdateInterfacesParams>;

export type CreateFormProps = {
  createModalOpen: boolean;
  handleModal: () => void;
  values: Partial<API.UpdateInterfacesParams>;
  reload: any;
};
const CreateForm: React.FC<CreateFormProps> = (props) => {
  const intl = useIntl();
  const [form] = Form.useForm<API.UpdateInterfacesParams>();
  const [loading, setLoading] = useState<boolean>(false);
  const connection = async () => {
    setLoading(true);
    console.log(form.getFieldsValue());
    postTestDevice({
      device_ip: form.getFieldsValue().device_ip
    })
      .then((res) => {
        // message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '成功' }));
        // props.reload();
        console.log(res);
        if(res.success) {
          message.success(res.msg);
        }
        setLoading(false);
      })
      .catch(() => {
        message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
      });
    // setTimeout(() => {
    //   setLoading(false);
    // }, 6000);
  };

  return (
    <ModalForm<API.UpdateInterfacesParams>
      width={proFormSmallModelWidth}
      title={intl.formatMessage({
        id: 'device.interface_manage.table.list.addPic',
        defaultMessage: '新建图像获取接口',
      })}
      open={props.createModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          setLoading(false)
          props.handleModal()
        },
        okText: intl.formatMessage({ id: 'common.okText', defaultMessage: '确认' }),
        cancelText: intl.formatMessage({ id: 'common.cancelText', defaultMessage: '取消' }),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        console.log(values);
        postInterfaces(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="device_name"
          label={
            <FormattedMessage id="device.interface_manage.table.list.name" defaultMessage="接口名称" />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '请输入',
          })}${intl.formatMessage({
            id: 'device.interface_manage.table.list.name',
            defaultMessage: '接口名称',
          })}`}
          required={true}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="device.interface_manage.table.rule.required.name"
                  defaultMessage="接口名称为必填项"
                />
              ),
            },
          ]}
        />
        <ProFormText
          width={proFormSmallItemStyleProps.width}
          name="device_api"
          label={
            <FormattedMessage id="device.interface_manage.table.list.address" defaultMessage="接口地址" />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '请输入',
          })}${intl.formatMessage({
            id: 'device.interface_manage.table.list.address',
            defaultMessage: '接口地址',
          })}`}
          required={true}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="device.interface_manage.table.rule.required.address"
                  defaultMessage="接口地址为必填项"
                />
              ),
            },
          ]}
        />
        <ProFormText
          width={proFormSmallItemStyleProps.width - 96}
          name="device_ip"
          label={
            <FormattedMessage id="device.interface_manage.table.list.ip" defaultMessage="IP地址" />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '请输入',
          })}${intl.formatMessage({
            id: 'device.interface_manage.table.list.ip',
            defaultMessage: 'IP地址',
          })}`}
          required={true}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="device.interface_manage.table.rule.required.ip"
                  defaultMessage="IP地址为必填项"
                />
              ),
            },
          ]}
          addonAfter={
            <Button 
              style={{ width:86,height:32,border:'1px solid #081FA8',borderRadius:4,fontSize: 14,color:'#081FA8' }} 
              loading={loading} 
              onClick={() => connection()}>
              { loading ? '' : '连接测试'}
            </Button>
          }
        />
        <ProFormTextArea
          width={proFormSmallItemStyleProps.width}
          name="note"
          label={
            <FormattedMessage id="device.interface_manage.table.list.remark" defaultMessage="备注" />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '请输入',
          })}${intl.formatMessage({
            id: 'device.interface_manage.table.list.remark',
            defaultMessage: '备注',
          })}`}
          required={false}
        />
      </ProForm.Group>
    </ModalForm>
  );
};
export default CreateForm;
