import { _ as _extends } from '../_rollupPluginBabelHelpers-736b301a.js';
import React__default, { useState } from 'react';
import { Row, Col, Button } from 'antd';
import IconFont from '../IconFont/index.js';
import { I as InfoBox } from '../index-4c050215.js';
import BetweenBox from '../BetweenBox/index.js';
import '@zenview/micro-utils';

const TwoColumnBox = ({
  className = '',
  collapsible = true,
  leftContent,
  children
}) => {
  const [collapsed, setCollapsed] = useState(false);
  return /*#__PURE__*/React__default.createElement("div", {
    className: `two-column-layout-container ${className}`
  }, /*#__PURE__*/React__default.createElement("div", {
    className: `two-column-aside ${collapsed ? 'hide-left-aside' : ''}`
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "two-colum-left-wrapper"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "two-colum-left-content"
  }, leftContent, collapsible && /*#__PURE__*/React__default.createElement("span", {
    onClick: () => setCollapsed(!collapsed),
    className: "left-aside-slider-btn"
  }, /*#__PURE__*/React__default.createElement(IconFont, {
    type: collapsed ? 'icon-S_Arrow_SmallRight' : 'icon-S_Arrow_SmallLeft'
  }))))), /*#__PURE__*/React__default.createElement("div", {
    className: "two-column-content"
  }, children));
};

function BarBox({
  leftContent,
  rightContent,
  children,
  height = 44,
  style = {}
}) {
  return /*#__PURE__*/React__default.createElement(Row, {
    className: "content-bar-box",
    style: {
      height,
      ...style
    }
  }, /*#__PURE__*/React__default.createElement(Col, {
    className: "left-bar-content"
  }, leftContent), /*#__PURE__*/React__default.createElement(Col, {
    className: "mid-bar-content"
  }, children), /*#__PURE__*/React__default.createElement(Col, {
    className: "right-bar-content"
  }, rightContent));
}

const modeDicts = [{
  value: 'large',
  label: '大图',
  icon: 'icon-S_View_ArrayNum2'
}, {
  value: 'normal',
  label: '标准',
  icon: 'icon-S_View_ArrayNum1'
}, {
  value: 'low',
  label: '小图',
  icon: 'icon-S_View_ArrayNum3'
}];
function CardMode({
  selectKey,
  onChange
}) {
  return /*#__PURE__*/React__default.createElement("span", {
    className: "card-mode-box"
  }, modeDicts.map(v => /*#__PURE__*/React__default.createElement(Button, {
    className: selectKey === v.value ? 'select-mode-active' : '',
    onClick: () => onChange(v.value),
    title: v.label,
    key: v.value
  }, /*#__PURE__*/React__default.createElement(IconFont, {
    type: v.icon
  }))));
}

function ListBox({
  title,
  titleExt,
  children,
  className = '',
  style,
  contentStyle
}) {
  return /*#__PURE__*/React__default.createElement("div", {
    className: `list-box-layout ${className}`,
    style: style
  }, title && /*#__PURE__*/React__default.createElement(BetweenBox, {
    className: "list-box-title-wrapper",
    left: title,
    right: titleExt
  }), /*#__PURE__*/React__default.createElement("div", {
    className: "list-box-content-wrapper",
    style: contentStyle
  }, children));
}

const grid = {
  xxl: 22,
  xl: 22,
  lg: 23,
  md: 23,
  sm: 23,
  xs: 23
};

const ContentBox = ({
  className = '',
  contentGrid = grid,
  children
}) => {
  return /*#__PURE__*/React__default.createElement(Row, {
    className: `single-column-layout-container ${className}`
  }, /*#__PURE__*/React__default.createElement(Col, _extends({
    className: "single-column-content"
  }, contentGrid), children));
};
ContentBox.TwoColumnBox = TwoColumnBox;
ContentBox.BarBox = BarBox;
ContentBox.CardMode = CardMode;
ContentBox.InfoBox = InfoBox;
ContentBox.ListBox = ListBox;

export { ContentBox as default };
//# sourceMappingURL=index.js.map
