import React, { useEffect, useState } from 'react';
import { Drawer, Form, Input, notification, Row, Col, Button, Space } from 'antd';
import { CM_Event_OperateEventExtendPage, GetEventExtendPage } from '@/services/standingBook/api';
import { IdcardTwoTone } from '@ant-design/icons';
const AddViewModal = props => {
  const { callBackSubmit = () => {}, visible, onClose, maxLength, title2, obj, type } = props;
  const [id, setId] = useState('');

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

  const onSubmit = () => {
    let aa = title2;
    let bb = form.getFieldsValue().WebLabel;
    let cc = form.getFieldsValue().WebPage;
    let dd = form.getFieldsValue().WebParam;
    let ee = form.getFieldsValue().MobileLabel;
    let ff = form.getFieldsValue().MobilePage;
    let gg = form.getFieldsValue().MobileParam;
    if (type == 'edit') {
      CM_Event_OperateEventExtendPage({
        ID: id,
        EventName: aa,
        WebLabel: bb,
        WebPage: cc,
        WebParam: dd,
        MobileLabel: ee,
        MobilePage: ff,
        MobileParam: gg,
      }).then(res => {
        if (res.msg === '') {
          form.resetFields();
          callBackSubmit();
          notification.success({
            message: '提示',
            duration: 3,
            description: '编辑成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg,
          });
        }
      });
    } else {
      CM_Event_OperateEventExtendPage({
        ID: 0,
        EventName: aa,
        WebLabel: bb,
        WebPage: cc,
        WebParam: dd,
        MobileLabel: ee,
        MobilePage: ff,
        MobileParam: gg,
      }).then(res => {
        if (res.msg === '') {
          form.resetFields();
          callBackSubmit();
          notification.success({
            message: '提示',
            duration: 3,
            description: '添加成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg,
          });
        }
      });
    }
  };
  useEffect(() => {
    if (type === 'edit') {
      GetEventExtendPage({ eventExtendPageId: obj }).then(res => {
        form.setFieldsValue({ ...res.data });
        setId(res.data.ID);
      });
    } else if (type === 'add') {
      form.resetFields();
    }
  }, [visible]);
  return (
    <Drawer
      visible={visible}
      onClose={onClose}
      width="500px"
      title={type == 'edit' ? '编辑事件辅助视图配置' : '添加事件辅助视图配置'}
      footer={
        <Space>
          <Button onClick={onSubmit} type="primary">
            确定
          </Button>
        </Space>
      }
    >
      <Form form={form} labelCol={{ span: 5 }} style={{ overflowY: 'scroll' }}>
        <Row>
          <Col span={24}>
            <Item
              label="前端标签"
              name="WebLabel"
              rules={[
                {
                  required: true,
                  message: '请输入前端标签',
                },
              ]}
            >
              <Input placeholder="请输入前端标签" />
            </Item>
          </Col>
          <Col span={24}>
            <Item
              label="前端视图"
              name="WebPage"
              rules={[
                {
                  required: true,
                  message: '请输入前端视图',
                },
              ]}
            >
              <Input placeholder="请输入前端视图" />
            </Item>
          </Col>
          <Col span={24}>
            <Item label="视图参数" name="WebParam">
              <TextArea placeholder="请输入视图参数" />
            </Item>
          </Col>
          <Col span={24}>
            <Item label="手持标签" name="MobileLabel">
              <Input placeholder="请输入手持标签" />
            </Item>
          </Col>
          <Col span={24}>
            <Item label="手持视图" name="MobilePage">
              <Input placeholder="请输入手持视图" />
            </Item>
          </Col>
          <Col span={24}>
            <Item label="手持参数" name="MobileParam">
              <TextArea placeholder="请输入手持参数" />
            </Item>
          </Col>
        </Row>
      </Form>
    </Drawer>
  );
};
export default AddViewModal;
