import React, { Fragment, useEffect, useRef } from 'react';
import { WhiteSpace, WingBlank } from 'antd-mobile';

export default function MobileCard(props) {
  const { value = {}, onChange, json } = props;
  let otherProps = {};
  if (json?.otherProps) {
    otherProps = json?.otherProps;
    try {
      // mode = multiple 就支持下拉多选了
      otherProps = new Function(otherProps)();
    } catch (e) {
      console.log('MobileCard组件获取otherProps 报错', e);
      otherProps = null;
    }
  }
  if(!otherProps){
    return null;
  }
  const dataSource = value?.dataSource || otherProps?.defaultDataSource || [];
  const { columns = [], primaryKey = '', style = {} } = otherProps;
  console.log(otherProps);
  return (
    <>
      {dataSource.map((g, index) => {
        return (
          <div key={g[primaryKey]} style={style}>
            <WingBlank>
              {columns.map((c, cIndex) => {
                const { style: cStyle, data: cData } = c;
                return (
                  <div key={c.key} style={cStyle || {}}>
                    {cData.map((h, hIndex) => {
                      let hProps = h.props || {};
                      const clickFunction =
                        typeof hProps.handleClick === 'function'
                          ? () => {
                              return hProps.handleClick(g, h.key || h, value);
                            }
                          : undefined;
                      if (h.diyProps && typeof h.diyProps === 'function') {
                        hProps = h.diyProps(g, h.key || h, value) || {};
                      }
                      return (
                        <div style={hProps.style} onClick={clickFunction} key={hIndex}>
                          {hProps.children ? (
                            <>{hProps.children}</>
                          ) : (
                            <>
                              {h.type === 'dataIndex' && index + 1}
                              {(h.type === 'dataSource' && g[h.key]) || ''}
                              {h.type === 'chinese' && h.value}
                            </>
                          )}
                        </div>
                      );
                    })}
                  </div>
                );
              })}
            </WingBlank>
          </div>
        );
      })}
    </>
  );
}
