import React, { useContext, useMemo } from 'react';

import {
  GenericCheckBoxContainer,
  GenericOperationContainer,
  GenericSurfaceMainAreaContainer
} from '../generic/index'


interface CellProperty {
  label?: string;
  name?: string;
  type?: string;
  group?: Array<CellProperty>;
  hiddenOn?: string;
  [propName: string]: any;
  surfaceItemWidth: number;
}


export const GenericSurfaceTr = (props: any) => {

  // 1. ui组成：
  //               checkbox(复选框) | list_columns(合并的主表列项列表) | buttons(操作列)
  //     左固定表格：需要 | 不需要 | 不需要
  //     主内容表格：不需要 | 需要 | 不需要
  //     右固定表格：不需要 | 不需要 | 需要


  const { primaryElevae, trClick, list_columns, fixColumns, source, seat, surfaceItemWidth } = props;


  const operations = list_columns[list_columns?.length - 1];

  return (
    <tr
      onClick={trClick}
      className="tbody-tr--column--common tbody-tr--column--gray"
      style={{
        height: primaryElevae
      }}
    >
      {/* 复选框列 */}
      {/* <GenericCheckBoxContainer
        checkbox={checkbox}
        seat={seat}
        className="tbody-td--column--surface--checkbox"
      >{checkboxEle}
      </GenericCheckBoxContainer> */}
      <td className="tbody-td--column tbody-td--column--hide tbody-td--column--hide--checkbox" />

      {/* 主表列 */}
      <GenericSurfaceMainAreaContainer
        source={source}
        btnLen={operations?.buttons?.length}
        fixColumns={fixColumns}
        list_columns={list_columns}
        surfaceItemWidth={surfaceItemWidth}
      />

      {/* 操作列 */}
      <td className="tbody-td--column thead-th--column tbody-td--opreation">
      </td>
      {/* <GenericOperationContainer
        source={source}
        buttons={operations?.buttons}
        seat={seat}
        limitNum={operations?.num}
      /> */}
    </tr>
  )
}