import { isVNode as _isVNode } from "vue";
import { Fragment as _Fragment } from "vue";
import { createVNode as _createVNode } from "vue";

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; }

import { AppMenu, LogoTitle } from '@antd-vue/pro-layout';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
import { Layout } from 'ant-design-vue';
import { computed, defineComponent, onMounted, onUpdated, ref, unref } from 'vue';
import { getRenderComponent, PropTypes } from '../utils';
import { DefaultAppMenuProps } from '../AppMenu';

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

export var DefaultSideMenuProps = _objectSpread({
  prefixCls: PropTypes.string.def('ant-pro-layout'),
  sideWidth: PropTypes.number.def(210),
  collapsed: PropTypes.bool.def(false),
  collapsedWidth: PropTypes.number.def(48)
}, DefaultAppMenuProps);
var SideMenu = 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 = ref(null);
    /* 组件内部状态 */
    // const state = reactive({ collapsed: props.collapsed });
    // watch(
    //   () => state.collapsed,
    //   (val) => {
    //     emit('collapse', val);
    //   },
    // );

    var changeSideMenuStyle = function changeSideMenuStyle() {
      var el = 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; }");
    };

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

      return props.theme;
    });
    var sideStyle = 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 = 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' ? _createVNode(LogoTitle, props, null) : undefined;
      var logoDom = getRenderComponent('menuHeaderRender', props, slots, defLogo, {
        propsArgs: [props, defLogo],
        slotArg: props
      });
      return _createVNode(_Fragment, null, [_createVNode("style", {
        "type": 'text/css',
        "ref": menuStyleRef
      }, null), _createVNode(Layout.Sider, {
        "style": unref(sideStyle),
        "class": 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 [_createVNode("div", {
            "class": 'header'
          }, _isSlot(defLogo) ? defLogo : {
            default: function _default() {
              return [defLogo];
            }
          }), _createVNode("div", {
            "class": 'extra'
          }, null), _createVNode("div", {
            "class": 'menu'
          }, [_createVNode(AppMenu, {
            "menus": menus,
            "theme": sideTheme.value,
            "mode": 'inline',
            "onClick": function onClick(menu) {
              emit('menuClick', menu);
            }
          }, null)]), _createVNode("div", {
            "class": 'footer',
            "onClick": function onClick() {
              emit('collapse', !collapsed);
            }
          }, [collapsed ? _createVNode(MenuUnfoldOutlined, null, null) : _createVNode(MenuFoldOutlined, null, null)])];
        }
      })]);
    };
  }
});
export default SideMenu;