import React from 'react';
import { evalExpression } from '../../../../../../../utils/tpl';
import { render as renderAmis } from '../../../../../../../index';
import './index.scss'

interface GenericSurfaceMainAreaProps {
  colSpan: number;
  list_columns?: any[];
  surfaceItemWidth: number;
  source: any;
}
const PrimaryTrAreaContainer: React.FC<GenericSurfaceMainAreaProps> = (props) => {
  const {
    colSpan,
    list_columns,
    surfaceItemWidth,
    source
  } = props;

  return (
    <td
      className="tbody-td--column thead-th--column tbody-td--column--surface--mainarea"
      colSpan={colSpan - 2}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        {
          list_columns!.map((item: any, index: number) => {
            if (item?.buttons) return null
            return (
              <div
                key={index}
                className="lion-table-primary-group"
                style={{
                  width: item?.width ? item?.width : surfaceItemWidth,
                  paddingLeft: index === 0 ? '5px' : ''
                }}
              >
                <div className="surface-group-container" style={{
                  flexDirection: item?.group?.length > 1 ? 'column' : 'row',
                  justifyContent: item?.group?.length > 1 ? 'center' : 'normal',
                  alignItems: item?.group?.length > 1 ? 'normal' : 'center'
                }}>
                  {
                    item?.group?.length > 0 ? item?.group?.map((group: any, groupIndex: number) => {
                      let hide = group?.hiddenOn ? evalExpression(group?.hiddenOn, { ...source }) : false;
                      if (hide) return null;
                      let temp_element;
                      if (group?.type) {
                        temp_element = renderAmis({
                          type: group?.type,
                          name: group?.name,
                          body: { ...group?.body, label: null }
                        }, {
                          data: source,
                          value: source[group.name],
                          style: {
                            overflow: 'hidden'
                          }
                        })
                      }
                      return (
                        <span
                          key={groupIndex}
                          className="surface-group-item"
                        >
                          {
                            group?.hideLabel ? (
                              group.type ? temp_element : source[group?.name]
                            ) : <><span
                              className="surface-group-item--label"
                            >
                              {group.label}：
                            </span>{group.type ? temp_element : source[group?.name]}</>
                          }
                        </span>
                      )
                    }) : [''].map((_) => {
                      let temp_element;
                      let hide = item?.hiddenOn ? evalExpression(item?.hiddenOn, { ...source }) : false;
                      if (hide) return null
                      if (item.type) {
                        temp_element = renderAmis({
                          type: item.type,
                          name: item.name,
                          body: { ...item?.body, label: null }
                        }, {
                          data: source,
                          value: source[item.name],
                          style: {
                            overflow: 'hidden'
                          }
                        });
                      }

                      return <span
                        key={_}
                        className="surface-group-item"
                      >
                        {item?.hideLabel ? (item.type ? temp_element : source[item?.name]) : <><span
                          className="surface-group-item--label"
                        >
                          {item.label}：
                        </span>{item.type ? temp_element : source[item?.name]}</>}
                      </span>
                    })
                  }
                </div>

              </div>
            )
          })
        }
      </div>

    </td>
  )
}

export const PrimaryTr: React.FC<{
  primaryElevae: number,
  trClick: () => void,
  list_columns: any[],
  source: any,
  surfaceItemWidth: number,
  colSpan: number
}> = (props) => {
  const { primaryElevae, trClick, list_columns, colSpan, source, surfaceItemWidth } = props;

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

      {/* 主表列 */}
      <PrimaryTrAreaContainer
        source={source}
        colSpan={colSpan}
        list_columns={list_columns}
        surfaceItemWidth={surfaceItemWidth}
      />

      {/* 操作列 */}
      <td className="tbody-td--column thead-th--column tbody-td--opreation">
      </td>
    </tr>
  )
}