"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const icons_1 = require("@ant-design/icons");
const antd_1 = require("antd");
const styled_components_1 = __importDefault(require("styled-components"));
const styles_1 = require("@/components/common/styles");
const short_id_1 = __importDefault(require("@/utils/short-id"));
const Drawer = (0, styled_components_1.default)(antd_1.Drawer) `
  .ant-drawer-wrapper-body {
    padding: 0;
    height: 100%;
  }
  .ant-drawer-body {
    padding: 0;
    height: 100%;
  }
`;
const Container = styled_components_1.default.div `
  display: flex;
  height: 100%;
  flex-direction: column;
`;
const TitBar = styled_components_1.default.div `
  box-sizing: border-box;
  background: #fff;
  text-align: center;
  line-height: 48px;
  height: 48px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  z-index: 100;
`;
const TitCon = styled_components_1.default.div `
  position: absolute;
  width: 100%;
`;
const Tit = styled_components_1.default.span `
  font-size: 16px;
  color: #666;
`;
const Content = (0, styled_components_1.default)(styles_1.ScrollBar) `
  height: 100%;
  flex-grow: 1;
`;
const Close = (0, styled_components_1.default)(icons_1.CloseOutlined) `
  display: inline-flex;
  float: left;
  color: #666;
  position: relative;
  z-index: 1;
  height: 48px;
  width: 48px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  svg {
    height: 18px;
    width: 18px;
  }
  &:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }
`;
const Action = styled_components_1.default.div `
  float: right;
  line-height: 1;
  padding: 8px;
`;
const ExpendContainer = styled_components_1.default.div `
  position: absolute;
  top: 0;
  left: 50px;
  z-index: 100;
  display: flex;
`;
const Line = styled_components_1.default.div `
  border-left: 1px solid #ddd;
  margin: 12px 2px 12px 0;
`;
const ExpendBtn = styled_components_1.default.div `
  padding: 8px 10px;
  line-height: 32px;
  width: 48px;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  font-size: 16px;
  :hover {
    background: #00000014;
    cursor: pointer;
  }
`;
const OperationDrawer = (props) => {
    const [key] = (0, react_1.useState)((0, short_id_1.default)());
    const [visible, setVisible] = (0, react_1.useState)(false);
    const [expendScreen, setExpendScreen] = (0, react_1.useState)(false);
    const { actions = null, canExpend = false, children, destroyOnClose, maskClosable, open = false, placement = 'right', title, width = 640, onClose } = props, otherProps = __rest(props, ["actions", "canExpend", "children", "destroyOnClose", "maskClosable", "open", "placement", "title", "width", "onClose"]);
    (0, react_1.useEffect)(() => {
        if (open) {
            setTimeout(() => {
                setVisible(open);
            }, 300);
        }
        else {
            setVisible(open);
        }
    }, [open]);
    const handleExpend = () => {
        setExpendScreen(!expendScreen);
    };
    const handleClose = (e) => {
        if (typeof onClose === 'function') {
            onClose(e);
        }
    };
    return (react_1.default.createElement(Drawer, Object.assign({ key: key, placement: placement, closable: false, maskClosable: maskClosable, width: expendScreen ? '80%' : width, onClose: handleClose, visible: visible, destroyOnClose: destroyOnClose }, otherProps),
        react_1.default.createElement(Container, { "data-id": key },
            react_1.default.createElement(TitBar, null,
                react_1.default.createElement(Close, { color: "inherit", onClick: handleClose }),
                canExpend && (react_1.default.createElement(ExpendContainer, null,
                    react_1.default.createElement(Line, null),
                    react_1.default.createElement(ExpendBtn, { onClick: handleExpend }, expendScreen ? react_1.default.createElement(icons_1.MenuUnfoldOutlined, null) : react_1.default.createElement(icons_1.MenuFoldOutlined, null)))),
                title && (react_1.default.createElement(TitCon, null,
                    react_1.default.createElement(Tit, null, title))),
                actions && react_1.default.createElement(Action, null, actions)),
            react_1.default.createElement(Content, null, children))));
};
exports.default = OperationDrawer;
