/* 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';
import CryptoJS from 'crypto-js';

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 key = CryptoJS.enc.Utf8.parse('1p2a3n4d5a6o7m8s9a10n1e2t3c4o5re'); // 十六位十六进制数作为密钥
  const iv = CryptoJS.enc.Utf8.parse('1234567890000000');

  // 解密
  const Decrypt = word => {
    let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
    let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    let decrypt = CryptoJS.AES.decrypt(srcs, key, {
      iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7,
    });
    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
  };

  // 加密
  const Encrypt = word => {
    let srcs = CryptoJS.enc.Utf8.parse(word);
    let encrypted = CryptoJS.AES.encrypt(srcs, key, {
      iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7,
    });
    return encrypted.ciphertext.toString().toUpperCase();
  };

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

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

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

  useEffect(() => {
    console.log(obj.LoginPwd);
    setLoad(false);
    if (kind === 'add') {
      form.resetFields();
    } else {
      form.setFieldsValue({ ...obj, LoginPwd: obj.LoginPwd ? Decrypt(obj.LoginPwd) : '' });
    }
  }, [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, LoginPwd: Encrypt(getValue.LoginPwd) }).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,
            LoginPwd: Encrypt(getValue.LoginPwd),
          }).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>
    );
  }
  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;