/* eslint-disable no-unused-expressions */
/* eslint-disable no-else-return */
/* eslint-disable prefer-destructuring */
import React, { useEffect, useState, useRef } from 'react';
import { GetMaplayerByTerminalType, GetLayerList, GetLayerFields, GetFormAccountTableList } from '@/services/flow/flow';
import {
  CreateTablePost,
  getTableInfo,
  updateTablePost,
  GetDefaultTableFields,
  reloadTableFields,
  removeFields,
} from '@/services/tablemanager/tablemanager';
import {
  Form,
  Modal,
  notification,
  Select,
  TreeSelect,
  Tag,
  Row,
  Col,
  Space,
  Tooltip,
  Button,
  Input,
  message,
} from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import styles from './index.less';
import logo from '@/assets/images/icons/值映射.png';
import { LoadEventFields } from '@/services/tablemanager/tablemanager';
const { Option } = Select;
const { TreeNode } = TreeSelect;

const colors = ['purple', 'geekblue', 'blue', 'cyan', 'green', 'gold', 'orange', 'volcano', 'red', 'magenta']

const AddModal = props => {
  const {
    onSubumit,
    handleCancel,
    visible,
    msg,
    modalType,
    tableField,
    addIndex,
    tableData,
    eventNames = [],
    tableName,
  } = props;
  const [schemeValue, setSchemeValue] = useState([]);
  const [layerValue, setLayerValue] = useState([]);
  const [layerFields, setLayerFields] = useState([]);
  const layerData = useRef({});
  const [type, setType] = useState();
  const [flag, setFlag] = useState(0); // 刷新
  const [tableType, setTableType] = useState();
  // const [tableName, setTableName] = useState();
  const [ruleList, setRuleList] = useState([]);
  const [tableShape, setTableShape] = useState();
  const [targetFileds, setTargetFileds] = useState([]); // 目标字段数据源
  const [fileds, setFileds] = useState([]); // 源字段数据源

  const [form] = Form.useForm();
  useEffect(() => {
    if (visible) {
      let arr = [];
      tableData.map(i => {
        arr.push(i.EvenId);
      });
      setRuleList(arr);
      if (modalType === 'edit') {
        // let users = []
        // let Fields = ''
        // let defaultValue = ''
        // if (msg.Config) {
        //   let config = JSON.parse(msg.Config)
        //   let toData = config?.mapping[0]?.toData
        //   let fromData = config?.mapping[0]?.fromData || {}
        //   if (fromData) {
        //     Fields = fromData?.filed || ''
        //     defaultValue = fromData?.defaultValue || ''
        //   }
        //   if (toData?.length) {
        //     toData.forEach(v => {
        //       users.push({ nodeName: `${v.tableName},${v.type},${v.caseFiled}`, filed: v.filed })
        //     })
        //   }
        // }
        // mapFields: [{ filed: '', targetFiled: '' }]
        let mapFields = []
        if (msg.MapFields.length) {
          msg.MapFields.forEach(item => {
            mapFields.push({
              filed: item.ParentFlowMapFieldName,
              targetFiled: item.SubFlowMapFieldName
            })
          })
        }
        form.setFieldsValue({ EvenId: msg.SubFlowEventConfigID, mapFields });
        // setTableShape(msg.tableShape);
        // setTableType(msg.tableType);
        // setTableName(msg.TableName);
        // if (props.tableName) {
        //   targetAccount()
        // }
      }
    } else {
      // layerData.current = {};
      form.resetFields();
      // setLayerFields([]);
      // setLayerValue([]);
      // setSchemeValue([]);
    }
  }, [visible])

  useEffect(() => {
    if (!eventNames.length) return
    if (modalType === 'add') {
      console.log(eventNames, 'eventNameseventNames');

      form.setFieldsValue({ EvenId: eventNames[0].ID })
      getTargetFieldData(eventNames[0].tableName)
    } else if(modalType === 'edit') {
      console.log(msg,'msgmsgmsgmsg');
      let obj = eventNames.find(item => item.ID == msg.SubFlowEventConfigID)
      console.log(obj,'objobjobjobjobjobj');
      
      msg.SubFlowEventConfigID && obj && getTargetFieldData(obj.tableName)
    }
  }, [eventNames, modalType, visible, msg])

  useEffect(() => {
    getTargetFieldData(tableName, false)
  }, [tableName])

  const getTargetFieldData = async (value, target = true) => {
    LoadEventFields({ eventTableName: value, distinctFields: '' }).then(res => {
      if (res.data.root) {
        target ? setTargetFileds(res.data.root) : setFileds(res.data.root)
      } else {
        target ? setTargetFileds([]) : setFileds([])
      }
    });
  }

  // 提交表单
  const onFinish = () => {
    form.validateFields().then(validate => {
      if (validate) {
        let values = form.getFieldsValue()
        let targetEvent = eventNames.find(item => item.ID === values.EvenId)
        console.log(values, tableName, eventNames.find(item => item.ID === values.EvenId), 'valuesssssss');
        // if (!values.Fields && !values.presetValue) {
        //   return message.info('请选择源字段或者默认值!')
        // }
        let result = {
          SubFlowEventConfigID: values.EvenId,
          SubFlowEventName: targetEvent.name,
          MapFields: values.mapFields.map(item => {
            return {
              ParentFlowMapFieldName: item.filed,
              ParentFlowMapTableName: tableName,
              SubFlowMapFieldName: item.targetFiled,
              SubFlowMapTableName: targetEvent.tableName
            }
          })
        }
        console.log(result, 'resultresultresult');
        onSubumit(result, modalType)
      }
    });
  };

  const targetAccount = () => {
    GetFormAccountTableList({ caseTableName: props.tableName })
      .then(res => {
        if (res.code === 0) {
          setLayerValue(res.data)
        }
      })
  }

  const targetField = (index) => {
    let { users } = form.getFieldsValue()
    let item = users[index]?.nodeName?.split(',')
    if (item.length === 3) {
      reloadTableFields({ tableName: item[0] })
        .then(res => {
          if (res.code === 0) {
            setLayerFields(res?.data?.root)
          }
        })
    } else {
      message.info('请选择目标台账!')
    }

  }

  const mapTree = org => {
    if (org.TableFields) {
      return (
        <TreeNode
          value={org.TableName}
          title={
            <>
              <span style={{ marginRight: '10px' }}>{org.TableName}</span>
              <Tag color={org.type === '关联表单' ? 'blue' : (org.type === '事件工单表' ? 'green' : 'geekblue')}>{org.type}</Tag>
            </>
          }
          disabled
        >
          {org.TableFields.map(item => mapTree(item))}
        </TreeNode>
      );
    }
    return <TreeNode value={org.FieldName} title={org.FieldName} key={org.FieldName} />;
  };

  const onValuesChange = (values) => {
    console.log(values, eventNames.find(item => item.ID === values.EvenId), 'valuesvaluesvalues');
    if (values.EvenId) {
      getTargetFieldData(eventNames.find(item => item.ID === values.EvenId).tableName)
    }
  }

  return (
    <div className={styles.AddAccount}>
      <Modal
        title="通用事件配置"
        visible={visible}
        onOk={onFinish}
        onCancel={handleCancel}
        maskClosable={false}
        destroyOnClose
        width={700}
        bodyStyle={{ padding: 15 }}
      >
        <Form
          form={form}
          labelCol={{ span: 4 }}
          // wrapperCol={{ span: 21 }}
          initialValues={{ mapFields: [{ filed: '', targetFiled: '' }] }}
          onValuesChange={onValuesChange}
        >
          <Form.Item
            label="事件选择"
            name="EvenId"
            rules={[
              { required: true },
              // {
              //   validator: (_, value) => {
              //     if (modalType === 'add' && ruleList.indexOf(value) !== -1) {
              //       return Promise.reject(new Error('规则名称已存在'));
              //     } else if (
              //       modalType === 'edit' &&
              //       ruleList.indexOf(value) !== -1 &&
              //       value !== msg.EvenId
              //     ) {
              //       return Promise.reject(new Error('规则名称已存在'));
              //     }

              //     return Promise.resolve();
              //   },
              // },
            ]}
          >
            <Select
              placeholder="请选择事件"
            // onFocus={() => targetField(index)}
            // onChange={(value) => changeTargetField(value, index)}
            >
              {
                eventNames.map(item => {
                  return (
                    <Option value={item.ID} key={item.ID}>
                      <span>{item.name}</span>
                    </Option>
                  );
                })
              }
            </Select>
          </Form.Item>
          {/* <Form.Item label="源字段" name="Fields">
            <TreeSelect
              showSearch
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              allowClear
              placeholder="请选择表单源字段"
              treeDefaultExpandAll
              showCheckedStrategy
            >
              <TreeNode
                value={'环境变量'}
                title={
                  <>
                    <span style={{ marginRight: '10px' }}>环境变量</span>
                  </>
                }
                disabled
              >
                <TreeNode value={'下一节点名称'} title={'下一节点名称'}></TreeNode>
              </TreeNode>
              {tableField && tableField.map(i => mapTree(i))}
            </TreeSelect>
          </Form.Item>
          <Form.Item label="默认值" name="presetValue" >
            <Input placeholder="请输入默认值" allowClear />
          </Form.Item> */}
          <Form.List name="mapFields" label='字段映射' style={{ width: '100%' }}>
            {(fields, { add, remove }) => (
              <>
                {
                  fields.map(({ key, name, fieldKey, ...restField }, index) => {
                    return (
                      <div key={key} style={{ display: 'flex', marginBottom: 8, alignItems: 'center', position: 'relative', padding: '0 30px 0 28px' }}>
                        <img style={{ position: 'absolute', left: 11, top: 5, height: '24px' }} src={logo} alt="" />
                        <Form.Item
                          {...restField}
                          name={[name, 'filed']}
                          label="源字段"
                          labelCol={{ span: 6 }}
                          style={{ width: '60%' }}
                          rules={[{ required: true, message: '不能为空' }]}
                        >
                          <Select
                            placeholder="请选择源字段"
                            showSearch
                          // onFocus={targetAccount}
                          sear
                          >
                            {
                              fileds.map(item => {
                                return (
                                  <Option value={item.fieldName} key={item.ID}>
                                    <span>{item.fieldName}</span>
                                  </Option>
                                );
                              })
                            }
                          </Select>
                        </Form.Item>
                        <Form.Item
                          {...restField}
                          name={[name, 'targetFiled']}
                          label="目标字段"
                          labelCol={{ span: 7 }}
                          rules={[{ required: true, message: '不能为空' }]}
                          style={{ width: '50%', paddingLeft: 10 }}
                        >
                          <Select
                            placeholder="请选择目标字段"
                            showSearch
                          // onFocus={() => targetField(index)}
                          // onChange={(value) => changeTargetField(value, index)}
                          >
                            {
                              targetFileds.map(item => {
                                return (
                                  <Option value={item.fieldName} key={item.ID}>
                                    <span>{item.fieldName}</span>
                                  </Option>
                                );
                              })
                            }
                          </Select>
                        </Form.Item>
                        {
                          index > 0 ? (
                            <Tooltip title="移除项">
                              <MinusCircleOutlined
                                onClick={() => remove(name)}
                                style={{
                                  fontSize: '20px',
                                  marginTop: '6px',
                                  marginLeft: '3px',
                                  color: '#fa5151',
                                  position: 'absolute',
                                  right: 0,
                                  top: 0,
                                }}
                              />
                            </Tooltip>
                          ) : null
                        }
                      </div>
                    )
                  })
                }
                <Button
                  type="dashed"
                  onClick={() => add()}
                  block
                  icon={<PlusOutlined />}
                  style={{ width: '564px', marginLeft: 115 }}
                >
                  新增项
                </Button>
              </>
            )}
          </Form.List>
        </Form>
      </Modal>
    </div>
  );
};
export default AddModal;