"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.DefaultSideMenuProps = void 0;

var _vue = require("vue");

var _proLayout = require("@antd-vue/pro-layout");

var _iconsVue = require("@ant-design/icons-vue");

var _antDesignVue = require("ant-design-vue");

var _utils = require("../utils");

var _AppMenu = require("../AppMenu");

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _isSlot(s) {
  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
}

var DefaultSideMenuProps = _objectSpread({
  prefixCls: _utils.PropTypes.string.def('ant-pro-layout'),
  sideWidth: _utils.PropTypes.number.def(210),
  collapsed: _utils.PropTypes.bool.def(false),
  collapsedWidth: _utils.PropTypes.number.def(48)
}, _AppMenu.DefaultAppMenuProps);

exports.DefaultSideMenuProps = DefaultSideMenuProps;
var SideMenu = (0, _vue.defineComponent)({
  name: 'SideMenu',
  props: _objectSpread({}, DefaultSideMenuProps),
  inheritAttrs: false,
  emits: ['collapse', 'menuClick'],
  setup: function setup(props, _ref) {
    var slots = _ref.slots,
        attrs = _ref.attrs,
        emit = _ref.emit;
    var menuStyleRef = (0, _vue.ref)(null);
    /* 组件内部状态 */
    // const state = reactive({ collapsed: props.collapsed });
    // watch(
    //   () => state.collapsed,
    //   (val) => {
    //     emit('collapse', val);
    //   },
    // );

    var changeSideMenuStyle = function changeSideMenuStyle() {
      var el = (0, _vue.unref)(menuStyleRef);
      el.innerHTML = "\n    .ant-menu-inline-collapsed  { width: ".concat(props.collapsedWidth, "px; }\n    .ant-layout-sider-children { width: ").concat(props.collapsed ? props.collapsedWidth : props.sideWidth, "px;padding-top: ").concat(props.layout === 'mix' ? props.headerHeight : 0, "px; }");
    };

    (0, _vue.onMounted)(function () {
      changeSideMenuStyle();
    });
    (0, _vue.onUpdated)(function () {
      changeSideMenuStyle();
    });
    var sideTheme = (0, _vue.computed)(function () {
      if (props.layout === 'mix') {
        return 'light';
      }

      return props.theme;
    });
    var sideStyle = (0, _vue.computed)(function () {
      var styles = {};

      if (props.layout === 'mix') {
        styles.marginTop = "".concat(props.headerHeight, "px");
      }

      if (sideTheme.value === 'dark') {
        styles.color = '#fff';
      }

      return styles;
    });
    var classNames = (0, _vue.computed)(function () {
      return _defineProperty({}, "".concat(props.prefixCls, "-sider"), true);
    });
    return function () {
      var menus = props.menus,
          sideWidth = props.sideWidth,
          collapsed = props.collapsed,
          collapsedWidth = props.collapsedWidth;
      var defLogo = props.layout === 'side' ? (0, _vue.createVNode)(_proLayout.LogoTitle, props, null) : undefined;
      var logoDom = (0, _utils.getRenderComponent)('menuHeaderRender', props, slots, defLogo, {
        propsArgs: [props, defLogo],
        slotArg: props
      });
      return (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)("style", {
        "type": 'text/css',
        "ref": menuStyleRef
      }, null), (0, _vue.createVNode)(_antDesignVue.Layout.Sider, {
        "style": (0, _vue.unref)(sideStyle),
        "class": (0, _vue.unref)(classNames),
        "collapsible": true,
        "width": sideWidth,
        "collapsed": collapsed,
        "collapsedWidth": collapsedWidth,
        "breakpoint": 'sm',
        "theme": sideTheme.value,
        "trigger": null,
        "onCollapse": function onCollapse(collapsed, type) {// console.log('onCollapse init', collapsed, type);
        },
        "onBreakpoint": function onBreakpoint(broken) {// console.log('onBreakpoint', broken);
        }
      }, {
        default: function _default() {
          return [(0, _vue.createVNode)("div", {
            "class": 'header'
          }, _isSlot(defLogo) ? defLogo : {
            default: function _default() {
              return [defLogo];
            }
          }), (0, _vue.createVNode)("div", {
            "class": 'extra'
          }, null), (0, _vue.createVNode)("div", {
            "class": 'menu'
          }, [(0, _vue.createVNode)(_proLayout.AppMenu, {
            "menus": menus,
            "theme": sideTheme.value,
            "mode": 'inline',
            "onClick": function onClick(menu) {
              emit('menuClick', menu);
            }
          }, null)]), (0, _vue.createVNode)("div", {
            "class": 'footer',
            "onClick": function onClick() {
              emit('collapse', !collapsed);
            }
          }, [collapsed ? (0, _vue.createVNode)(_iconsVue.MenuUnfoldOutlined, null, null) : (0, _vue.createVNode)(_iconsVue.MenuFoldOutlined, null, null)])];
        }
      })]);
    };
  }
});
var _default2 = SideMenu;
exports.default = _default2;