/**
 * 接口管理新建弹框
 *
 */
import { postInterfacesUpload,getInterfacesUpload } 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<number>(2);
  const [methodName, setMethodName] = useState<string>('1');
  const handleChangeFileType = async (value: number) => {
    setFileMethod(value);
    // 根据选择的获取方式更新第二个下拉框的值
    if (value === 2) {
      setMethodName('1'); // 设置为初始值 '0'，只展示FTP选项
      form.setFieldsValue({
        operate_mode: '1', // 设置第二个下拉框的值
        device_ip: '',
        device_port: '',
        device_username: '',
        device_password: '',
        source_directory: '',
      });
    } else if (value === 1) {
      setMethodName('2'); // 设置为 '2'，只展示FTP上传选项
      form.setFieldsValue({
        operate_mode: '2', // 设置第二个下拉框的值
      });
      await getInterfacesUpload({ 'templet': true })
        .then( (resp)=> {
          const{ data } = resp
          form.setFieldsValue({
            device_ip: data.device_ip,
            device_port: data.device_port,
            device_username: data.device_username,
            device_password: data.device_password,
            destination_directory: data.destination_directory,
          });
        })
    }
  };
  const handleChangeFile = (value: string) => {
    setMethodName(value);
  };

  useEffect(() => {
    if (fileMethod === 1 && methodName === '2') {
      setFileType(() => {
        return '3';
      });
    } else if (fileMethod === 2 && methodName === '3') {
      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(2);
          setMethodName('1');
          props.handleModal();
        },
        okText: intl.formatMessage({ id: 'common.okText', defaultMessage: '确认' }),
        cancelText: intl.formatMessage({ id: 'common.cancelText', defaultMessage: '取消' }),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        console.log(values);
        postInterfacesUpload(values)
          .then(() => {
            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '成功' }));
            props.reload();
          })
          .catch(() => {
            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
          });
        setFileMethod(2);
        setMethodName('1');
        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: 2,
                  label: '文件拉取',
                },
                {
                  value: 1,
                  label: '文件上传',
                },
              ]}
              onChange={handleChangeFileType}
              initialValue={fileMethod}
              name="upload_or_download"
              // label="获取方式"
            />
            {/* <ProFormSelect
              width={250}
              options={
                fileMethod === '2'
              ? [
                  {
                    value: '0',
                    label: 'FTP',
                  },
                  {
                    value: '1',
                    label: '文件系统',
                  },
                ]
              : [
                  {
                    value: '2',
                    label: 'FTP上传',
                  },
                ]
              }
              initialValue={methodName}
              onChange={handleChangeFile}
              name="file"
              // label="获取方式"
            /> */}
            <ProFormSelect
              width={250}
              options={[
                { value: '1', label: 'FTP' },
                { value: '3', label: '文件系统' },
                { value: '2', label: 'FTP上传' },
              ].filter(option => (fileMethod === 2 ? option.value !== '2' : option.value === '2'))}
              initialValue={methodName}
              onChange={handleChangeFile}
              name="operate_mode"
              // 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 / 2 - 8}
              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: '接口地址',
              })}`}
              required={true}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.ip"
                      defaultMessage="接口地址为必填项"
                    />
                  ),
                },
              ]}
            />
            <ProFormText
              width={proFormSmallItemStyleProps.width / 2 - 8}
              name="device_port"
              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 / 2 - 8}
              name="device_username"
              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 / 2 - 8}
              name="device_password"
              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="source_directory"
              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_ip"
              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="access_key_id"
              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="access_key_secret"
              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="bucket"
              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 / 2 - 8}
              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',
              })}`}
              disabled
              required={true}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="device.interface_manage.table.rule.required.ip"
                      defaultMessage="ip为必填项"
                    />
                  ),
                },
              ]}
            />
            <ProFormText
              width={proFormSmallItemStyleProps.width / 2 - 8}
              name="device_port"
              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 / 2 - 8}
              name="device_username"
              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 / 2 - 8}
              name="device_password"
              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="destination_directory"
              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;