/* eslint-disable indent */
/* eslint-disable prettier/prettier */
/* eslint-disable default-case */
/* eslint-disable react/jsx-no-undef */
import React, { useEffect, useState } from 'react';
import { Form, Modal, Row, Col, Input, Select, notification } from 'antd';
import { addInsertVideoConfig, editInsertVideoConfig } from '@/services/videoManger/videoManger';

const AddModal = props => {
  const { callBackSubmit = () => {}, visible, onCancel, type, type1, kind, obj } = props;

  const [form] = Form.useForm();
  const { Item } = Form;
  const { TextArea } = Input;
  const [Type, setType] = useState('');

  const [selectChange, setSelectChange] = useState('轻应用');
  const [selectChange1, setSelectChange1] = useState('否');
  const [selectChange2, setSelectChange2] = useState('主码流');

  const [configurationType, setConfigurationType] = useState('1');

  const onChange = value => {
    setSelectChange(value);
  };

  const onChange1 = value => {
    setSelectChange1(value);
  };

  const onChange2 = value => {
    setSelectChange2(value);
  };

  useEffect(() => {
    form.setFieldsValue({ VideoManufacturer: type });
    setType(type);
  }, [visible]);
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        let getValue = form.getFieldsValue();
        console.log(getValue);
        if (getValue.PlayModel === undefined) {
          getValue.PlayModel = '轻应用';
        }
        if (getValue.PlayZeroChannel === undefined) {
          getValue.PlayZeroChannel = '否';
        }
        if (getValue.StreamType === undefined) {
          getValue.StreamType = '主码流';
        }
        getValue.VideoManufacturer = Type;

        addInsertVideoConfig(getValue).then(res => {
          if (res.msg === 'Ok') {
            form.resetFields();
            callBackSubmit();
            notification.success({
              message: '提示',
              duration: 3,
              description: '新增成功',
            });
          } else {
            notification.error({
              message: '提示',
              duration: 3,
              description: res.msg,
            });
          }
        });
      }
    });
  };

  const selectChangeCheck = value => {
    if (value == 1) {
      setType('萤石云');
    } else if (value == 2) {
      setType('海康');
    } else if (value == 3) {
      setType('海康1.2');
    } else if (value == 4) {
      setType('海康NVR');
    } else if (value == 5) {
      setType('大华');
    } else if (value == 6) {
      setType('海康ISC');
    }
  };

  return (
    <Modal
      visible={visible}
      title={<span style={{ fontSize: '18px' }}>新增配置</span>}
      width="1000px"
      destroyOnClose
      maskClosable={false}
      onCancel={onCancel}
      onOk={onSubmit}
    >
      <p style={{ fontSize: '16px', marginLeft: '16px' }}>基本信息</p>
      <Form
        form={form}
        labelCol={{ span: 7 }}
        style={{ height: '25rem', overflowY: 'scroll' }}
        autocomplete="off"
      >
        <Row>
          <Col span={11}>
            <Item
              label="名称"
              name="Name"
              rules={[
                {
                  required: true,
                  message: '请输入名称',
                },
              ]}
            >
              <Input placeholder="请输入名称" maxLength="20px" />
            </Item>
          </Col>
          <Col span={12}>
            <span
              style={{
                position: 'absolute',
                left: '12%',
                top: '9%',
                color: 'red',
                fontSize: '16px',
              }}
            >
              *
            </span>
            <Item
              name="VideoManufacturer"
              label="视频厂商"
              rules={[{ required: true, message: '不能为空' }]}
            >
              <Select value={Type} onChange={selectChangeCheck}>
                <Option value="1">萤石云</Option>
                <Option value="2">海康</Option>
                <Option value="3">海康1.2</Option>
                <Option value="4">海康NVR</Option>
                <Option value="5">大华</Option>
                <Option value="6">海康ISC</Option>
              </Select>
            </Item>
          </Col>
          {(() => {
            switch (Type) {
              case '萤石云':
                return (
                  <>
                    <Col span={11}>
                      <Item
                        label="登录名"
                        name="LoginName"
                        rules={[
                          {
                            required: true,
                            message: '请输入登录名',
                          },
                        ]}
                      >
                        <Input placeholder="账户登录名" maxLength="100px" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="登录密码"
                        name="LoginPwd"
                        rules={[
                          {
                            required: true,
                            message: '请输入登录密码',
                          },
                        ]}
                      >
                        <Input.Password placeholder="请输入登录密码" />
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="设备编码"
                        name="EquipmentCode"
                        rules={[
                          {
                            required: true,
                            message: '请输入设备编码',
                          },
                        ]}
                      >
                        <Input placeholder="设备台账对应设备编码字段" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="通道ID"
                        name="PassageId"
                        rules={[
                          {
                            required: true,
                            message: '请输入通道ID',
                          },
                        ]}
                      >
                        <Input placeholder="视频设备通道ID" />
                      </Item>
                    </Col>
                    <Col span={24}>
                      <p style={{ fontSize: '16px', marginLeft: '16px' }}>萤石云</p>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="视频路径"
                        name="VideoPath"
                        rules={[
                          {
                            required: true,
                            message: '请输入视频路径',
                          },
                        ]}
                      >
                        <TextArea placeholder="视频Rtmp路径，请使用英文逗号分隔" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="HLS路径"
                        name="HLSPath"
                        rules={[
                          {
                            required: true,
                            message: '请输入HLS路径',
                          },
                        ]}
                      >
                        <TextArea placeholder="视频HLS路径，请使用英文逗号分隔" />
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="设备序列号"
                        name="EquipmentNumber"
                        rules={[
                          {
                            required: true,
                            message: '请输入设备序列号',
                          },
                        ]}
                      >
                        <Input placeholder="视频设备序列号" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item label="刻录机名称" name="RecorderName">
                        <Input placeholder="刻录机名称" />
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item label="默认播放方式" name="PlayModel">
                        <Select defaultValue="轻应用" value={selectChange} onChange={onChange}>
                          <Option value="轻应用">轻应用</Option>
                          <Option value="直播流">直播流</Option>
                        </Select>
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item label="默认通道ID" name="DefaultPassageId">
                        <Input placeholder="默认通道ID" />
                      </Item>
                    </Col>
                  </>
                );
              case '海康':
                return (
                  <>
                    <Col span={11}>
                      <Item
                        label="登录名"
                        name="LoginName"
                        rules={[
                          {
                            required: true,
                            message: '请输入登录名',
                          },
                        ]}
                      >
                        <Input placeholder="账户登录名" maxLength="100px" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="登录密码"
                        name="LoginPwd"
                        rules={[
                          {
                            required: true,
                            message: '请输入登录密码',
                          },
                        ]}
                      >
                        <Input.Password placeholder="请输入登录密码" />
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="设备编码"
                        name="EquipmentCode"
                        rules={[
                          {
                            required: true,
                            message: '请输入设备编码',
                          },
                        ]}
                      >
                        <Input placeholder="设备台账对应设备编码字段" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="通道ID"
                        name="PassageId"
                        rules={[
                          {
                            required: true,
                            message: '请输入通道ID',
                          },
                        ]}
                      >
                        <Input placeholder="视频设备通道ID" />
                      </Item>
                    </Col>
                    <Col span={24}>
                      <p style={{ fontSize: '16px', marginLeft: '16px' }}>海康</p>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="登录IP"
                        name="LoginIp"
                        rules={[
                          {
                            required: true,
                            message: '请输入登录ID',
                          },
                        ]}
                      >
                        <Input placeholder="登录ID" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <span
                        style={{
                          position: 'absolute',
                          left: '9%',
                          top: '9%',
                          color: 'red',
                          fontSize: '16px',
                        }}
                      >
                        *
                      </span>
                      <Item
                        label="播放零通道"
                        name="PlayZeroChannel"
                        rules={[
                          {
                            validator: (__rule, value) => {
                              if (form.getFieldsValue().PlayZeroChannel == '') {
                                return Promise.reject('请输入设备端口');
                              }
                              return Promise.resolve();
                            },
                          },
                        ]}
                      >
                        <Select defaultValue="否" value={selectChange1} onChange={onChange1}>
                          <Option value="否">否</Option>
                          <Option value="是">是</Option>
                        </Select>
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="设备端口"
                        name="EquipmentPort"
                        rules={[
                          {
                            required: true,
                            message: '请输入设备端口',
                          },
                        ]}
                      >
                        <Input placeholder="设备端口" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="视频端口"
                        name="VideoPort"
                        rules={[
                          {
                            required: true,
                            message: '请输入视频端口',
                          },
                        ]}
                      >
                        <Input placeholder="视频端口" />
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="媒体流端口"
                        name="StreamingMediaPort"
                        rules={[
                          {
                            required: true,
                            message: '请输入媒体流端口',
                          },
                        ]}
                      >
                        <Input placeholder="媒体流端口" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <span
                        style={{
                          position: 'absolute',
                          left: '12%',
                          top: '9%',
                          color: 'red',
                          fontSize: '16px',
                        }}
                      >
                        *
                      </span>
                      <Item
                        label="码流类型"
                        name="StreamType"
                        rules={[
                          {
                            validator: (_rule, value) => {
                              if (form.getFieldsValue().StreamType == '') {
                                return Promise.reject('请选择码流类型');
                              }
                              return Promise.resolve();
                            },
                          },
                        ]}
                      >
                        <Select defaultValue="主码流" value={selectChange2} onChange={onChange2}>
                          <Option value="主码流">主码流</Option>
                          <Option value="子码流">子码流</Option>
                        </Select>
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="视频名称"
                        name="VideoName"
                        rules={[
                          {
                            required: true,
                            message: '请输入视频名称',
                          },
                        ]}
                      >
                        <Input placeholder="视频名称" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item label="刻录机名称" name="RecorderName">
                        <Input placeholder="刻录机名称" />
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item label="默认通道ID" name="DefaultPassageId">
                        <Input placeholder="默认通道ID" />
                      </Item>
                    </Col>
                  </>
                );
              case '海康1.2':
                return (
                  <>
                    <Col span={11}>
                      <Item
                        label="设备编码"
                        name="EquipmentCode"
                        rules={[
                          {
                            required: true,
                            message: '请输入设备编码',
                          },
                        ]}
                      >
                        <Input placeholder="设备台账对应设备编码字段" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="通道ID"
                        name="PassageId"
                        rules={[
                          {
                            required: true,
                            message: '请输入通道ID',
                          },
                        ]}
                      >
                        <TextArea placeholder="视频监控点ID，请用英文逗好分隔" />
                      </Item>
                    </Col>
                    <Col span={24}>
                      <p style={{ fontSize: '16px', marginLeft: '16px' }}>海康1.2</p>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="设备序列号"
                        name="EquipmentNumber"
                        rules={[
                          {
                            required: true,
                            message: '请输入设备序列号',
                          },
                        ]}
                      >
                        <Input placeholder="视频设备序列号" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item label="刻录机名称" name="RecorderName">
                        <Input placeholder="刻录机名称" />
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="视频名称"
                        name="VideoName"
                        rules={[
                          {
                            required: true,
                            message: '请输入视频名称',
                          },
                        ]}
                      >
                        <Input placeholder="视频监控点名称" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item label="默认通道ID" name="DefaultPassageId">
                        <TextArea placeholder="默认视频监控点ID，请用英文逗好分隔" />
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="视频服务地址"
                        name="VideoPath"
                        rules={[
                          {
                            required: true,
                            message: '请输入视频名称',
                          },
                        ]}
                      >
                        <Input placeholder="视频服务地址" />
                      </Item>
                    </Col>
                  </>
                );
              case '海康NVR':
                return (
                  <>
                    <Col span={11}>
                      <Item
                        label="设备编码"
                        name="EquipmentCode"
                        rules={[
                          {
                            required: true,
                            message: '请输入设备编码',
                          },
                        ]}
                      >
                        <Input placeholder="设备台账对应设备编码字段" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="通道ID"
                        name="PassageId"
                        rules={[
                          {
                            required: true,
                            message: '请输入通道ID',
                          },
                        ]}
                      >
                        <TextArea placeholder="视频监控点ID，请用英文逗好分隔" />
                      </Item>
                    </Col>
                    <Col span={24}>
                      <p style={{ fontSize: '16px', marginLeft: '16px' }}>海康NVR</p>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="视频流地址"
                        name="HLSPath"
                        rules={[
                          {
                            required: true,
                            message: '请输入视频流地址',
                          },
                        ]}
                      >
                        <TextArea placeholder="视频流地址" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item label="刻录机名称" name="RecorderName">
                        <Input placeholder="刻录机名称" />
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="视频名称"
                        name="VideoName"
                        rules={[
                          {
                            required: true,
                            message: '请输入视频名称',
                          },
                        ]}
                      >
                        <Input placeholder="视频监控点名称" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item label="默认通道ID" name="DefaultPassageId">
                        <TextArea placeholder="默认视频监控点ID，请用英文逗好分隔" />
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="视频服务地址"
                        name="VideoPath"
                        rules={[
                          {
                            required: true,
                            message: '请输入视频名称',
                          },
                        ]}
                      >
                        <Input placeholder="视频服务地址" />
                      </Item>
                    </Col>
                  </>
                );
              case '大华':
                return (
                  <>
                    <Col span={11}>
                      <Item
                        label="设备编码"
                        name="EquipmentCode"
                        rules={[
                          {
                            required: true,
                            message: '请输入设备编码',
                          },
                        ]}
                      >
                        <Input placeholder="设备台账对应设备编码字段" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="通道ID"
                        name="PassageId"
                        rules={[
                          {
                            required: true,
                            message: '请输入通道ID',
                          },
                        ]}
                      >
                        <TextArea placeholder="视频监控点ID，请用英文逗好分隔" />
                      </Item>
                    </Col>
                    <Col span={24}>
                      <p style={{ fontSize: '16px', marginLeft: '16px' }}>大华</p>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="登录IP"
                        name="LoginIp"
                        rules={[
                          {
                            required: true,
                            message: '请输入登录ID',
                          },
                        ]}
                      >
                        <Input placeholder="登录ID" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="设备端口"
                        name="EquipmentPort"
                        rules={[
                          {
                            required: true,
                            message: '请输入设备端口',
                          },
                        ]}
                      >
                        <Input placeholder="设备端口" />
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="视频名称"
                        name="VideoName"
                        rules={[
                          {
                            required: true,
                            message: '请输入视频名称',
                          },
                        ]}
                      >
                        <Input placeholder="视频监控点名称" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="默认通道ID"
                        name="DefaultPassageId"
                        rules={[
                          {
                            required: true,
                            message: '请输入默认通道ID',
                          },
                        ]}
                      >
                        <TextArea placeholder="默认视频监控点ID，请用英文逗好分隔" />
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="视频服务地址"
                        name="VideoPath"
                        rules={[
                          {
                            required: true,
                            message: '请输入视频名称',
                          },
                        ]}
                      >
                        <Input placeholder="视频服务地址" />
                      </Item>
                    </Col>
                  </>
                );
              case '海康ISC':
                return (
                  <>
                    <Col span={11}>
                      <Item
                        label="登录名"
                        name="LoginName"
                        rules={[
                          {
                            required: true,
                            message: '请输入登录名',
                          },
                        ]}
                      >
                        <Input placeholder="账户登录名" maxLength="100px" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="登录密码"
                        name="LoginPwd"
                        rules={[
                          {
                            required: true,
                            message: '请输入登录密码',
                          },
                        ]}
                      >
                        <Input.Password placeholder="请输入登录密码" />
                      </Item>
                    </Col>

                    <Col span={11}>
                      <Item
                        label="设备编码"
                        name="EquipmentCode"
                        rules={[
                          {
                            required: true,
                            message: '请输入设备编码',
                          },
                        ]}
                      >
                        <Input placeholder="设备台账对应设备编码字段" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="通道ID"
                        name="PassageId"
                        rules={[
                          {
                            required: true,
                            message: '请输入通道ID',
                          },
                        ]}
                      >
                        <TextArea placeholder="视频监控点ID，请用英文逗好分隔" />
                      </Item>
                    </Col>
                    <Col span={24}>
                      <p style={{ fontSize: '16px', marginLeft: '16px' }}>海康ISC</p>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="登录IP"
                        name="LoginIp"
                        rules={[
                          {
                            required: true,
                            message: '请输入登录ID',
                          },
                        ]}
                      >
                        <Input placeholder="登录ID" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="视频端口"
                        name="VideoPort"
                        rules={[
                          {
                            required: true,
                            message: '请输入视频端口',
                          },
                        ]}
                      >
                        <Input placeholder="视频端口" />
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item
                        label="视频名称"
                        name="VideoName"
                        rules={[
                          {
                            required: true,
                            message: '请输入视频名称',
                          },
                        ]}
                      >
                        <Input placeholder="视频监控点名称" />
                      </Item>
                    </Col>
                    <Col span={12}>
                      <span
                        style={{
                          position: 'absolute',
                          left: '12%',
                          top: '9%',
                          color: 'red',
                          fontSize: '16px',
                        }}
                      >
                        *
                      </span>
                      <Item
                        label="码流类型"
                        name="StreamType"
                        rules={[
                          {
                            validator: (_rule, value) => {
                              if (form.getFieldsValue().StreamType == '') {
                                return Promise.reject('请选择码流类型');
                              }
                              return Promise.resolve();
                            },
                          },
                        ]}
                      >
                        <Select defaultValue="主码流" value={selectChange2} onChange={onChange2}>
                          <Option value="主码流">主码流</Option>
                          <Option value="子码流">子码流</Option>
                        </Select>
                      </Item>
                    </Col>
                    <Col span={11}>
                      <Item label="默认通道ID" name="DefaultPassageId">
                        <TextArea placeholder="默认视频监控点ID，请用英文逗好分隔" />
                      </Item>
                    </Col>
                  </>
                );
            }
          })()}
        </Row>
      </Form>
    </Modal>
  );
};
export default AddModal;
