import { Card, Col, Input, Row, Modal, Empty, Collapse } from 'antd';
import { Form } from '@ant-design/compatible';
import { useForm } from 'antd/lib/form/Form';
import React, { useMemo, useState } from 'react';
import { connect } from 'dva';
import CommentContent from '@/components/CommentContent';
import AttachmentTable from '@/components/AttachmentTable';
import DIYTable from '@/components/DDComponents/DIYTable';

const { confirm } = Modal;
const { Panel } = Collapse;

const FormAndFilesNode = props => {
  const { formData, excelFileList, comment, version, loading } = props;

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

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

          <Col span={12}>
            <AttachmentTable version={version} canDelete={version.last_version == 0} />
          </Col>
        </Row>
      </Card>
    );
  }

  if (excelFileList?.length > 0) {
    return (
      <Card title="附件信息">
        <AttachmentTable version={version} canDelete={version.last_version == 0} />
      </Card>
    );
  }
  return null;
};

const renderFrom = data => {
  if (!data) return <Empty description="没有表单信息" />;
  try {
    const ding_schema = JSON.parse(data)[0];
    const formData = JSON.parse(ding_schema)?.formComponentValues;
    formData.forEach(item => {
      if (item.type === 'DIYTable') {
        item.value = item.value.map(row => JSON.parse(row));
      }
    });
    if (formData.length == 0) return <Empty description="没有表单信息" />;
    return (
      <>
        {formData.map((item, idx) => {
          if (item.type === 'DIYTable') {
            return (
              <Form.Item
                key={`FormAndFilesNode_${item.id}`}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                label={item.name}
              >
                <DIYTable key={item.id} table={item} columns={item.value} displayOnly />
              </Form.Item>
            );
          }

          const value = item.value.join(',');
          return (
            <Form.Item
              key={`FormAndFilesNode_${item.id}`}
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 14 }}
              label={item.name}
            >
              <div
                style={{
                  width: '100%',
                  paddingLeft: '20px',
                  backgroundColor: '#ececef',
                  border: '1px solid #bcb9b9',
                  borderRadius: '4px',
                  minHeight: '40px',
                }}
              >
                {value}
              </div>
            </Form.Item>
          );
        })}
      </>
    );
  } catch {
    return <Empty description="没有表单信息" />;
  }
};
export default connect(({ detail, loading }) => ({
  comment: detail.comment,
  loading,
}))(FormAndFilesNode);