import React, { useState, useEffect } from 'react';
import { CreateFlow } from '@/services/workflow/workflow';
import { Form, Modal, Input, notification, Select, Radio } from 'antd';
const { Option } = Select;
const { TextArea } = Input;
const FlowModal = props => {
  const { onSubumit, handleCancel, visible, msg, modalType, treeData, keep } = props;
  const [form] = Form.useForm();
  const [flag, setFlag] = useState(0);
  useEffect(() => {
    form.resetFields();
    if (visible) {
      console.log(keep);
      console.log(msg);
      if (modalType === 'edit') {
        getFormData();
      } else {
        form.setFieldsValue({ Type: msg.name });
      }
    }
  }, [visible]);
  // 获取表单回显
  const getFormData = () => {
    form.setFieldsValue({ ...msg });
    setFlag(flag + 1);
    console.log(form.getFieldValue('Prefix'), 'fffff');
  };
  // 提交表单
  const onFinish = () => {
    form.validateFields().then(validate => {
      if (validate) {
        let obj = {};
        if (modalType === 'add') {
          obj = validate;
        } else {
          obj = { ...validate, flowID: msg.FlowID };
        }
        CreateFlow(obj)
          .then(res => {
            if (res.code === 0) {
              notification.success({
                message: '提示',
                duration: 3,
                description: modalType === 'add' ? '新增成功' : '编辑成功',
              });
              onSubumit();
            } else {
              notification.error({
                message: '提示',
                duration: 3,
                description: res.msg,
              });
            }
          })
          .catch(() => {
            notification.error({
              message: '提示',
              duration: 3,
              description: '网络异常',
            });
          });
      }
    });
  };
  const changeValue = (changedFields, allFields) => {
    if (changedFields[0].name[0] === 'Prefix') {
      setFlag(flag + 1);
    }
  };
  return (
    <Modal
      title={`${modalType === 'edit' ? '编辑' : '创建'}流程`}
      visible={visible}
      onOk={onFinish}
      onCancel={handleCancel}
      maskClosable={false}
      destroyOnClose
    >
      <Form
        form={form}
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 18 }}
        onFieldsChange={changeValue}
      >
        <Form.Item
          label="流程名称"
          name="FlowName"
          rules={[
            {
              required: true,
              message: '请输入流程名称',
            },
            {
              validator: (rule, value) => {
                let aa = form.getFieldValue().FlowName;
                if (modalType === 'add' && keep.indexOf(aa) != -1) {
                  return Promise.reject('流程名称已存在');
                }
                if (modalType === 'edit' && keep.indexOf(aa) != -1 && aa != msg.FlowName) {
                  return Promise.reject('流程名称已存在');
                }
                return Promise.resolve();
              },
            },
          ]}
        >
          <Input placeholder="请输入流程名称" />
        </Form.Item>
        <Form.Item
          label="分组信息"
          name="Type"
          rules={[
            {
              required: true,
              message: '请选择分组',
            },
          ]}
        >
          <Select
            showSearch
            filterOption={false}
            allowClear
            onSearch={value => {
              if (value) {
                form.setFieldsValue({ Type: value });
              }
            }}
          >
            {treeData.map(item => (
              <Option value={item.name} key={item.name}>
                {item.name}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label="编码前缀"
          name="Prefix"
          rules={[
            {
              required: true,
              message: '请输入编码前缀',
            },
          ]}
        >
          <Input placeholder="请输入编码前缀" maxLength={12} />
        </Form.Item>
        <Form.Item label="流程描述" name="Text">
          <Input placeholder="请输入流程描述" />
        </Form.Item>
        <Form.Item label="流程结束" name="FlowEndBehavior" initialValue={0}>
          <Radio.Group>
            <Radio value={0}>不做任何事情</Radio>
            <Radio value={1}>直接关闭事件</Radio>
            <Radio value={2}>事件转为待审核</Radio>
            <Radio value={3}>重新处理事件</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label="前端样式"
          name="WebPage"
          initialValue="多表在办显示"
          rules={[{ required: true, message: '请选择前端样式' }]}
        >
          <Select placeholder="请选择前端样式">
            <Option value="多表在办显示">多表在办显示</Option>
            <Option value="多表显示">多表显示</Option>
            {/* <Option value="表堆叠显示">表堆叠显示</Option> */}
            {/* <Option value="分派节点显示">分派节点显示</Option> */}
          </Select>
        </Form.Item>
        <Form.Item label="编码样式" name="UseFixedCodingRule" initialValue>
          <Radio.Group>
            <Radio value={false}>
              {form.getFieldValue('Prefix')}-{new Date().getFullYear()}-0000001 (前缀长度 + 13 位)
            </Radio>
            <Radio value>
              {form.getFieldValue('Prefix')}
              {'000000000001'.slice(form.getFieldValue('Prefix')?.length)}(始终12位)
            </Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="接口配置" name="InterfaceConfig">
          <TextArea placeholder="请填写接口配置" />
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default FlowModal;
