import { Card, Col, Input, Row, Table } from 'antd';
import { Form } from '@ant-design/compatible';
import { useForm } from 'antd/lib/form/Form';
import PreviewFile from '@/components/PreviewFile';
import FileViewerModal from '@/components/FileViewer';
import { useState } from 'react';

const renderFrom = data => {
  if (!data) return;
  try {
    const ding_schema = JSON.parse(data)[0];
    const formData = JSON.parse(ding_schema)?.formComponentValues;
    return (
      <>
        {formData.map((item, idx) => {
          const value = item.value[0];
          return (
            <Form.Item
              key={`FormAndFilesNode_${idx}`}
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 18 }}
              label={item.name}
            >
              <div
                style={{
                  width: '100%',
                  paddingLeft: '20px',
                  backgroundColor: '#ececef',
                  border: '1px solid #bcb9b9',
                  borderRadius: '4px',
                }}
              >
                {value}
              </div>
            </Form.Item>
          );
        })}
      </>
    );
  } catch {
    return;
  }
};

const FormAndFilesNode = ({
  title,
  formData,
  excelFileData,
  loading,
  // setExportData,
  // setExcelFileVisible,
}) => {
  const [exportData, setExportData] = useState({});
  const [excelFileVisible, setExcelFileVisible] = useState(false);
  const columns = [
    {
      title: '附件',
      dataIndex: 'name',
      render: (text, item) => {
        return <PreviewFile name={item.name} src={item.url} />;
      },
    },
    {
      title: '预览',
      render: record => (
        <a
          style={{ marginLeft: 10 }}
          onClick={() => {
            setExportData(record);
            setExcelFileVisible(true);
          }}
        >
          预览
        </a>
      ),
    },
  ];
  return (
    <>
      {excelFileData && formData && (
        <Card title={title} type="inner" style={{ marginTop: 20 }} loading={loading}>
          <Row style={{ marginTop: '20px' }}>
            <Col span={12}>{renderFrom(formData)}</Col>
            <Col span={11} offset={1}>
              <Table rowKey="id" columns={columns} dataSource={excelFileData} />
            </Col>
          </Row>
        </Card>
      )}

      <FileViewerModal
        data={exportData}
        visible={excelFileVisible}
        onCancel={() => {
          setExcelFileVisible(false);
        }}
      />
    </>
  );
};

export default FormAndFilesNode;