import { ProCard } from '@ant-design/pro-components';
import { CardProps } from 'antd';
// 此模块使用的 ProCardType
export interface ProCardTypeProps extends CardProps {
  colSpan?: string;
  headerBordered?: boolean;
}

// 当前组件类型
type TreeAndTableListProps = {
  leftCard?: ProCardTypeProps;
  rightCard?: ProCardTypeProps;
  leftDom: any;
  rightDom: any;
};

const TreeAndTableList: React.FC<TreeAndTableListProps> = (props) => {
  // 业务层接收
  const { leftCard, rightCard, leftDom, rightDom } = props;

  // 统一配置
  let finalLeftCard: ProCardTypeProps = {
    // 左侧卡片
    headStyle: { paddingTop: 24, paddingLeft: 20, paddingRight: 20 },
    bodyStyle: {paddingLeft: 20, paddingRight: 20},
    colSpan: '22%',
  };
  let finalRightCard: ProCardTypeProps = {
    headStyle: { padding: 0, margin: 0, background: 'transparent' },
    bodyStyle: { padding: 0, margin: 0 },
    headerBordered: true,
    // 右侧卡片
    colSpan: '76.5%',
  };
  if (leftCard) {
    Object.assign(finalLeftCard, leftCard);
  }

  if (rightCard) {
    Object.assign(finalRightCard, rightCard);
  }
  return (
    <>
      <ProCard
        style={{ display: 'flex', width: '100%', background: 'transparent' }}
        bodyStyle={{
          padding: 0,
          margin: 0,
          display: 'flex',
          justifyContent: 'space-between',
        }}
      >
        {/*  后续依据业务需要动态调整 */}
        <ProCard {...finalLeftCard}>{leftDom}</ProCard>
        <ProCard {...finalRightCard}>{rightDom}</ProCard>
      </ProCard>
    </>
  );
};

export default TreeAndTableList;