import { Grid } from '@alicloudfe/components';
import { ProSkeletonRaw } from '../../..';
import { usePrefixCls } from '@teamix/utils';
import React from 'react';
import { Ellipsis, LabelIconTip } from '../../../field';
import './index.scss';
var cls = usePrefixCls('teamix-pro-info-item');
var Row = Grid.Row,
  Col = Grid.Col;
var ProInfoItem = function ProInfoItem(prop) {
  var value = prop.value,
    label = prop.label,
    baseInfoLayout = prop.baseInfoLayout,
    headerInfoLayout = prop.headerInfoLayout,
    loading = prop.loading,
    tooltip = prop.tooltip,
    tooltipIcon = prop.tooltipIcon,
    valueType = prop.valueType,
    render = prop.render,
    alignItems = prop.alignItems;
  // 判断是否需要居中
  var isAlignItemsCenter = function isAlignItemsCenter() {
    if (typeof render !== 'function') {
      var type = render === null || render === void 0 ? void 0 : render.type;
      if (valueType === 'selectGroup') {
        return true;
      }
      if (type === 'tag' || type === 'statusIconTag' || type === 'eventLevelTag' || type === 'warningLevelTag') {
        return true;
      }
    }
    return false;
  };
  if (baseInfoLayout) {
    var labelCol = baseInfoLayout.labelCol,
      wrapperCol = baseInfoLayout.wrapperCol;
    return /*#__PURE__*/React.createElement("div", {
      className: cls('')
    }, /*#__PURE__*/React.createElement(Row, {
      gutter: 10,
      className: cls({
        'base-row': true,
        'base-row-center': isAlignItemsCenter()
      }),
      style: alignItems ? {
        alignItems: alignItems
      } : {}
    }, /*#__PURE__*/React.createElement(Col, {
      span: labelCol === null || labelCol === void 0 ? void 0 : labelCol.span,
      className: cls('label')
    }, /*#__PURE__*/React.createElement(Ellipsis, {
      tooltip: label
    }, /*#__PURE__*/React.createElement(LabelIconTip, {
      label: label,
      tooltip: tooltip,
      icon: tooltipIcon
    }))), /*#__PURE__*/React.createElement(Col, {
      span: wrapperCol === null || wrapperCol === void 0 ? void 0 : wrapperCol.span,
      className: cls('value')
    }, loading && /*#__PURE__*/React.createElement("div", {
      className: cls('base-skeleton-box')
    }, /*#__PURE__*/React.createElement(ProSkeletonRaw.Info.Item, null)), !loading && value)));
  }
  if (headerInfoLayout) {
    var _headerInfoLayout$lab = headerInfoLayout.labelGutter,
      labelGutter = _headerInfoLayout$lab === void 0 ? '16px' : _headerInfoLayout$lab;
    return /*#__PURE__*/React.createElement("div", {
      className: cls()
    }, /*#__PURE__*/React.createElement(Row, {
      className: cls({
        'header-row': true,
        'header-row-center': isAlignItemsCenter()
      }),
      style: {}
    }, /*#__PURE__*/React.createElement("div", {
      className: cls('header-label')
    }, /*#__PURE__*/React.createElement(LabelIconTip, {
      label: label,
      tooltip: tooltip,
      icon: tooltipIcon
    })), /*#__PURE__*/React.createElement("div", {
      className: cls('header-value'),
      style: {
        marginLeft: labelGutter
      }
    }, loading && /*#__PURE__*/React.createElement("div", {
      className: cls('base-skeleton-box')
    }, /*#__PURE__*/React.createElement(ProSkeletonRaw.Info.Item, null)), !loading && /*#__PURE__*/React.createElement(React.Fragment, null, value))));
  }
  return /*#__PURE__*/React.createElement(React.Fragment, null);
};
export default ProInfoItem;