import React, { useEffect, useState } from 'react';
import { Form, Modal, Row, Col, Input, Select } from 'antd';

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

  const [form] = Form.useForm();
  const { Item } = Form;
  const { TextArea } = Input;

  useEffect(() => {
    form.setFieldsValue({ ...obj });
  }, [visible]);

  if (type1 == 'aa') {
    return (
      <Modal
        visible={visible}
        title={<span style={{ fontSize: '18px' }}>查看配置</span>}
        width="1000px"
        destroyOnClose
        maskClosable={false}
        onCancel={onCancel}
        footer={[]}
      >
        <p style={{ fontSize: '16px', marginLeft: '16px' }}>基本信息</p>
        <Form form={form} labelCol={{ span: 7 }} style={{ height: '25rem', overflowY: 'scroll' }}>
          <Row>
            <Col span={11}>
              <Item
                label="名称"
                name="Name"
                rules={[
                  {
                    required: true,
                    message: '请输入名称',
                  },
                ]}
              >
                <Input placeholder={obj.Name} disabled />
              </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={obj.EquipmentCode} disabled />
              </Item>
            </Col>
            <Col span={12}>
              <Item
                label="通道ID"
                name="PassageId"
                rules={[
                  {
                    required: true,
                    message: '请输入通道ID',
                  },
                ]}
              >
                <TextArea placeholder={obj.PassageId} disabled />
              </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={obj.EquipmentNumber} disabled />
                        </Item>
                      </Col>
                    </>
                  );
                case '海康NVR':
                  return (
                    <>
                      <Col span={11}>
                        <Item
                          label="视频流地址"
                          name="HLSPath"
                          rules={[
                            {
                              required: true,
                              message: '请输入视频流地址',
                            },
                          ]}
                        >
                          <TextArea placeholder={obj.HLSPath} disabled />
                        </Item>
                      </Col>
                    </>
                  );
              }
            })()}

            <Col span={12}>
              <Item label="刻录机名称" name="RecorderName">
                <Input placeholder={obj.RecorderName} disabled />
              </Item>
            </Col>
            <Col span={11}>
              <Item
                label="视频名称"
                name="VideoName"
                rules={[
                  {
                    required: true,
                    message: '请输入视频名称',
                  },
                ]}
              >
                <Input placeholder={obj.VideoName} disabled />
              </Item>
            </Col>
            <Col span={12}>
              <Item label="默认通道ID" name="DefaultPassageId">
                <TextArea placeholder={obj.DefaultPassageId} disabled />
              </Item>
            </Col>
            <Col span={11}>
              <Item
                label="视频服务地址"
                name="VideoPath"
                rules={[
                  {
                    required: true,
                    message: '请输入视频名称',
                  },
                ]}
              >
                <Input placeholder={obj.VideoPath} disabled />
              </Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  } else {
    return (
      <Modal
        visible={visible}
        title={<span style={{ fontSize: '18px' }}>查看配置</span>}
        width="1000px"
        destroyOnClose
        maskClosable={false}
        onCancel={onCancel}
        footer={[]}
      >
        <p style={{ fontSize: '16px', marginLeft: '16px' }}>基本信息</p>
        <Form form={form} labelCol={{ span: 7 }} style={{ height: '27rem', overflowY: 'scroll' }}>
          <Row>
            <Col span={11}>
              <Item
                label="名称"
                name="Name"
                rules={[
                  {
                    required: true,
                    message: '请输入名称',
                  },
                ]}
              >
                <Input placeholder={obj.Name} disabled />
              </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={obj.LoginName} disabled />
              </Item>
            </Col>
            <Col span={12}>
              <Item
                label="登录密码"
                name="LoginPwd"
                rules={[
                  {
                    required: true,
                    message: '请输入登录密码',
                  },
                ]}
              >
                <Input placeholder={obj.LoginPwd} disabled />
              </Item>
            </Col>
            <Col span={11}>
              <Item
                label="设备编码"
                name="EquipmentCode"
                rules={[
                  {
                    required: true,
                    message: '请输入设备编码',
                  },
                ]}
              >
                <Input placeholder={obj.EquipmentCode} disabled />
              </Item>
            </Col>
            <Col span={12}>
              <Item
                label="通道ID"
                name="PassageId"
                rules={[
                  {
                    required: true,
                    message: '请输入通道ID',
                  },
                ]}
              >
                <Input placeholder={obj.PassageId} disabled />
              </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={obj.VideoPath} disabled />
                          </Item>
                        </Col>
                        <Col span={12}>
                          <Item
                            label="HLS路径"
                            name="HLSPath"
                            rules={[
                              {
                                required: true,
                                message: '请输入HLS路径',
                              },
                            ]}
                          >
                            <TextArea placeholder={obj.HLSPath} disabled />
                          </Item>
                        </Col>
                        <Col span={11}>
                          <Item
                            label="设备序列号"
                            name="EquipmentNumber"
                            rules={[
                              {
                                required: true,
                                message: '请输入设备序列号',
                              },
                            ]}
                          >
                            <Input placeholder={obj.EquipmentNumber} disabled />
                          </Item>
                        </Col>
                        <Col span={12}>
                          <Item label="刻录机名称" name="RecorderName">
                            <Input placeholder={obj.RecorderName} disabled />
                          </Item>
                        </Col>
                        <Col span={11}>
                          <Item label="默认播放方式" name="PlayModel">
                            <Select placeholder={obj.PlayModel} disabled />
                          </Item>
                        </Col>
                        <Col span={12}>
                          <Item label="默认通道ID" name="DefaultPassageId">
                            <Input placeholder={obj.DefaultPassageId} disabled />
                          </Item>
                        </Col>
                      </Row>
                    </>
                  );
                case '海康':
                  return (
                    <>
                      <Row>
                        <Col span={11}>
                          <Item
                            label="登录IP"
                            name="LoginIp"
                            rules={[
                              {
                                required: true,
                                message: '请输入登录ID',
                              },
                            ]}
                          >
                            <Input placeholder={obj.LoginIp} disabled />
                          </Item>
                        </Col>
                        <Col span={12}>
                          <Item
                            label="播放零通道"
                            name="PlayZeroChannel"
                            rules={[
                              {
                                required: true,
                                message: '请输入设备端口',
                              },
                            ]}
                          >
                            <Select placeholder={obj.PlayZeroChannel} disabled />
                          </Item>
                        </Col>
                        <Col span={11}>
                          <Item
                            label="设备端口"
                            name="EquipmentPort"
                            rules={[
                              {
                                required: true,
                                message: '请输入设备端口',
                              },
                            ]}
                          >
                            <Input placeholder={obj.EquipmentPort} disabled />
                          </Item>
                        </Col>
                        <Col span={12}>
                          <Item
                            label="视频端口"
                            name="VideoPort"
                            rules={[
                              {
                                required: true,
                                message: '请输入视频端口',
                              },
                            ]}
                          >
                            <Input placeholder={obj.VideoPort} disabled />
                          </Item>
                        </Col>
                        <Col span={11}>
                          <Item
                            label="媒体流端口"
                            name="StreamingMediaPort"
                            rules={[
                              {
                                required: true,
                                message: '请输入媒体流端口',
                              },
                            ]}
                          >
                            <Input placeholder={obj.StreamingMediaPort} disabled />
                          </Item>
                        </Col>
                        <Col span={12}>
                          <Item
                            label="码流类型"
                            name="StreamType"
                            rules={[
                              {
                                required: true,
                                message: '请选择码流类型',
                              },
                            ]}
                          >
                            <Select placeholder={obj.StreamType} disabled />
                          </Item>
                        </Col>
                        <Col span={11}>
                          <Item
                            label="视频名称"
                            name="VideoName"
                            rules={[
                              {
                                required: true,
                                message: '请输入视频名称',
                              },
                            ]}
                          >
                            <Input placeholder={obj.VideoName} disabled />
                          </Item>
                        </Col>
                        <Col span={12}>
                          <Item label="刻录机名称" name="RecorderName">
                            <Input placeholder={obj.RecorderName} disabled />
                          </Item>
                        </Col>
                        <Col span={11}>
                          <Item label="默认通道ID" name="DefaultPassageId">
                            <Input placeholder={obj.DefaultPassageId} disabled />
                          </Item>
                        </Col>
                      </Row>
                    </>
                  );
              }
            })()}
          </Row>
        </Form>
      </Modal>
    );
  }
};
export default CheckModal;
