/**
 * 接口管理新建弹框
 *
 */
import { postInterfaces, postTestDevice } from '@/services/alarm/Interfaces';
import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message } from 'antd';
import React, { useEffect, useState } from 'react';
import {
  proFormSmallItemStyleProps,
  proFormSmallModelWidth,
} from '../../../../../config/defaultForm';
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 [fileType, setFileType] = useState<string>('1');
  const [fileMethod, setFileMethod] = useState<string>('pull');
  const [methodName, setMethodName] = useState<string>('0');
  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);
  };
  const handleChangeFileType = (value: string) => {
    setFileMethod(value);
  };
  const handleChangeFile = (value: string) => {
    setMethodName(value);
  };

  useEffect(() => {
    if (fileMethod === 'upload' && methodName === '2') {
      setFileType(() => {
        return '3';
      });
    } else if (fileMethod === 'pull' && methodName === '1') {
      setFileType(() => {
        return '2';
      });
    } else {
      setFileType(() => {
        return '1';
      });
    }
  }, [methodName, fileMethod]);

  return (
    <ModalForm<API.UpdateInterfacesParams>
      width={proFormSmallModelWidth}
      title={intl.formatMessage({
        id: 'device.interface_manage.table.list.addVideoSource',
        defaultMessage: '新建视频源',
      })}
      open={props.createModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          setLoading(false);
          setFileMethod('pull');
          setMethodName('0');
          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="接口名称为必填项"
                />
              ),
            },
          ]}
        />
        <div style={{ width: proFormSmallItemStyleProps.width }}>
          <div style={{ marginBottom: 8 }}>获取方式</div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <ProFormSelect
              width={250}
              options={[
                {
                  value: 'pull',
                  label: '文件拉取',
                },
                {
                  value: 'upload',
                  label: '文件上传',
                },
              ]}
              onChange={handleChangeFileType}
              initialValue={fileMethod}
              name="fileType"
              // label="获取方式"
            />
            <ProFormSelect
              width={250}
              options={[
                {
                  value: '0',
                  label: 'FTP',
                },
                {
                  value: '1',
                  label: '文件系统',
                },
                {
                  value: '2',
                  label: 'FTP上传',
                },
              ]}
              initialValue={methodName}
              onChange={handleChangeFile}
              name="file"
              // label="获取方式"
            />
          </div>
        </div>
        {/* <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>
          }
        /> */}
        {fileType === '1' && (
          <ProForm.Group>
            <ProFormText
              width={proFormSmallItemStyleProps.width}
              name="device_api"
              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: '接口地址',
              })}`}
              required={true}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.ip"
                      defaultMessage="接口地址为必填项"
                    />
                  ),
                },
              ]}
            />
            <ProFormText
              width={proFormSmallItemStyleProps.width}
              name="device_api"
              label={
                <FormattedMessage
                  id="device.interface_manage.table.list.port"
                  defaultMessage="端口"
                />
              }
              placeholder={`${intl.formatMessage({
                id: 'common.please_input',
                defaultMessage: '请输入',
              })}${intl.formatMessage({
                id: 'device.interface_manage.table.list.port',
                defaultMessage: '端口',
              })}`}
              required={true}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.port"
                      defaultMessage="端口为必填项"
                    />
                  ),
                },
              ]}
            />
            <ProFormText
              width={proFormSmallItemStyleProps.width}
              name="device_api"
              label={
                <FormattedMessage
                  id="device.interface_manage.table.list.loginName"
                  defaultMessage="登录名"
                />
              }
              placeholder={`${intl.formatMessage({
                id: 'common.please_input',
                defaultMessage: '请输入',
              })}${intl.formatMessage({
                id: 'device.interface_manage.table.list.loginName',
                defaultMessage: '登录名',
              })}`}
              required={true}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.loginName"
                      defaultMessage="登录名为必填项"
                    />
                  ),
                },
              ]}
            />
            <ProFormText
              width={proFormSmallItemStyleProps.width}
              name="device_api"
              label={
                <FormattedMessage
                  id="device.interface_manage.table.list.password"
                  defaultMessage="密码"
                />
              }
              placeholder={`${intl.formatMessage({
                id: 'common.please_input',
                defaultMessage: '请输入',
              })}${intl.formatMessage({
                id: 'device.interface_manage.table.list.password',
                defaultMessage: '密码',
              })}`}
              required={true}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.password"
                      defaultMessage="密码为必填项"
                    />
                  ),
                },
              ]}
            />
            <ProFormText
              width={proFormSmallItemStyleProps.width}
              name="device_api"
              label={
                <FormattedMessage
                  id="device.interface_manage.table.list.fileDirectory"
                  defaultMessage="文件目录"
                />
              }
              placeholder={`${intl.formatMessage({
                id: 'common.please_input',
                defaultMessage: '请输入',
              })}${intl.formatMessage({
                id: 'device.interface_manage.table.list.fileDirectory',
                defaultMessage: '文件目录',
              })}`}
              required={true}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.fileDirectory"
                      defaultMessage="文件目录为必填项"
                    />
                  ),
                },
              ]}
            />
          </ProForm.Group>
        )}
        {fileType === '2' && (
          <ProForm.Group>
            <ProFormText
              width={proFormSmallItemStyleProps.width}
              name="device_api"
              label={
                <FormattedMessage
                  id="device.interface_manage.table.list.requestAddress"
                  defaultMessage="请求地址"
                />
              }
              placeholder={`${intl.formatMessage({
                id: 'common.please_input',
                defaultMessage: '请输入',
              })}${intl.formatMessage({
                id: 'device.interface_manage.table.list.requestAddress',
                defaultMessage: '请求地址',
              })}`}
              required={true}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.requestAddress"
                      defaultMessage="请求地址为必填项"
                    />
                  ),
                },
              ]}
            />
            <ProFormText
              width={proFormSmallItemStyleProps.width}
              name="device_api"
              label={
                <FormattedMessage
                  id="device.interface_manage.table.list.requestKey"
                  defaultMessage="请求Key"
                />
              }
              placeholder={`${intl.formatMessage({
                id: 'common.please_input',
                defaultMessage: '请输入',
              })}${intl.formatMessage({
                id: 'device.interface_manage.table.list.requestKey',
                defaultMessage: '请求Key',
              })}`}
              required={true}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.requestKey"
                      defaultMessage="请求Key为必填项"
                    />
                  ),
                },
              ]}
            />
            <ProFormText
              width={proFormSmallItemStyleProps.width}
              name="device_api"
              label={
                <FormattedMessage
                  id="device.interface_manage.table.list.secretKey"
                  defaultMessage="秘钥"
                />
              }
              placeholder={`${intl.formatMessage({
                id: 'common.please_input',
                defaultMessage: '请输入',
              })}${intl.formatMessage({
                id: 'device.interface_manage.table.list.secretKey',
                defaultMessage: '秘钥',
              })}`}
              required={true}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.secretKey"
                      defaultMessage="秘钥为必填项"
                    />
                  ),
                },
              ]}
            />
            <ProFormText
              width={proFormSmallItemStyleProps.width}
              name="device_api"
              label={
                <FormattedMessage
                  id="device.interface_manage.table.list.bucket"
                  defaultMessage="Bucket"
                />
              }
              placeholder={`${intl.formatMessage({
                id: 'common.please_input',
                defaultMessage: '请输入',
              })}${intl.formatMessage({
                id: 'device.interface_manage.table.list.bucket',
                defaultMessage: 'Bucket',
              })}`}
              required={true}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.bucket"
                      defaultMessage="Bucket为必填项"
                    />
                  ),
                },
              ]}
            />
          </ProForm.Group>
        )}
        {fileType === '3' && (
          <ProForm.Group>
            <ProFormText
              width={proFormSmallItemStyleProps.width}
              name="device_api"
              label={
                <FormattedMessage
                  id="device.interface_manage.table.list.Code"
                  defaultMessage="Code"
                />
              }
              placeholder={`${intl.formatMessage({
                id: 'common.please_input',
                defaultMessage: '请输入',
              })}${intl.formatMessage({
                id: 'device.interface_manage.table.list.Code',
                defaultMessage: 'Code',
              })}`}
              disabled
              required={true}
              initialValue={'123'}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.Code"
                      defaultMessage="Code为必填项"
                    />
                  ),
                },
              ]}
            />
            <ProFormText
              width={proFormSmallItemStyleProps.width}
              name="device_api"
              label={
                <FormattedMessage
                  id="device.interface_manage.table.list.port"
                  defaultMessage="端口"
                />
              }
              disabled
              placeholder={`${intl.formatMessage({
                id: 'common.please_input',
                defaultMessage: '请输入',
              })}${intl.formatMessage({
                id: 'device.interface_manage.table.list.port',
                defaultMessage: '端口',
              })}`}
              required={true}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.port"
                      defaultMessage="端口为必填项"
                    />
                  ),
                },
              ]}
            />
            <ProFormText
              width={proFormSmallItemStyleProps.width}
              name="device_api"
              label={
                <FormattedMessage
                  id="device.interface_manage.table.list.loginName"
                  defaultMessage="登录名"
                />
              }
              disabled
              placeholder={`${intl.formatMessage({
                id: 'common.please_input',
                defaultMessage: '请输入',
              })}${intl.formatMessage({
                id: 'device.interface_manage.table.list.loginName',
                defaultMessage: '登录名',
              })}`}
              required={true}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.loginName"
                      defaultMessage="登录名为必填项"
                    />
                  ),
                },
              ]}
            />
            <ProFormText
              width={proFormSmallItemStyleProps.width}
              name="device_api"
              label={
                <FormattedMessage
                  id="device.interface_manage.table.list.password"
                  defaultMessage="密码"
                />
              }
              disabled
              placeholder={`${intl.formatMessage({
                id: 'common.please_input',
                defaultMessage: '请输入',
              })}${intl.formatMessage({
                id: 'device.interface_manage.table.list.password',
                defaultMessage: '密码',
              })}`}
              required={true}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.password"
                      defaultMessage="密码为必填项"
                    />
                  ),
                },
              ]}
            />
            <ProFormText
              width={proFormSmallItemStyleProps.width}
              name="device_api"
              label={
                <FormattedMessage
                  id="device.interface_manage.table.list.fileDirectory"
                  defaultMessage="文件目录"
                />
              }
              disabled
              placeholder={`${intl.formatMessage({
                id: 'common.please_input',
                defaultMessage: '请输入',
              })}${intl.formatMessage({
                id: 'device.interface_manage.table.list.fileDirectory',
                defaultMessage: '文件目录',
              })}`}
              required={true}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.fileDirectory"
                      defaultMessage="文件目录为必填项"
                    />
                  ),
                },
              ]}
            />
          </ProForm.Group>
        )}
        <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;
