/* eslint-disable default-case */
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 [selectChange, setSelectChange] = useState('轻应用');
  const [selectChange1, setSelectChange1] = useState('否');
  const [selectChange2, setSelectChange2] = useState('主码流');
  const [load, setLoad] = useState(false); // 提交加载

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

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

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

  useEffect(() => {
    setLoad(false);
    if (kind === 'add') {
      form.resetFields();
    } else {
      form.setFieldsValue({ ...obj });
    }
  }, [visible]);
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoad(true);
        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;
        if (kind === 'add') {
          addInsertVideoConfig(getValue).then(res => {
            if (res.msg === 'Ok') {
              onCancel();
              setLoad(false);
              form.resetFields();
              callBackSubmit();
              notification.success({
                message: '提示',
                duration: 3,
                description: '新增成功',
              });
            } else {
              setLoad(false);
              notification.error({
                message: '提示',
                duration: 3,
                description: res.msg,
              });
            }
          });
        }
        if (kind === 'edit') {
          editInsertVideoConfig({
            ...getValue,
            Id: obj.Id,
          }).then(res => {
            if (res.msg === 'Ok') {
              onCancel();
              setLoad(false);
              form.resetFields();
              callBackSubmit();
              notification.success({
                message: '提示',
                duration: 3,
                description: '编辑成功',
              });
            } else {
              setLoad(false);
              notification.error({
                message: '提示',
                duration: 3,
                description: res.msg,
              });
            }
          });
        }
      }
    });
  };

  if (type1 == 'aa') {
    return (
      <Modal
        visible={visible}
        title={
          kind === 'add' ? (
            <span style={{ fontSize: '18px' }}>新增配置</span>
          ) : (
            <span style={{ fontSize: '18px' }}>编辑配置</span>
          )
        }
        width="1000px"
        destroyOnClose
        maskClosable={false}
        onCancel={onCancel}
        confirmLoading={load}
        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>
            {(() => {
              switch (type) {
                case '海康1.2':
                  return (
                    <>
                      <Col span={12}>
                        <span
                          style={{
                            position: 'absolute',
                            left: '12%',
                            top: '9%',
                            color: 'red',
                            fontSize: '16px',
                          }}
                        >
                          *
                        </span>
                        <Item label="视频厂商" name="VideoManufacturer">
                          <Input placeholder="海康1.2" disabled />
                        </Item>
                      </Col>
                    </>
                  );
                case '海康NVR':
                  return (
                    <>
                      <Col span={12}>
                        <span
                          style={{
                            position: 'absolute',
                            left: '12%',
                            top: '9%',
                            color: 'red',
                            fontSize: '16px',
                          }}
                        >
                          *
                        </span>
                        <Item label="视频厂商" name="VideoManufacturer">
                          <Input placeholder="海康NVR" disabled />
                        </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' }}>{type}</p>
            </Col>
            {(() => {
              switch (type) {
                case '海康1.2':
                  return (
                    <>
                      <Col span={11}>
                        <Item
                          label="设备序列号"
                          name="EquipmentNumber"
                          rules={[
                            {
                              required: true,
                              message: '请输入设备序列号',
                            },
                          ]}
                        >
                          <Input placeholder="视频设备序列号" />
                        </Item>
                      </Col>
                    </>
                  );
                case '海康NVR':
                  return (
                    <>
                      <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>
          </Row>
        </Form>
      </Modal>
    );
  } else {
    return (
      <Modal
        visible={visible}
        title={
          kind === 'add' ? (
            <span style={{ fontSize: '18px' }}>新增配置</span>
          ) : (
            <span style={{ fontSize: '18px' }}>编辑配置</span>
          )
        }
        width="1000px"
        destroyOnClose
        confirmLoading={load}
        maskClosable={false}
        onCancel={onCancel}
        onOk={onSubmit}
      >
        <p style={{ fontSize: '16px', marginLeft: '16px' }}>基本信息</p>
        <Form
          form={form}
          labelCol={{ span: 7 }}
          style={{ height: '27rem', overflowY: 'scroll' }}
          autocomplete="off"
        >
          <Row>
            <Col span={11}>
              <Item
                label="名称"
                name="Name"
                rules={[
                  {
                    required: true,
                    message: '请输入名称',
                  },
                ]}
              >
                <Input placeholder="请输入名称" />
              </Item>
            </Col>
            {(() => {
              switch (type) {
                case '萤石云':
                  return (
                    <>
                      <Col span={12}>
                        <span
                          style={{
                            position: 'absolute',
                            left: '12%',
                            top: '9%',
                            color: 'red',
                            fontSize: '16px',
                          }}
                        >
                          *
                        </span>
                        <Item label="视频厂商" name="VideoManufacturer">
                          <Input placeholder="萤石云" disabled />
                        </Item>
                      </Col>
                    </>
                  );
                case '海康':
                  return (
                    <>
                      <Col span={12}>
                        <span
                          style={{
                            position: 'absolute',
                            left: '12%',
                            top: '9%',
                            color: 'red',
                            fontSize: '16px',
                          }}
                        >
                          *
                        </span>
                        <Item label="视频厂商" name="VideoManufacturer">
                          <Input placeholder="海康" disabled />
                        </Item>
                      </Col>
                    </>
                  );
              }
            })()}

            <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' }}>{type}</p>
            </Col>
            {(() => {
              switch (type) {
                case '萤石云':
                  return (
                    <>
                      <Row>
                        <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>
                      </Row>
                    </>
                  );
                case '海康':
                  return (
                    <>
                      <Row>
                        <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>
                      </Row>
                    </>
                  );
              }
            })()}
          </Row>
        </Form>
      </Modal>
    );
  }
};
export default AddModal;
