<template>
  <template v-for="(group, groupIndex) in menuGroups" :key="groupIndex">
    <template v-for="(item, itemIndex) in group" :key="itemIndex">
      <!-- 有子菜单 -->
      <template v-if="item.submenu">
        <a-sub-menu :disabled="item.disable" v-if="!item.hidden" :key="item.text">
          <template #title>
            <span>
              <iconfont :class="item.icon" />{{ item.text }}
            </span>
          </template>
          <context-sub-menu @hide="$emit('hide')" :menu-groups="item.submenu" />
        </a-sub-menu>
      </template>
      <!-- 没有子菜单 -->
      <template v-else>
        <a-menu-item :disabled="item.disable" v-if="!item.hidden">
          <div class="menu-item-wrap" @click="handleMenuItemClick(item)">
            <iconfont :class="item.icon" />
            <span v-for="(widget, index) in item.content" :key="index">
              <!-- 普通文本 -->
              <template v-if="widget.component === 'text'">{{ widget.value }}</template>
              <!-- 文本输入框 -->
              <template v-else-if="widget.component === 'input' && widget.type === 'text'">
                <span @click.stop>
                  <a-input
                    v-model:value="widget.value"
                    size="small"
                    @pressEnter="handleMenuItemClick(item)"
                  />
                </span>
              </template>
              <!-- 数字输入框 -->
              <template v-else-if="widget.component === 'input' && widget.type === 'number'">
                <span @click.stop>
                  <a-input-number
                    :class="{ 'is-percent': widget.percent }"
                    v-model:value="widget.value"
                    :min="widget.min"
                    :max="widget.max"
                    :step="widget.step"
                    :precision="widget.precision"
                    :formatter="widget.percent ? value => `${value}%` : undefined"
                    :parser="widget.percent ? value => value.replace('%', '') : undefined"
                    @pressEnter="handleMenuItemClick(item)"
                  />
                </span>
              </template>
            </span>
          </div>
        </a-menu-item>
      </template>
    </template>
    <a-menu-divider v-if="showDivider(groupIndex, menuGroups)" />
  </template>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { Menu, Input, InputNumber } from 'ant-design-vue';

import { MenuItem, MenuGroup } from './ContextMenu.vue';

export default defineComponent({
  name: 'ContextSubMenu',
  components: {
    ASubMenu: Menu.SubMenu,
    AMenuItem: Menu.Item,
    AMenuDivider: Menu.Divider,
    AInput: Input,
    AInputNumber: InputNumber,
  },
  props: {
    menuGroups: {
      type: Array as PropType<MenuGroup[]>,
      required: true,
    },
  },
  emits: ['hide'],
  setup(props, context) {
    // 点击某一个菜单项时调用其回调函数
    const handleMenuItemClick = (item: MenuItem) => {
      if (item.disable) return;

      // 隐藏下拉菜单
      context.emit('hide');
      if (item.callback) {
        const { content, callback } = item;
        let inputVal: string | number | undefined = '';
        if (content) {
          content.forEach(widget => {
            if (widget.component === 'input') {
              inputVal = widget.value;
            }
          });
        }
        callback && callback(inputVal);
      }
    };
    // 是否显示分割线
    const showDivider = (groupIndex: number, menuGroups: MenuGroup[]) => {
      if (groupIndex === menuGroups.length - 1) return false;
      const hasVisibleItems = menuGroups[groupIndex].some(item => !item.hidden);
      let notLastVisibleGroup = false;
      for (let i = groupIndex + 1; i < menuGroups.length; i++) {
        const visibleItems = menuGroups[i].some(item => !item.hidden);
        if (visibleItems) {
          notLastVisibleGroup = true;
          break;
        }
      }
      return hasVisibleItems && notLastVisibleGroup;
    };
    return {
      handleMenuItemClick,
      showDivider,
    };
  },
});
</script>
