<template>
  <div class="menu-path-selector">
    <el-input
      :model-value="modelValue"
      placeholder="点击从菜单中选择路径，或手动输入"
      clearable
      @input="$emit('update:modelValue', $event)"
    >
      <template #append>
        <el-button @click="dialogVisible = true">
          <el-icon><FolderOpened /></el-icon>
        </el-button>
      </template>
    </el-input>

    <el-dialog v-model="dialogVisible" title="选择菜单路径" width="550px" append-to-body>
      <el-input v-model="searchKey" placeholder="搜索菜单名称或路径" clearable class="path-search">
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <div class="menu-tree">
        <el-tree
          :data="filteredMenuTree"
          :props="{ label: 'label', children: 'children' }"
          node-key="path"
          :default-expand-all="!!searchKey"
          :expand-on-click-node="false"
          highlight-current
          @node-click="handleNodeClick"
        >
          <template #default="{ data }">
            <div class="tree-node" :class="{ 'is-selected': modelValue === data.path, 'no-path': !data.path }">
              <el-icon v-if="data.icon" :size="16" style="margin-right: 6px; flex-shrink: 0;">
                <component :is="data.icon" />
              </el-icon>
              <span class="node-title">{{ data.title }}</span>
              <el-tag v-if="data.path" size="small" type="info" class="node-path">{{ data.path }}</el-tag>
            </div>
          </template>
        </el-tree>
      </div>
      <div v-if="filteredMenuTree.length === 0" class="tree-empty">
        未找到匹配的菜单
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Search, FolderOpened } from '@element-plus/icons-vue'
import { menus } from '@/config/menus'

const props = defineProps({
  modelValue: { type: String, default: '' }
})
const emit = defineEmits(['update:modelValue'])

const dialogVisible = ref(false)
const searchKey = ref('')

const buildTreeData = (menuList) => {
  return menuList.map(item => {
    const node = {
      path: item.path || '',
      title: item.title,
      icon: item.icon || '',
      label: item.title
    }
    if (item.children?.length) {
      node.children = buildTreeData(item.children)
    }
    return node
  })
}

const menuTree = computed(() => buildTreeData(menus))

const filterTree = (nodes, keyword) => {
  const key = keyword.toLowerCase()
  const result = []
  for (const node of nodes) {
    const titleMatch = node.title?.toLowerCase().includes(key)
    const pathMatch = node.path?.toLowerCase().includes(key)
    let filteredChildren = []
    if (node.children?.length) {
      filteredChildren = filterTree(node.children, keyword)
    }
    if (titleMatch || pathMatch || filteredChildren.length > 0) {
      result.push({
        ...node,
        children: filteredChildren.length > 0 ? filteredChildren : node.children
      })
    }
  }
  return result
}

const filteredMenuTree = computed(() => {
  if (!searchKey.value) return menuTree.value
  return filterTree(menuTree.value, searchKey.value)
})

const handleNodeClick = (data) => {
  if (!data.path) return
  emit('update:modelValue', data.path)
  dialogVisible.value = false
  searchKey.value = ''
}
</script>

<style scoped>
.menu-path-selector { width: 100%; }
.path-search { margin-bottom: 12px; }
.menu-tree {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 8px 0;
}
.tree-node {
  display: flex;
  align-items: center;
  padding: 2px 4px;
  width: 100%;
  border-radius: 4px;
}
.tree-node.is-selected {
  background: #ecf5ff;
  color: #409eff;
}
.tree-node.no-path {
  color: #909399;
  cursor: default;
}
.node-title { margin-right: 8px; font-size: 13px; }
.node-path { flex-shrink: 0; }
.tree-empty {
  text-align: center;
  color: #909399;
  padding: 40px 0;
  font-size: 14px;
}
:deep(.el-tree-node__content) { height: 36px; }
:deep(.el-tree-node__content:hover) { background-color: #f5f7fa; }
</style>
