import React, { useEffect, useState } from 'react';

import { Form, Modal, Input, message, Button, Select, Tag } from 'antd';
import ParmarModal from '../../../../workFlow/flowNode/flowNodeComponents/auxiliaryComponents/ParmarModal';
import MobileParmarModal from '../../../../workFlow/flowNode/flowNodeComponents/auxiliaryComponents/ParmarModal';
const { Option } = Select;
const AddView = props => {
  const { onSubumit, handleCancel, visible, msg, flowNodeId, modalType, title } = props;
  const [form] = Form.useForm();
  const [flag, setFlag] = useState(0);
  const [showParmarModal, setShowParmarModal] = useState(false);
  const [showMobileParmarModal, setShowMobileParmarModal] = useState(false);
  useEffect(() => {
    form.resetFields();
    if (visible) {
      if (modalType === 'edit') {
        getFormData();
      } else {
        form.setFieldsValue({ WebPage: 'FeedbackAccount' });
        form.setFieldsValue({ MobilePage: 'FeedbackAccount' });
      }
      setFlag(flag + 1);
    }
  }, [visible]);
  // 获取表单回显
  const getFormData = () => {
    form.setFieldsValue(msg);
  };
  // 提交表单
  const onFinish = () => {
    form.validateFields().then(validate => {
      if (validate) {
        let obj = {};
        console.log(modalType);

        if (modalType === 'add') {
          obj = validate;
        } else {
          obj = { ...validate, key: msg.key };
        }
        onSubumit(obj, modalType);
      }
    });
  };
  // 节点配置表单监听
  const changeValue = (changedFields, allFields) => {
    if (changedFields.length) {
      if (changedFields[0].name[0] === 'WebPage') {
        setFlag(flag + 1);
      }
      if (changedFields[0].name[0] === 'MobilePage') {
        setFlag(flag + 1);
      }
    }
  };
  const addParama = (web = true) => {
    if (web) {
      setShowParmarModal(true);
    } else {
      setShowMobileParmarModal(true);
    }
  };
  return (
    <Modal
      title="流程节点辅助视图配置"
      visible={visible}
      onOk={onFinish}
      onCancel={handleCancel}
      maskClosable={false}
      destroyOnClose
    >
      <Form
        form={form}
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 18 }}
        initialValues={{ remember: true }}
        onFieldsChange={changeValue}
      >
        {/* <Form.Item label="流程节点" name="FlowName">
          <Input disabled />
        </Form.Item> */}
        <Form.Item label="前端标签" name="WebLabel">
          <Input placeholder="请输入前端标签" />
        </Form.Item>
        <Form.Item label="前端视图" name="WebPage">
          <Select placeholder="请输入前端视图" showSearch optionLabelProp="label">
            <Option value="FeedbackAccount" label="FeedbackAccount">
              <div style={{ marginRight: '6px' }}>
                <Tag color="blue">标准</Tag>
                FeedbackAccount：工单反馈标准视图
              </div>
            </Option>
            <Option value="GisGatherProjectView" label="GisGatherProjectView">
              <div style={{ marginRight: '6px' }}>
                <Tag color="purple">专用</Tag>
                GisGatherProjectView：管网采集辅助视图
              </div>
            </Option>
          </Select>
        </Form.Item>
        <Form.Item
          label="视图参数"
          style={{
            display: form.getFieldValue('WebPage') === 'FeedbackAccount' ? 'flex' : 'none',
          }}
        >
          <div style={{ display: 'flex' }}>
            <Form.Item name="WebParam" style={{ marginBottom: '0', flex: '1' }}>
              <Input placeholder="请输入视图参数" />
            </Form.Item>
            <Button onClick={addParama}>参数管理</Button>
          </div>
        </Form.Item>
        <Form.Item
          label="视图参数"
          name="WebParam"
          style={{
            display: form.getFieldValue('WebPage') === 'GisGatherProjectView' ? 'flex' : 'none',
          }}
        >
          <Select placeholder="选择视图参数" showSearch>
            {['一键入库', 'edit'].map((item, index) => (
              <Option key={index} value={item}>
                {item}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label="手持标签" name="MobileLabel">
          <Input placeholder="请输入手持标签" />
        </Form.Item>
        <Form.Item label="手持视图" name="MobilePage">
          {/* <Input placeholder="请输入手持视图" /> */}
          <Select placeholder="请输入手持视图" showSearch optionLabelProp="label">
            <Option value="FeedbackAccount" label="FeedbackAccount">
              <div style={{ marginRight: '6px' }}>
                <Tag color="blue">标准</Tag>
                FeedbackAccount：工单反馈标准视图
              </div>
            </Option>
            <Option value="GisGatherProjectView" label="GisGatherProjectView">
              <div style={{ marginRight: '6px' }}>
                <Tag color="purple">专用</Tag>
                GisGatherProjectView：管网采集辅助视图
              </div>
            </Option>
          </Select>
        </Form.Item>
        {/* <Form.Item label="手持参数" name="MobileParam">
          <Input placeholder="请输入手持参数" />
        </Form.Item> */}
        <Form.Item
          label="手持参数"
          style={{
            display: form.getFieldValue('MobilePage') === 'FeedbackAccount' ? 'flex' : 'none',
          }}
        >
          <div style={{ display: 'flex' }}>
            <Form.Item name="MobileParam" style={{ marginBottom: '0', flex: '1' }}>
              <Input placeholder="请输入手持参数" />
            </Form.Item>
            <Button onClick={() => addParama(false)}>参数管理</Button>
          </div>
        </Form.Item>
        <Form.Item
          label="手持参数"
          name="MobileParam"
          style={{
            display: form.getFieldValue('MobilePage') === 'GisGatherProjectView' ? 'flex' : 'none',
          }}
        >
          <Select placeholder="选择手持参数" showSearch>
            {['一键入库', 'edit'].map((item, index) => (
              <Option key={index} value={item}>
                {item}
              </Option>
            ))}
          </Select>
        </Form.Item>
      </Form>
      <ParmarModal
        pageUrl={form.getFieldsValue().WebParam}
        handleCancel={() => setShowParmarModal(false)}
        visible={showParmarModal}
        parmarCallBack={url => {
          form.setFieldsValue({ WebParam: url });
          setShowParmarModal(false);
        }}
      />
      <MobileParmarModal
        pageUrl={form.getFieldsValue().MobileParam}
        handleCancel={() => setShowMobileParmarModal(false)}
        visible={showMobileParmarModal}
        parmarCallBack={url => {
          form.setFieldsValue({ MobileParam: url });
          setShowMobileParmarModal(false);
        }}
      />
    </Modal>
  );
};
export default AddView;
