import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-container {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n.paraui-v3-container > .container-body {\n  overflow: auto;\n}\n.paraui-v3-container.paraui-v3-tlr {\n  flex-direction: column;\n}\n.paraui-v3-container.paraui-v3-tlr > .container-top {\n  flex: none;\n  z-index: 1;\n}\n.paraui-v3-container.paraui-v3-tlr > .container-body {\n  display: flex;\n  overflow: hidden;\n}\n.paraui-v3-container.paraui-v3-tlr > .container-body > .container-body-right {\n  flex: 1;\n  overflow: auto;\n}\n.paraui-v3-container.paraui-v3-tlr > .container-body > .container-body-right > .container-right {\n  height: 100%;\n  overflow: auto;\n}\n.paraui-v3-container.paraui-v3-tlr > .container-body > .container-left {\n  flex: none;\n}\n.paraui-v3-container.paraui-v3-tlrb {\n  flex-direction: column;\n}\n.paraui-v3-container.paraui-v3-tlrb > .container-top {\n  flex: none;\n  z-index: 1;\n}\n.paraui-v3-container.paraui-v3-tlrb > .container-body {\n  display: flex;\n  overflow: hidden;\n}\n.paraui-v3-container.paraui-v3-tlrb > .container-body > .container-left {\n  flex: none;\n}\n.paraui-v3-container.paraui-v3-tlrb > .container-body > .container-right {\n  flex: 1;\n  overflow: auto;\n}\n.paraui-v3-container.paraui-v3-ltrb > .container-body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n.paraui-v3-container.paraui-v3-ltrb > .container-body > .container-right {\n  flex: 1;\n  overflow: auto;\n}\n.paraui-v3-container.paraui-v3-ltrb > .container-left {\n  flex: none;\n}\n.paraui-v3-container.paraui-v3-trb {\n  flex-direction: column;\n}\n.paraui-v3-container.paraui-v3-trb > .container-right {\n  flex: 1;\n  overflow: auto;\n}";
styleInject(css_248z);

// 通用布局容器
var Container = function Container() {
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var _props$className = props.className,
    className = _props$className === void 0 ? "" : _props$className,
    top = props.top,
    _props$topStyle = props.topStyle,
    topStyle = _props$topStyle === void 0 ? {} : _props$topStyle,
    left = props.left,
    _props$leftStyle = props.leftStyle,
    leftStyle = _props$leftStyle === void 0 ? {} : _props$leftStyle,
    right = props.right,
    _props$rightStyle = props.rightStyle,
    rightStyle = _props$rightStyle === void 0 ? {} : _props$rightStyle,
    bottom = props.bottom,
    _props$bottomStyle = props.bottomStyle,
    bottomStyle = _props$bottomStyle === void 0 ? {} : _props$bottomStyle,
    _props$type = props.type,
    type = _props$type === void 0 ? "tlr" : _props$type;
  var topSty, leftSty, rightSty, bottomSty, bodySty;
  var position = React__default.useMemo(function () {
    switch (type) {
      case "tlr":
        // 上 左右
        topSty = Object.assign({
          height: top ? "50px" : '0',
          width: "100%"
        }, topStyle);
        leftSty = Object.assign({
          height: "100%",
          width: "auto"
        }, leftStyle);
        bottomSty = Object.assign({
          height: bottom ? "20px" : "0",
          width: "100%"
        }, bottomStyle);
        rightSty = Object.assign({
          height: "calc(100% - ".concat(bottomSty.height, ")"),
          width: "auto"
        }, rightStyle);
        bodySty = {
          width: "100%",
          height: "calc(100% - ".concat(topSty.height, ")")
        };
        return jsxs("div", Object.assign({
          className: "".concat($prefixCls, "-container ").concat($prefixCls, "-tlr ").concat(className)
        }, {
          children: [jsx("div", Object.assign({
            className: "container-top",
            style: topSty
          }, {
            children: top
          })), jsxs("div", Object.assign({
            className: "container-body",
            style: bodySty
          }, {
            children: [jsx("div", Object.assign({
              className: "container-left",
              style: leftSty
            }, {
              children: left
            })), jsx("div", Object.assign({
              className: "container-body-right",
              style: {
                width: "auto",
                height: "100%"
              }
            }, {
              children: jsx("div", Object.assign({
                className: "container-right",
                style: rightSty
              }, {
                children: right
              }))
            }))]
          }))]
        }));
      case "tlrb":
        // 上 左右 下
        topSty = Object.assign({
          height: top ? "50px" : '0',
          width: "100%"
        }, topStyle);
        leftSty = Object.assign({
          height: "100%",
          width: "auto"
        }, leftStyle);
        rightSty = Object.assign({
          height: "100%",
          width: "auto"
        }, rightStyle);
        bottomSty = Object.assign({
          height: bottom ? "20px" : "0px",
          width: "100%"
        }, bottomStyle);
        bodySty = {
          width: "100%",
          height: "calc(100% - ".concat(topSty.height, "  - ").concat(bottomSty.height, ")")
        };
        return jsxs("div", Object.assign({
          className: "".concat($prefixCls, "-container ").concat($prefixCls, "-tlrb ").concat(className)
        }, {
          children: [jsx("div", Object.assign({
            className: "container-top",
            style: topSty
          }, {
            children: top
          })), jsxs("div", Object.assign({
            className: "container-body",
            style: bodySty
          }, {
            children: [jsx("div", Object.assign({
              className: "container-left",
              style: leftSty
            }, {
              children: left
            })), jsx("div", Object.assign({
              className: "container-right",
              style: rightSty
            }, {
              children: right
            }))]
          })), jsx("div", Object.assign({
            className: "container-bottom",
            style: bottomSty
          }, {
            children: bottom
          }))]
        }));
      case "ltrb":
        // 左 上右下
        leftSty = Object.assign({
          height: "100%",
          width: "auto"
        }, leftStyle);
        topSty = Object.assign({
          height: top ? "50px" : '0',
          width: "100%"
        }, topStyle);
        bottomSty = Object.assign({
          height: bottom ? "30px" : "0px",
          width: "100%"
        }, bottomStyle);
        rightSty = Object.assign({
          height: "calc(100% - ".concat(topSty.height, "px  - ").concat(bottomSty.height, ")"),
          width: "100%"
        }, rightStyle);
        bodySty = {
          width: "auto",
          height: "100%"
        };
        return jsxs("div", Object.assign({
          className: "".concat($prefixCls, "-container ").concat($prefixCls, "-ltrb ").concat(className)
        }, {
          children: [jsx("div", Object.assign({
            className: "container-left",
            style: leftSty
          }, {
            children: left
          })), jsxs("div", Object.assign({
            className: "container-body",
            style: bodySty
          }, {
            children: [jsx("div", Object.assign({
              className: "container-top",
              style: topSty
            }, {
              children: top
            })), jsx("div", Object.assign({
              className: "container-right",
              style: rightSty
            }, {
              children: right
            })), jsx("div", Object.assign({
              className: "container-bottom",
              style: bottomSty
            }, {
              children: bottom
            }))]
          }))]
        }));
      case "trb":
        // 上 中 下
        topSty = Object.assign({
          height: top ? "50px" : '0',
          width: "100%"
        }, topStyle);
        bottomSty = Object.assign({
          height: bottom ? "30px" : "0px",
          width: "100%"
        }, bottomStyle);
        rightSty = Object.assign({
          height: "calc(100% - ".concat(topSty.height, "px  - ").concat(bottomSty.height, ")"),
          width: "100%"
        }, rightStyle);
        return jsxs("div", Object.assign({
          className: "".concat($prefixCls, "-container ").concat($prefixCls, "-trb ").concat(className)
        }, {
          children: [jsx("div", Object.assign({
            className: "container-top",
            style: topSty
          }, {
            children: top
          })), jsx("div", Object.assign({
            className: "container-right",
            style: rightSty
          }, {
            children: right
          })), jsx("div", Object.assign({
            className: "container-bottom",
            style: bottomSty
          }, {
            children: bottom
          }))]
        }));
    }
    return jsx("div", {
      children: "Error Position"
    });
  }, [type, className, top, topStyle, left, leftStyle, right, rightStyle, bottom, bottomStyle]);
  return position;
};

export { Container, Container as default };
