<template>
  <a-menu mode="vertical" v-if="nodeData?.type && nodeList.length > 0">
    <template v-for="(item, index) in nodeList">
      <a-menu-item @click="addNode(item)" v-if="isShow(item)" class="menu-item" :key="item.type">
        <svg style="width: 17px; height: 22px; margin-right: 4px" aria-hidden="true">
          <use :xlink:href="`#${item.icon}`"></use>
        </svg>
        <span style="margin-left: 3px">{{ item.name }}</span>
      </a-menu-item>
    </template>
  </a-menu>
</template>

<script setup name="X6AddNode">
import { ref, onMounted } from 'vue';
import JsonData from '../../data/data.json';
import { Menu as AMenu, MenuItem as AMenuItem } from 'ant-design-vue';

const props = defineProps({
  type: {
    type: String,
    default: ''
  },
  node: Object
});

const emits = defineEmits(['addNode']);

const nodeList = ref([]);

const nodeData = ref({});

onMounted(() => {
  nodeData.value = JSON.parse(props.node.data);
  nodeList.value = [];
  JsonData.nodeGroups.forEach(item => {
    nodeList.value = nodeList.value.concat(item.nodes);
  });

  // 给可以添加的节点排序
  if (nodeData.value.type && [12, 13, 20, 30, 31, 32, 40, 60, 61].includes(nodeData.value.type)) {
    let orderMap = new Map([30, 31, 32, 50, 51, 40, 12, 11].map((item, index) => [item, index]));
    nodeList.value.sort((a, b) => {
      // 通过映射表直接访问索引，避免了使用indexOf
      return (orderMap.get(a.type) || 0) - (orderMap.get(b.type) || 0);
    });
  }
});

// 添加
const addNode = item => {
  emits('addNode', props.type, item);
};

const isShow = item => {
  const { type } = nodeData.value;
  if (type == 10) {
    if ([13, 40, 50, 51].includes(item.type)) {
      return true;
    }
    return false;
  } else if (type == 11) {
    return false;
  } else if ([12, 13, 20, 30, 31, 32, 40, 60, 61].includes(type)) {
    if ([11, 12, 30, 31, 32, 40, 50, 51].includes(item.type)) {
      return true;
    }
    return false;
  } else if (type == 50) {
    if ([60].includes(item.type)) {
      return true;
    }
    return false;
  } else if (type == 51) {
    if ([30, 31, 32, 40].includes(item.type)) {
      return true;
    }
    return false;
  }
};
</script>

<style scoped lang="less">
:deep(.ant-dropdown-menu-item) {
  height: 40px !important;
  line-height: 40px !important;
  padding: 12px 16px !important;
  width: 130px !important;
}
:deep(.ant-dropdown-menu-title-content) {
  display: flex;
  align-items: center;
}
</style>
