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 WebPages = [
  {
    lable: 'FeedbackAccount：工单反馈标准视图',
    value: 'FeedbackAccount',
    type: '标准',
    color: 'blue',
  },
  {
    lable: 'GisGatherProjectView：管网采集辅助视图',
    value: 'GisGatherProjectView',
    type: '专用',
    color: 'purple',
  },
  {
    lable: 'CRMProductDetailView：CRM产品调拨辅助视图',
    value: 'CRMProductDetailView',
    type: '专用',
    color: 'purple',
  },
  {
    lable: 'XGWorkOrderView：申请人相关工单',
    value: 'XGWorkOrderView',
    type: '专用',
    color: 'purple',
  }
]

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 = () => {
    if (msg.WebPage === 'GisGatherProjectView' && msg.WebParam) {
      if (!Array.isArray(msg.WebParam)) {
        msg.WebParam = msg.WebParam?.split(',');
      }
    } else {
      msg.WebParam = [];
    }
    form.setFieldsValue(msg);
  };
  // 提交表单
  const onFinish = () => {
    form.validateFields().then(validate => {
      if (validate) {
        if (validate.WebPage === 'GisGatherProjectView' && validate.WebParam) {
          validate.WebParam = validate.WebParam.toString();
        }
        let obj = {};
        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="流程节点辅助视图配置"
      width={600}
      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="WebLabel">
          <Input placeholder="请输入前端标签" />
        </Form.Item>
        <Form.Item label="前端视图" name="WebPage">
          <Select placeholder="请输入前端视图" showSearch optionLabelProp="label">
            {
              WebPages.map(v => {
                return (
                  <Option value={v.value} label={v.value}>
                    <div style={{ marginRight: '6px' }}>
                      <Tag color={v.color}>{v.type}</Tag>
                      {v.lable}
                    </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 mode="multiple">
            {['一键入库', '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">
          <Select placeholder="请输入手持视图" showSearch optionLabelProp="label">
            {
              WebPages.map(v => {
                return (
                  <Option value={v.value} label={v.value}>
                    <div style={{ marginRight: '6px' }}>
                      <Tag color={v.color}>{v.type}</Tag>
                      {v.lable}
                    </div>
                  </Option>
                )
              })
            }
          </Select>
        </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;
