import DDComponents from '@/components/DDComponents';
import React, { useMemo, useState } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

const AuditDetailed = props => {
  // const [form] = Form.useForm();
  const { items, form } = props;

  const behavior = useMemo(() => {
    let data = {};
    let watchList = {};
    items.forEach(d => {
      const item = d.props;
      if (item.behaviorLinkage) {
        const key = item.id;
        item.behaviorLinkage.forEach(b => {
          const value = b.value;
          b.targets.forEach(t => {
            data[t.fieldId] = { key, value };
          });
          watchList[key] = true;
        });
      }
    });

    return data;
  }, [items]);

  const onFinish = values => {
    console.log(values);
  };

  const GetComponent = item => {
    const {
      id,
      label,
      bizAlias,
      required,
      placeholder,
      options,
      align,
      statField,
      hideLabel,
      objOptions,
      format,
      pushToAttendance,
      labelEditableFreeze,
      requiredEditableFreeze,
      unit,
      extract,
      link,
      payEnable,
      bizType,
      childFieldVisible,
      notPrint,
      verticalPrint,
      hiddenInApprovalDetail,
      disabled,
      notUpper,
      children, // 子控件
    } = item.props;
    // 判断是否属于关联项
    if (behavior[id]) {
      const { key, value } = behavior[id];
      let currentValue = form.getFieldValue(key);
      // 判断是否需要渲染
      if (currentValue instanceof Array) {
        if (currentValue?.indexOf(value) == -1) return null;
      } else {
        if (currentValue != value) return null;
      }
    }

    const component = DDComponents({ item });
    if (!component) return null;
    return (
      <Form.Item label={bizAlias || label}>
        {form.getFieldDecorator(id, {
          rules: [{ required }],
        })(component)}
        {notUpper == 1 && <p>大写</p>}
      </Form.Item>
    );
  };

  return (
    <Form layout="vertical" autoComplete="off">
      {items.map(item => GetComponent(item))}
    </Form>
  );
};

export default AuditDetailed;