import React, { useEffect, useState } from 'react';
import { getFlowNodeExtendPage, operateFlowNodeExtendPage } from '@/services/flow/flow';
import { Form, Modal, Input, notification, Button, Select, Tag } from 'antd';

import ParmarModal from './ParmarModal';

const { Option } = Select;
const ProcessConfig = props => {
  const { onSubumit, handleCancel, visible, msg, flowNodeId, modalType, title } = props;
  const [showParmarModal, setShowParmarModal] = useState(false);
  const [treeData, setTreeData] = useState(['FeedbackAccount', 'GisGatherProjectView']);
  const [paramValue, setParamValue] = useState(['一键入库', 'edit']);
  const [selectValue, setSelectValue] = useState('');
  const [form] = Form.useForm();
  useEffect(() => {
    form.resetFields();
    if (visible) {
      if (modalType === 'edit') {
        getFormData();
      } else {
        form.setFieldsValue({ FlowName: title });
      }
    }
  }, [visible]);
  // 获取表单回显
  const getFormData = () => {
    getFlowNodeExtendPage({ flowNodeExtendPageId: msg.ID }).then(res => {
      if (res.code === 0) {
        form.setFieldsValue({ ...res.data, FlowName: title });
        setSelectValue(res.data.WebPage);
      }
    });
  };
  // 提交表单
  const onFinish = () => {
    form.validateFields().then(validate => {
      if (validate) {
        let obj = {};
        if (modalType === 'add') {
          obj = validate;
        } else {
          obj = { ...validate, ID: msg.ID };
        }
        operateFlowNodeExtendPage(obj, flowNodeId)
          .then(res => {
            if (res.code === 0) {
              notification.success({
                message: '提示',
                duration: 3,
                description: '编辑成功',
              });
              onSubumit();
            } else {
              notification.error({
                message: '提示',
                duration: 3,
                description: res.msg,
              });
            }
          })
          .catch(() => {
            notification.error({
              message: '提示',
              duration: 3,
              description: '网络异常',
            });
          });
      }
    });
  };

  // 添加功能路劲参数
  const addParama = () => {
    console.log(form.getFieldValue('WebParam'));
    setShowParmarModal(true);
  };

  const inputType = value => {
    console.log(value);
    if (value) {
      form.setFieldsValue({ WebPage: value });
      setSelectValue(value);
    }
  };

  const changeValue = e => {
    form.setFieldsValue({ WebPage: e });
    setSelectValue(e);
  };

  const changeParam = value => {
    form.setFieldsValue({ WebParam: value });
  };
  return (
    <Modal
      title="流程节点辅助视图配置"
      visible={visible}
      onOk={onFinish}
      onCancel={handleCancel}
      maskClosable={false}
      destroyOnClose
    >
      <Form
        form={form}
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 18 }}
        initialValues={{ remember: true }}
      >
        <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="请输入前端视图"
            onSearch={inputType}
            showSearch
            onChange={changeValue}
            optionLabelProp="label"
            value={selectValue}
            style={{ marginLeft: '-3px' }}
          >
            <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>
            {/* {treeData
              ? treeData.map((item, index) => (
                  <Option key={index} value={item}>
                    {item}
                  </Option>
                ))
              : ''} */}
          </Select>
        </Form.Item>
        <Form.Item label="视图参数" name="WebParam">
          {selectValue === 'FeedbackAccount' && (
            <div style={{ display: 'flex' }}>
              <Form.Item name="WebParam" style={{ marginBottom: 0, width: '100%' }}>
                <Input placeholder="请输入视图参数" style={{ width: '100%' }} />
              </Form.Item>
              <Button onClick={addParama}>参数管理</Button>
            </div>
          )}
          {selectValue === 'GisGatherProjectView' && (
            <Form.Item name="WebParam" style={{ marginBottom: 0, width: '100%' }}>
              <Select
                placeholder="选择视图参数"
                onSearch={changeParam}
                showSearch
                style={{ marginLeft: '-3px' }}
              >
                {paramValue
                  ? paramValue.map((item, index) => (
                      <Option key={index} value={item}>
                        {item}
                      </Option>
                    ))
                  : ''}
              </Select>
            </Form.Item>
          )}
          {selectValue !== 'FeedbackAccount' && selectValue !== 'GisGatherProjectView' && (
            <Form.Item name="WebParam" style={{ marginBottom: 0, width: '100%' }}>
              <Input placeholder="请输入视图参数" />
            </Form.Item>
          )}
        </Form.Item>
        <Form.Item label="手持标签" name="MobileLabel">
          <Input placeholder="请输入手持标签" />
        </Form.Item>
        <Form.Item label="手持视图" name="MobilePage">
          <Input placeholder="请输入手持视图" />
        </Form.Item>
        <Form.Item label="手持参数" name="MobileParam">
          <Input placeholder="请输入手持参数" />
        </Form.Item>
      </Form>
      <ParmarModal
        pageUrl={form.getFieldsValue().WebParam}
        handleCancel={() => setShowParmarModal(false)}
        visible={showParmarModal}
        parmarCallBack={url => {
          form.setFieldsValue({ WebParam: url });
          setShowParmarModal(false);
        }}
      />
    </Modal>
  );
};
export default ProcessConfig;
