import { Card, Col, Row, Empty } from 'antd';
import { Form } from 'antd';
import { useMemo, useState } from 'react';
import AttachmentTable from '@/components/AttachmentTable';

const FormAndFilesNode = (props) => {
  const { formData, fileList } = props;

  const FormContent = useMemo(() => {
    return renderFrom(formData);
  }, [formData]);

  return (
    <Card title="审批信息">
      <Row gutter={20}>
        <Col span={12}>{FormContent}</Col>

        <Col span={12}>
          <AttachmentTable excelFileList={fileList} />
        </Col>
      </Row>
    </Card>
  );
};

const renderFrom = (data) => {
  if (!data) return <Empty description="没有表单信息" />;
  try {
    const formData = JSON.parse(data);
    if (formData.length == 0) return <Empty description="没有表单信息" />;
    return (
      <>
        {formData.map((item, idx) => {
          const value = item.value.join(',');
          return (
            <Form.Item
              key={`FormAndFilesNode_${idx}`}
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 14 }}
              label={item.name}
            >
              <div
                style={{
                  width: '100%',
                  padding: '4px 12px',
                  backgroundColor: '#ececef',
                  border: '1px solid #bcb9b9',
                  borderRadius: '4px',
                }}
              >
                {value}
              </div>
            </Form.Item>
          );
        })}
      </>
    );
  } catch {
    return <Empty description="没有表单信息" />;
  }
};
export default FormAndFilesNode;