/*
 * @Author: zhoux zhouxia@supervision.ltd
 * @Date: 2023-11-01 13:56:33
 * @LastEditors: zhoux zhouxia@supervision.ltd
 * @LastEditTime: 2023-12-26 15:01:08
 * @FilePath: \general-ai-platform-web\src\pages\Device\DeviceCategoryList\components\UpdateForm.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory';
import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup';
import { postInterfacesUpload, getInterfacesUpload } from '@/services/alarm/Interfaces';
import { ModalForm, ProForm, ProFormFieldSet, ProFormSelect, ProFormSwitch, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Button, 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 UpdateFormProps = {
  updateModalOpen: boolean;
  handleModal: () => void;
  values: Partial<API.UpdateInterfacesParams>;
  reload: any;
};
const UpdateForm: React.FC<UpdateFormProps> = (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>(props.values.upload_or_download);
  const [methodName, setMethodName] = useState<number>(props.values.operate_mode);

  const handleChangeFileType = async (value: number) => {
    setFileMethod(value);
    // 根据选择的获取方式更新第二个下拉框的值
    if (value === 2) {
      setMethodName(1); // 设置为初始值 '0'，只展示FTP选项
      form.setFieldsValue({
        operate_mode: 1, // 设置第二个下拉框的值
        device_ip: props.values.device_ip,
        device_port: props.values.device_port,
        device_username: props.values.device_username,
        device_password: props.values.device_password,
        source_directory: props.values.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: number) => {
    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]);
  useEffect(() => {
    setFileMethod(props.values.upload_or_download);
    setMethodName(props.values.operate_mode);
    if (fileMethod === 1 && methodName === 2) {
      setFileType(() => {
        return '3';
      });
    } else if (fileMethod === 2 && methodName === 3) {
      setFileType(() => {
        return '2';
      });
    } else {
      setFileType(() => {
        return '1';
      });
    }
  }, [props.updateModalOpen]);
  return (
    <ModalForm<any>
      width={proFormSmallModelWidth}
      title={intl.formatMessage({
        id: 'device.interface_manage.table.list.updatVideoSource',
        defaultMessage: `编辑${props.values.device_name}`,
      })}
      open={props.updateModalOpen}
      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);
        values.id = props.values.id
        postInterfacesUpload(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: '接口名称',
          })}`}
          initialValue={props.values.device_name}
          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={props.values.upload_or_download}
              name="upload_or_download"
              // label="获取方式"
            />
            {/* <ProFormSelect
              width={250}
              options={
                fileMethod === 2
              ? [
                  {
                    value: 0,
                    label: 'FTP',
                  },
                  {
                    value: 1,
                    label: '文件系统',
                  },
                ]
              : [
                  {
                    value: 2,
                    label: 'FTP上传',
                  },
                ]
              }
              initialValue={props.values.operate_mode}
              onChange={handleChangeFile}
              name="file"
              // label="获取方式"
            /> */}
            <ProFormSelect
              width={250}
              options={[
                { value: 1, label: 'FTP' },
                { value: 2, label: 'FTP上传' },
                { value: 3, label: '文件系统' },
              ].filter(option => (fileMethod === 2 ? option.value !== 2 : option.value === 2))}
              initialValue={props.values.operate_mode}
              onChange={handleChangeFile}
              name="operate_mode"
              // label="获取方式"
            />
          </div>
        </div>
        {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}
              initialValue={props.values.device_ip}
              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: '端口',
              })}`}
              initialValue={props.values.device_port}
              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: '登录名',
              })}`}
              initialValue={props.values.device_username}
              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: '密码',
              })}`}
              initialValue={props.values.device_password}
              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: '文件目录',
              })}`}
              initialValue={props.values.source_directory}
              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: '请求地址',
              })}`}
              initialValue={props.values.device_ip}
              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',
              })}`}
              initialValue={props.values.access_key_id}
              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: '秘钥',
              })}`}
              initialValue={props.values.access_key_secret}
              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',
              })}`}
              initialValue={props.values.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
              initialValue={props.values.device_ip}
              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: '端口',
              })}`}
              initialValue={props.values.device_port}
              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: '登录名',
              })}`}
              initialValue={props.values.device_username}
              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: '密码',
              })}`}
              initialValue={props.values.device_password}
              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: '文件目录',
              })}`}
              initialValue={props.values.destination_directory}
              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: '备注',
          })}`}
          initialValue={props.values.note}
          required={false}
        />
      </ProForm.Group>
    </ModalForm>
  );
};
export default UpdateForm;
