<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · SideMenu（侧边菜单，普通 H5）</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="SideMenu.css" />
  <style>
    body { margin: 0; padding: 16px; background: var(--kole-color-page-bg); }
    p { font-size: 13px; color: var(--kole-color-text-secondary); margin: 0 0 8px; }
    .demo-block { margin-bottom: 20px; }
  </style>
</head>
<body>
  <!--
    Kole UI Menu 族 · SideMenu
    @generated by tools/gen-family-impl.mjs
    生成物 — 由 tools/gen-family-impl.mjs 从族模板生成，请勿手改。
    族 nav-menu：本页是同一份 Menu 实现，参数 direction=side。
    族参数取值：direction=side, indicator=left, collapsed=false
    重跑生成：node tools/gen-family-impl.mjs nav-menu
  -->
  <p>默认态（选中：全部订单）</p>
  <div class="demo-block">
    <nav class="kole-menu" id="menu-default" role="navigation" aria-label="主菜单" data-behavior="layout-menu-rows"></nav>
  </div>

  <p>含徽章与禁用项</p>
  <div class="demo-block">
    <nav class="kole-menu" id="menu-badge" role="navigation" aria-label="带徽章的主菜单" data-behavior="layout-menu-rows"></nav>
  </div>

  <p>折叠态（collapsed=true）</p>
  <div class="demo-block">
    <nav class="kole-menu" id="menu-alt" role="navigation" aria-label="主菜单替代形态" data-behavior="layout-menu-rows"></nav>
  </div>

  <script>
  (function () {
    /* 族参数：本组件在 nav-menu 族中的取值（由生成器写入，勿手改） */
    var FAMILY_DIRECTION = 'side';
    var PARAMS = { direction: FAMILY_DIRECTION, collapsed: false };

    var ITEMS = [
      { key: 'home', label: '工作台', icon: '⊞' },
      { key: 'order', label: '订单', icon: '≡', badge: '3', children: [
        { key: 'order-all', label: '全部订单' },
        { key: 'order-ship', label: '待发货' },
        { key: 'order-refund', label: '退款' }
      ] },
      { key: 'goods', label: '商品', icon: '◇', children: [
        { key: 'goods-list', label: '商品列表' },
        { key: 'goods-cat', label: '分类管理' }
      ] },
      { key: 'data', label: '数据', icon: '▤' },
      { key: 'setting', label: '设置', icon: '⚙', disabled: true }
    ];

    /* 单一实现对三种 direction 通用：
       top   -> 一级水平排布，children 走下拉面板
       side  -> 一级纵向排布，children 内联展开（collapsed 时走悬浮浮层）
       mixed -> 一级在顶部，二级为当前一级的 children，纵向排在侧栏 */
    function createMenu(root, params, initial) {
      var state = {
        active: (initial && initial.active) || '',
        open: (initial && initial.open) || '',
        collapsed: params.collapsed === true || params.collapsed === 'true',
        hoverKey: ''
      };

      function isTopActive(it) {
        if (it.key === state.active) return true;
        return (it.children || []).some(function (c) { return c.key === state.active; });
      }

      function itemHtml(it, level) {
        var active = it.key === state.active ? ' is-active' : '';
        var disabled = it.disabled ? ' is-disabled' : '';
        var hasKids = !!(it.children && it.children.length);
        var open = hasKids && it.key === state.open ? ' is-open' : '';
        var kids = hasKids && params.direction !== 'mixed'
          ? '<div class="kole-menu-children">' + it.children.map(function (c) { return itemHtml(c, level + 1); }).join('') + '</div>'
          : '';
        var icon = it.icon ? '<span class="kole-menu-icon">' + it.icon + '</span>' : '';
        var badge = it.badge ? '<span class="kole-menu-badge">' + it.badge + '</span>' : '';
        var arrow = hasKids && params.direction !== 'top'
          ? '<span class="kole-menu-arrow">›</span>'
          : '';
        return '<div class="kole-menu-item' + active + disabled + open + '"' +
          ' role="menuitem" tabindex="0" data-key="' + it.key + '"' +
          (hasKids ? ' aria-expanded="' + (it.key === state.open ? 'true' : 'false') + '"' : '') +
          '>' + icon + '<span class="kole-menu-label">' + it.label + '</span>' + badge + arrow + kids + '</div>';
      }

      function popHtml() {
        if (params.direction !== 'side' || !state.collapsed || !state.hoverKey) return '';
        var it = ITEMS.filter(function (x) { return x.key === state.hoverKey; })[0];
        if (!it || !it.children) return '';
        return '<div class="kole-menu-pop">' +
          '<div class="kole-menu-pop-title">' + it.label + '</div>' +
          it.children.map(function (c) { return itemHtml(c, 1); }).join('') +
          '</div>';
      }

      function bodyHtml() {
        if (params.direction !== 'mixed') {
          return ITEMS.map(function (it) { return itemHtml(it, 0); }).join('');
        }
        var current = ITEMS.filter(function (x) { return isTopActive(x); })[0] || ITEMS[0];
        var side = (current.children || []).map(function (c) { return itemHtml(c, 1); }).join('');
        return '<div class="kole-menu-top">' +
            ITEMS.map(function (it) { return itemHtml(it, 0); }).join('') +
          '</div>' +
          '<div class="kole-menu-side">' + side + '</div>';
      }

      function render() {
        root.setAttribute('data-direction', params.direction);
        if (params.direction === 'side') {
          root.setAttribute('data-collapsed', state.collapsed ? 'true' : 'false');
        }
        root.innerHTML = bodyHtml() + popHtml();
        Array.prototype.forEach.call(root.querySelectorAll('[data-key]'), function (el) {
          el.addEventListener('click', function (e) {
            e.stopPropagation();
            var key = el.getAttribute('data-key');
            var isParent = ITEMS.some(function (it) { return it.key === key && it.children; });
            if (isParent) {
              state.open = state.open === key ? '' : key;
              if (params.direction === 'mixed') state.active = key;
            } else {
              state.active = key;
            }
            render();
          });
          el.addEventListener('mouseenter', function () {
            state.hoverKey = el.getAttribute('data-key');
            if (params.direction === 'side' && state.collapsed) render();
          });
          el.addEventListener('mouseleave', function () {
            if (params.direction === 'side' && state.collapsed) { state.hoverKey = ''; render(); }
          });
        });
      }

      render();
      return { render: render, state: state };
    }

    var defaults = PARAMS;
    createMenu(document.getElementById('menu-default'), defaults, { active: 'order-all', open: '' });
    createMenu(document.getElementById('menu-badge'), defaults, { active: 'goods-list', open: 'goods' });

    /* 第三个用例展示本 direction 的差异能力 */
    var altParams = Object.assign({}, PARAMS, { collapsed: true });
    createMenu(document.getElementById('menu-alt'), altParams, { active: 'order-all', open: '' });
  })();
  </script>
</body>
</html>
