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 AddHKModal = props => {
  const { callBackSubmit = () => {}, visible, onCancel, type, 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,
              });
            }
          });
        }
      }
    });
  };

  return (
    <Modal
      visible={visible}
      title={
        kind === 'add' ? (
          <span style={{ fontSize: '18px' }}>新增配置</span>
        ) : (
          <span style={{ fontSize: '18px' }}>编辑配置</span>
        )
      }
      width="1000px"
      destroyOnClose
      maskClosable={false}
      confirmLoading={load}
      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 label="视频厂商" name="VideoManufacturer">
              <Input placeholder="海康ISC" 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',
                },
              ]}
            >
              <TextArea placeholder="视频监控点ID，请用英文逗好分隔" />
            </Item>
          </Col>
          <Col span={24}>
            <p style={{ fontSize: '16px', marginLeft: '16px' }}>{type}</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 AddHKModal;
