import * as React from 'react';
import { CountProps } from 'src/types/op-table';
import { CnBalloon, CnIcon } from '@alife/cn-ui';
import classnames from 'classnames';

/**
 *
 *
 * <Table.Header>
 *  <div>订单号: 12312312</div>
 *  <div>拣选号： 123092103129 | 蓝号 01</div>
 * </Table.Header>
 *
 */

export default function Count(props: CountProps) {
  const { dataSource = [] } = props;
  return (
    <div className='op-table-count'>
      {dataSource.map((item) => {
        const { balloon, onClick } = item;
        let type = ''; // icon类型
        let cls = ''; // icon自定义样式类
        if (balloon && balloon.children) {
          type = 'icon-help-color';
          cls = 'icon-green';
        } else if (onClick instanceof Function) {
          type = 'icon-triangle-right-fill';
          cls = 'icon-black';
        }
        const icon = (
          <CnIcon
            data-hottag='cn-table.count.icon'
            type={type}
            className={classnames('item-icon', cls)}
            onClick={onClick}
          />
        );
        return (
          <div className='count-item' key={item.label}>
            <span className='item-value'>{item.value}</span>
            <span className='item-label'>
              {item.label}
              {balloon && balloon.children ? (
                <CnBalloon
                  v2
                  className='op-balloon'
                  align='t'
                  closable={false}
                  trigger={icon}
                >
                  {item?.balloon?.children || item.label}
                </CnBalloon>
              ) : null}
            </span>
          </div>
        );
      })}
    </div>
  );
}