import React, { useRef } from 'react';
import styles from './index.less';

const LayOutComponent = ({ layoutOptions, children }) => {
  const {
    layout,
    chartCount,
    tableConfigs,
    chartConfigs,
  } = layoutOptions;
  const { width, height } = tableConfigs[0];
  const layoutRef = useRef({
    layoutMap: {
      '上表下图': {
        flexDirection: 'column',
      },
      '上图下表': {
        flexDirection: 'column-reverse',
      },
      '左表右图': {
        flexDirection: 'row',
      },
      '左图右表': {
        flexDirection: 'row-reverse',
      },
    },
    chartLayoutMap: {
      '上表下图': {
        flexDirection: 'row',
      },
      '上图下表': {
        flexDirection: 'row',
      },
      '左表右图': {
        flexDirection: 'column',
      },
      '左图右表': {
        flexDirection: 'column',
      },
    },
  });
  return <div className={styles.wrapper} style={{ ...layoutRef.current.layoutMap[layout] }}>
    <div className={styles.tableWrapper} style={{ width, height }}>
      {children.find(item => item.key === 'table')}
    </div>
    <div className={styles.chartWrapper}
         style={{ ...layoutRef.current.chartLayoutMap[layout] }}>
      {children.find(item => item.key === 'chart')}
    </div>
  </div>;
};
export default LayOutComponent;
