import React from 'react';
import { config } from '../component/base/config';
import { transferAttr } from '../component/base/_utils/transferAttr';
import styles from './index.less';

const DetailForm = (props: any) => {
    const { data, rowData, title, goEdit, hideEditBtn } = props;
    const renderDetailForm = (item: any) => {
        const { columnType, columnAttrObj, value, renderDetailForm } = item;
        let detailConfig;
        if (typeof renderDetailForm === 'function') {
            detailConfig = renderDetailForm({ cellData: value, rowData, columnConfig: item });
        } else {
            detailConfig = config[String(columnType)] || config['1'];
        }
        const DetailComp: any = detailConfig.detailComp;
        const cellRenderProps: any = detailConfig.cellRenderProps || {};

        const newProps = {
            ...(detailConfig.componentAttr || {}),
            ...(columnAttrObj || {}),
        };
        const transferColumn = transferAttr(columnType, newProps);
        return (
            <DetailComp
                value={value}
                rowData={rowData}
                columnConfig={item}
                componentAttr={transferColumn}
                formatter={detailConfig.getFormatter}
                cellRenderProps={cellRenderProps}
                origin="detailForm"
                className={styles.item}
            />
        );
    };
    const renderBtn = () => {
        return (
            <div
                role="presentation"
                className={styles.editClick}
                onClick={() => {
                    return goEdit('editPage');
                }}
            >
                <span className={styles.detailEdit}>编辑</span>
            </div>
        );
    };
    return (
        <div className={styles.wrap}>
            <div className={styles.titleRow}>
                <div className={styles.titleCls}>{title}</div>
                {!hideEditBtn && renderBtn()}
            </div>
            <div id="gotop" className={styles.formWrap}>
                {data.map((item: any, index: number) => {
                    const border =
                        index === 0
                            ? { border: '1px solid #ECECEC' }
                            : {
                                  borderBottom: '1px solid #ECECEC',
                                  borderLeft: '1px solid #ECECEC',
                                  borderRight: '1px solid #ECECEC',
                              };
                    return (
                        <div key={index} className={styles.row} style={border}>
                            <div className={styles.listLeft}>{`${item.columnChsName}：`}</div>
                            <div className={styles.listRight}>{renderDetailForm(item)}</div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
};
export default DetailForm;