// 导入Ant Design Vue的Menu和Icon组件
import Menu from 'ant-design-vue/es/menu';
import Icon from 'ant-design-vue/es/icon';

// 从Menu组件中解构出Item和SubMenu
const { Item, SubMenu } = Menu;

// 默认导出Menu组件
export default {
  // 组件名称
  name: 'SMenu',
  // 定义接收的props，包括menu（菜单项数组），theme（主题），mode（模式），collapsed（折叠状态）
  props: {
    menu: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  // data函数返回组件的初始状态
  data () {
    return {
      openKeys: [], // 展开的菜单项的key数组
      selectedKeys: [], // 选中的菜单项的key数组
      cachedOpenKeys: [] // 缓存的展开项的key数组
    }
  },
  // 计算属性，返回menu的根路径数组
  computed: {
    SubmenuKeys: vm => {
      const keys = [];
      vm.menu.forEach(item => keys.push(item.path));
      return keys;
    }
  },
  // mounted生命周期钩子，组件挂载后调用updateMenu方法
  mounted () {
    this.updateMenu();
  },
  // 监听器，监听collapsed变化，路由变化，以及处理菜单项改变
  watch: {
    collapsed (val) {
      if (val) {
        this.cachedOpenKeys = this.openKeys.concat();
        this.openKeys = [];
      } else {
        this.openKeys = this.cachedOpenKeys;
      }
    },
    $route: function () {
      this.updateMenu();
    }
  },
  // 定义methods，包括处理菜单项改变，更新菜单，渲染菜单项和子菜单项
  methods: {
    // 处理菜单项改变
    onOpenChange (openKeys) {
      // ...
    },
    updateMenu () {
      const routes = this.$route.matched.concat();
      // ...
    },
    renderItem (menu) {
      // 渲染菜单项
      // ...
    },
    renderMenuItem (menu) {
      // 渲染菜单项组件
      // ...
    },
    renderSubMenu (menu) {
      // 渲染子菜单组件
      // ...
    },
    renderIcon (icon) {
      // 渲染图标组件
      // ...
    }
  },
  // 定义render函数，返回组件的最终渲染结果
  render () {
    const { mode, theme, menu } = this;
    const props = {
      mode: mode,
      theme: theme,
      openKeys: this.openKeys
    };
    const on = {
      select: obj => {
        this.selectedKeys = obj.selectedKeys;
        this.$emit('select', obj);
      },
      openChange: this.onOpenChange
    };
    const menuTree = menu.map(item => {
      if (item.hidden) {
        return null;
      }
      return this.renderItem(item);
    });
    // 使用Menu组件渲染最终的菜单结构
    return (
      <Menu vModel={this.selectedKeys} {...{ props, on: on }}>
        {menuTree}
      </Menu>
    );
  }
}