MID/src/components/TreeView.vue

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import {
  Folder,
  FolderOpen,
  FileText,
  Database,
  Copy,
  GitBranch,
  Trash2,
  X,
  Plus,
  Minus,
  CornerUpLeft,
  CornerDownLeft,
  Link
} from 'lucide-vue-next'
import { initializeTreeData, saveTreeDataToStorage } from '../utils/treeStorage'
import { generateNodeSpecificContent } from '../utils/mockDataGenerator'
import { generateMockReviewHistory } from '../utils/mockReviewData'
import type { EditorBlock, ImageBlock, TableBlock, VideoBlock, TextBlock } from '../utils/mockDataGenerator'

export interface TreeNode {
  id: string
  label: string
  type: 'folder'
  status?: 'work' | 'released' | 'approved' | 'rejected' | 'pending' | 'CS Released' | 'mapped'
  version?: string
  nextVersion?: string
  pss?: string
  expanded?: boolean
  selected?: boolean
  children?: TreeNode[]
  isClone?: boolean
  cloneSourceId?: string
  isTerminal?: boolean
  // 元数据字段
  createDate?: string
  access?: string
  owner?: string
  department?: string
  lastChangedBy?: string
  lastChangedDate?: string
  // Inbox状态（仅末端节点）
  inboxStatus?: 'mapped' | 'ongoing' | 'rejected' | 'agreed' | 'accepted'
  reviewer?: string
  // 富文本内容（仅末端节点）
  content?: EditorBlock[]
  // 版本历史（仅末端节点）
  versions?: VersionData[]
}

// 版本数据
export interface VersionData {
  version: string
  date: string
  author: string
  content: EditorBlock[]
}

export type { EditorBlock, ImageBlock, TableBlock, VideoBlock, TextBlock }

// 判断节点是否为映射节点
const isMappedNode = (node: TreeNode): boolean => {
  if (!node.versions?.length) return false
  const author = node.versions[0].author
  return author === '系统映射' || author === 'System Mapping'
}

// 节点权限配置 - 允许所有节点进行所有操作（作为目标）
const getNodePermissions = (node: TreeNode) => {
  return {
    copy: true,
    clone: true,
    branch: true
  }
}

// Mock 用户列表
const mockUsers = ['zhangsan', 'lisi', 'wangwu', 'hongwei', 'admin']
const mockAccessLevels = ['Read', 'Write', 'Admin']

// 生成随机日期
const generateDate = (daysOffset: number = 0) => {
  const date = new Date()
  date.setDate(date.getDate() - daysOffset)
  return date.toISOString().split('T')[0]
}

// 生成版本历史
const generateVersions = (nodeName: string, count: number = 10): VersionData[] => {
  const versions: VersionData[] = []
  for (let i = 0; i < count; i++) {
    versions.push({
      version: `0.0.${i}`,
      date: generateDate((count - 1 - i) * 7),
      author: mockUsers[i % mockUsers.length],
      content: generateNodeSpecificContent(nodeName, i + 1)
    })
  }
  return versions.reverse()
}

// 全局计数器，确保每个状态至少分配一次
const globalStatusCounter = {
  mapped: 0,
  ongoing: 0,
  rejected: 0,
  agreed: 0,
  accepted: 0
}

const buildTreeData = (items: any[], parentId: string, depth: number = 0): TreeNode[] => {
  return items.map((item, i) => {
    const id = `${parentId}-${i}`
    const isTerminal = item.isTerminal || false
    const randomUser = mockUsers[Math.floor(Math.random() * mockUsers.length)]
    const createDate = generateDate(Math.floor(Math.random() * 30))
    
    // Inbox 状态分配逻辑
    let inboxStatus: 'mapped' | 'ongoing' | 'rejected' | 'agreed' | 'accepted' = 'mapped'
    
    if (isTerminal) {
      // 确保每个状态至少出现一次
      const statusKeys = Object.keys(globalStatusCounter) as Array<keyof typeof globalStatusCounter>
      const minCount = Math.min(...statusKeys.map(key => globalStatusCounter[key]))

      // 找到还没有达到最小数量的状态
      const availableStatuses = statusKeys.filter(key => globalStatusCounter[key] === minCount)

      // 随机选择一个可用的状态
      const selectedKey = availableStatuses[Math.floor(Math.random() * availableStatuses.length)]
      inboxStatus = selectedKey
      globalStatusCounter[selectedKey]++
    }

    // 如果是末端节点，先生成版本历史
    const versions = isTerminal ? generateVersions(item.name, 10) : []

    const node: TreeNode = {
      id,
      label: item.name,
      type: 'folder',
      status: 'work',
      version: isTerminal ? versions[versions.length - 1].version : '(1)',
      expanded: depth <= 2,
      children: item.children ? buildTreeData(item.children, id, depth + 1) : undefined,
      isTerminal,
      // 添加元数据字段
      createDate,
      access: mockAccessLevels[i % mockAccessLevels.length],
      owner: randomUser,
      lastChangedBy: randomUser,
      lastChangedDate: createDate,
      reviewer: isTerminal ? mockUsers[(i + 2) % mockUsers.length] : undefined,
      // 如果是末端节点，添加inbox状态、内容和版本历史
      ...(isTerminal && {
        inboxStatus,
        content: generateNodeSpecificContent(item.name, 2),
        versions
      })
    }

    return node
  })
}

const treeDataSource = [
  {
    name: "Inbox",
    children: [
      { name: "Review", children: [] },
      { name: "Map", children: [] }
    ]
  },
  {
    name: "Standards",
    children: [
      { name: "Product Scenario", children: [] },
      {
        name: "Product Definition Context",
        children: [
          { name: "Competitors", children: [] },
          { name: "Production Vision & Mission", children: [] },
          { name: "Product Concepts", children: [] }
        ]
      },
      {
        name: "Product Strategy and Targets",
        children: [
          { name: "Design", children: [] },
          { name: "Accommodation & Usage", children: [] },
          { name: "FE", children: [] }
        ]
      },
      {
        name: "Attributes",
        children: [
          {
            name: "Safety",
            children: [
              {
                name: "Passive Safety",
                children: [
                  { name: "64km ODB", isTerminal: true },
                  { name: "112km ODB", isTerminal: true },
                  { name: "80km ODB", isTerminal: true },
                  { name: "Low Speed Crash", children: [] }
                ]
              }
            ]
          },
          { name: "Vehicle Energy Efficient", children: [] },
          { name: "Weight", children: [] },
          { name: "Aerodynamics", children: [] }
        ]
      },
      {
        name: "Function",
        children: [
          { name: "Connectivity Infrastructure Domain", children: [] },
          { name: "Electrical Platform Domain", children: [] },
          { name: "HMI Domain", children: [] }
        ]
      },
      {
        name: "System",
        children: [
          {
            name: "Powertrain",
            children: [
              {
                name: "Engine",
                children: [
                  { name: "Crankshaft", isTerminal: true },
                  { name: "Ignition", isTerminal: true },
                  { name: "Engine Body", isTerminal: true }
                ]
              },
              { name: "Transmission", children: [] },
              { name: "Motor", children: [] },
              { name: "incoming requirements", children: [] },
              { name: "attribute", children: [] },
              { name: "NVH 1", isTerminal: true },
              { name: "NVH 2", isTerminal: true },
              { name: "Safety 1", isTerminal: true },
              { name: "function", children: [] }
            ]
          },
          { name: "Powertrain Integration", children: [] },
          {
            name: "Exterior",
            children: [
              { name: "Incoming Requirements", children: [] },
              {
                name: "Product targets", children: [
                  { name: "requirements 1", isTerminal: true },
                  { name: "requirements 2", isTerminal: true }
                ]
              },
              { name: "attribute", children: [] },
              { name: "function", children: [] }
            ]
          }
        ]
      }
    ]
  },
  {
    name: "Projects",
    children: [
      {
        name: "A",
        children: [
          { name: "Product Scenario", children: [] },
          {
            name: "Product Definition Context",
            children: [
              { name: "Competitors", children: [] },
              { name: "Production Vision & Mission", children: [] },
              { name: "Product Concepts", children: [] }
            ]
          },
          {
            name: "Product Strategy and Targets",
            children: [
              { name: "Design", children: [] },
              { name: "Accommodation & Usage", children: [] },
              { name: "FE", children: [] }
            ]
          },
          {
            name: "Attributes",
            children: [
              {
                name: "Safety",
                children: [
                  {
                    name: "Passive Safety",
                    children: [
                      { name: "64km ODB", isTerminal: true },
                      { name: "112km ODB", isTerminal: true },
                      { name: "80km ODB", isTerminal: true },
                      { name: "Low Speed Crash", children: [] }
                    ]
                  }
                ]
              },
              { name: "Vehicle Energy Efficient", children: [] },
              { name: "Weight", children: [] },
              { name: "Aerodynamics", children: [] }
            ]
          },
          {
            name: "Function",
            children: [
              { name: "Connectivity Infrastructure Domain", children: [] },
              { name: "Electrical Platform Domain", children: [] },
              { name: "HMI Domain", children: [] }
            ]
          },
          {
            name: "System",
            children: [
              {
                name: "Powertrain",
                children: [
                  {
                    name: "Engine",
                    children: [
                      { name: "Crankshaft", isTerminal: true },
                      { name: "Ignition", isTerminal: true },
                      { name: "Engine Body", isTerminal: true }
                    ]
                  },
                  { name: "Transmission", children: [] },
                  { name: "Motor", children: [] },
                  { name: "incoming requirements", children: [] },
                  { name: "attribute", children: [] },
                  { name: "NVH 1", isTerminal: true },
                  { name: "NVH 2", isTerminal: true },
                  { name: "Safety 1", isTerminal: true },
                  { name: "function", children: [] }
                ]
              },
              { name: "Powertrain Integration", children: [] },
              {
                name: "Exterior",
                children: [
                  { name: "Incoming Requirements", children: [] },
                  {
                    name: "Product targets", children: [
                      { name: "requirements 1", isTerminal: true },
                      { name: "requirements 2", isTerminal: true }
                    ]
                  },
                  { name: "attribute", children: [] },
                  { name: "function", children: [] }
                ]
              }
            ]
          }
        ]
      },
      {
        name: "B",
        children: [
          {
            name: "Attribute",
            children: [
              {
                name: "Safety",
                children: [{ name: "64 ODB", isTerminal: true }]
              },
              {
                name: "NVH",
                children: [
                  { name: "PWT 40dB", isTerminal: true },
                  { name: "PWT 38dB", isTerminal: true }
                ]
              }
            ]
          },
          {
            name: "System",
            children: [
              {
                name: "Subsystem 1",
                children: [
                  {
                    name: "Component",
                    children: [
                      { name: "Incoming Requirements", children: [] },
                      { name: "NVH1 Accepted", children: [] }
                    ]
                  }
                ]
              },
              {
                name: "Subsystem 2",
                children: [
                  { name: "Component 2", children: [] },
                  {
                    name: "Component 3",
                    children: [
                      { name: "Incoming Requirements", children: [] },
                      { name: "NVH2 Accepted", children: [] }
                    ]
                  }
                ]
              }
            ]
          },
          { name: "Incoming Requirements", children: [] }
        ]
      },
      { name: "C", children: [] },
      { name: "XX", children: [] }
    ]
  }
]

const cloneNode = (node: TreeNode, newId?: string): TreeNode => {
  return {
    ...node,
    id: newId || node.id,
    children: node.children ? node.children.map(child => cloneNode(child)) : undefined
  }
}

const findNode = (nodes: TreeNode[], id: string): TreeNode | null => {
  for (const node of nodes) {
    if (node.id === id) return node
    if (node.children) {
      const found = findNode(node.children, id)
      if (found) return found
    }
  }
  return null
}

const deleteNodeFromTree = (nodes: TreeNode[], id: string): boolean => {
  const index = nodes.findIndex(n => n.id === id)
  if (index !== -1) {
    nodes.splice(index, 1)
    return true
  }
  for (const node of nodes) {
    if (node.children && deleteNodeFromTree(node.children, id)) {
      return true
    }
  }
  return false
}

const addChildNode = (parentNode: TreeNode, childNode: TreeNode) => {
  if (!parentNode.children) {
    parentNode.children = []
  }
  parentNode.children.push(childNode)
}

// 初始化树数据：优先从 localStorage 读取，否则使用 mockData
// 重置全局状态计数器，确保每次初始化都能正确分配状态
// globalStatusCounter 是局部常量，每次组件初始化都会重新创建，无需手动重置
const mockTreeData = ref<TreeNode[]>(initializeTreeData(buildTreeData(treeDataSource)))

// Ensure Inbox has Review and Map subfolders (Data Migration)
const inboxNode = mockTreeData.value.find(n => n.label === 'Inbox')
if (inboxNode) {
  const hasReview = inboxNode.children?.some(c => c.label === 'Review')
  const hasMap = inboxNode.children?.some(c => c.label === 'Map')
  
  if (!hasReview || !hasMap) {
    inboxNode.children = inboxNode.children || []
    if (!hasReview) {
      inboxNode.children.push({ 
        id: `${inboxNode.id}-review`, 
        label: 'Review', 
        type: 'folder', 
        children: [], 
        isTerminal: false 
      })
    }
    if (!hasMap) {
      inboxNode.children.push({ 
        id: `${inboxNode.id}-map`, 
        label: 'Map', 
        type: 'folder', 
        children: [], 
        isTerminal: false 
      })
    }
    saveTreeDataToStorage(mockTreeData.value)
  }
}

// 从树数据中获取所有末端节点作为Inbox数据
const inboxData = computed(() => {
  const terminals: TreeNode[] = []

  const traverse = (nodes: TreeNode[]) => {
    for (const node of nodes) {
      if (node.isTerminal) {
        terminals.push(node)
      }
      if (node.children) {
        traverse(node.children)
      }
    }
  }

  traverse(mockTreeData.value)
  return terminals.map((node, index) => ({
    id: index + 1,
    nodeName: node.label,
    nodeOwner: node.owner || 'unknown',
    requirementName: getRequirementName(node.label),
    owner: node.lastChangedBy || node.owner || 'unknown',
    type: getNodeType(node.label),
    version: node.version || '1.0',
    status: node.inboxStatus || 'mapped',
    mappedTime: node.createDate || '2023-01-01',
    latestRevisionTime: node.lastChangedDate || node.createDate || '2023-01-01'
  }))
})

// 根据节点名称推断需求名称
const getRequirementName = (nodeName: string): string => {
  const nameMap: Record<string, string> = {
    '64km ODB': 'Passive Safety',
    '112km ODB': 'Passive Safety',
    '80km ODB': 'Passive Safety',
    'Low Speed Crash': 'Passive Safety',
    'Crankshaft': 'Engine Performance',
    'Ignition': 'Engine Performance',
    'Engine Body': 'Engine Performance',
    'NVH 1': 'Noise Control',
    'NVH 2': 'Noise Control',
    'Safety 1': 'Vehicle Safety',
    'requirements 1': 'Product Requirements',
    'requirements 2': 'Product Requirements'
  }
  return nameMap[nodeName] || nodeName
}

// 根据节点名称推断类型
const getNodeType = (nodeName: string): string => {
  const typeMap: Record<string, string> = {
    '64km ODB': 'Attribute',
    '112km ODB': 'Attribute',
    '80km ODB': 'Attribute',
    'Low Speed Crash': 'Attribute',
    'Crankshaft': 'Attribute',
    'Ignition': 'Attribute',
    'Engine Body': 'Attribute',
    'NVH 1': 'Function',
    'NVH 2': 'Function',
    'Safety 1': 'Function',
    'requirements 1': 'Function',
    'requirements 2': 'Function'
  }
  return typeMap[nodeName] || 'Attribute'
}

// 计算Inbox中mapped状态的数量
const mappedCount = computed(() => {
  return inboxData.value.filter(item => item.status === 'mapped').length
})

// 计算待review的节点数量
const pendingReviewCount = computed(() => {
  let count = 0

  const traverse = (nodes: TreeNode[]) => {
    for (const node of nodes) {
      if (node.isTerminal) {
        // 检查是否有pending或submitted状态的review记录
        const reviewHistoryKey = `review_history_${node.id}`
        const storedHistory = localStorage.getItem(reviewHistoryKey)

        if (storedHistory) {
          const reviewData = JSON.parse(storedHistory)
          // pending 或 submitted 状态都需要处理
          const needsReview = reviewData.some((record: any) => 
            record.status === 'pending' || record.status === 'submitted'
          )
          if (needsReview) {
            count++
          }
        }
      }

      if (node.children) {
        traverse(node.children)
      }
    }
  }

  traverse(mockTreeData.value)
  return count
})

// 计算 Inbox 总数（Review + Map 的和）
const inboxTotalCount = computed(() => {
  return mappedCount.value + pendingReviewCount.value
})

defineProps<{
  modelValue?: string | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string | null): void
  (e: 'select', node: TreeNode): void
  (e: 'tree-data-update', data: TreeNode[]): void
  (e: 'switch-view', viewMode: string): void
}>()

// 监听数据变化，自动保存到 localStorage
watch(mockTreeData, (newData) => {
  saveTreeDataToStorage(newData)
  emit('tree-data-update', newData)
}, { deep: true, immediate: true })

const selectedId = ref<string | null>('1')
const expandedIds = ref<Set<string>>(new Set())
const dialogExpandedIds = ref<Set<string>>(new Set())

const contextMenu = ref({
  show: false,
  x: 0,
  y: 0,
  nodeId: ''
})

const operationDialog = ref({
  show: false,
  mode: 'copy' as 'copy' | 'clone' | 'branch',
  sourceNodeId: '',
  selectedSourceIds: [] as string[],
  owner: 'admin' // default owner
})

const toggleSourceSelection = (node: TreeNode) => {
  // Only allow terminal nodes
  if (!isTerminalNode(node)) return

  const ids = operationDialog.value.selectedSourceIds
  
  if (ids.includes(node.id)) {
    // Toggle off if already selected
    operationDialog.value.selectedSourceIds = []
  } else {
    // Single select: replace any existing selection
    operationDialog.value.selectedSourceIds = [node.id]
  }
}

const getAllTerminalDescendants = (node: TreeNode): string[] => {
  const results: string[] = []
  const traverse = (n: TreeNode) => {
    if (isTerminalNode(n)) {
      results.push(n.id)
    }
    if (n.children) {
      n.children.forEach(traverse)
    }
  }
  traverse(node)
  return results
}

const isIdsSelected = (node: TreeNode): boolean => {
  if (isTerminalNode(node)) {
    return operationDialog.value.selectedSourceIds.includes(node.id)
  }
  // For folders, checked if all terminal descendants are checked
  const descendants = getAllTerminalDescendants(node)
  return descendants.length > 0 && descendants.every(id => operationDialog.value.selectedSourceIds.includes(id))
}

const isIdsIndeterminate = (node: TreeNode): boolean => {
  if (isTerminalNode(node)) return false
  
  const descendants = getAllTerminalDescendants(node)
  if (descendants.length === 0) return false
  
  const selectedCount = descendants.filter(id => operationDialog.value.selectedSourceIds.includes(id)).length
  return selectedCount > 0 && selectedCount < descendants.length
}

const addNodeDialog = ref({
  show: false,
  mode: 'sibling' as 'sibling' | 'child',
  parentNodeId: '',
  targetNodeId: '',
  nodeType: '',
  owner: '',
  reviewer: ''
})

// 节点类型选项
const nodeTypes = ['folder', 'document']

const initExpanded = (nodes: TreeNode[]) => {
  nodes.forEach(node => {
    if (node.expanded) {
      expandedIds.value.add(node.id)
    }
    if (node.children) {
      initExpanded(node.children)
    }
  })
}
initExpanded(mockTreeData.value)

// 初始化时emit tree data
emit('tree-data-update', mockTreeData.value)

// 查找 Review 和 Map 节点用于分类判断
const findInboxChildren = () => {
  const inboxNode = mockTreeData.value.find(n => n.label === 'Inbox')
  return {
    reviewNode: inboxNode?.children?.find(c => c.label === 'Review'),
    mapNode: inboxNode?.children?.find(c => c.label === 'Map')
  }
}

// 检查节点是否在某个父节点下
const isDescendantOf = (ancestor: TreeNode | undefined, node: TreeNode): boolean => {
  if (!ancestor) return false
  if (node.id === ancestor.id) return true
  if (node.children) {
    return node.children.some(child => isDescendantOf(ancestor, child))
  }
  return false
}

// 查找节点的父节点
const findParent = (nodes: TreeNode[], targetNode: TreeNode): TreeNode | null => {
  for (const node of nodes) {
    if (node.children) {
      if (node.children.some(child => child.id === targetNode.id)) {
        return node
      }
      const found = findParent(node.children, targetNode)
      if (found) return found
    }
  }
  return null
}

// 初始化 review_history：每个终端节点生成多种类型的初始数据
onMounted(() => {
  let terminalNodeIndex = 0

  const traverse = (nodes: TreeNode[]) => {
    for (const node of nodes) {
      // 跳过 Inbox 及其直接子节点
      const isInboxOrDirectChild = node.label === 'Inbox' ||
        node.label === 'Review' ||
        node.label === 'Map' ||
        mockTreeData.value.find(n => n.label === 'Inbox')?.children?.some(c => c.id === node.id)

      if (!isInboxOrDirectChild && node.isTerminal) {
        const reviewHistoryKey = `review_history_${node.id}`
        const existingHistory = localStorage.getItem(reviewHistoryKey)

        if (!existingHistory) {
          // 使用 generateMockReviewHistory 生成完整的审核历史
          const reviewRecords = generateMockReviewHistory(node.id, node.label, node.lastChangedBy || 'zhangsan')
          
          // 为一些节点添加特殊的 Map 状态
          if (terminalNodeIndex % 3 === 1) { // 每第三个终端节点添加 Map Approved
            // 添加 Map Approved 记录
            const mapApprovedRecord = {
              id: `${node.id}-map-approved`,
              type: 'response',
              reviewer: 'admin',
              status: 'map approved',
              comment: 'Map Approved - 此文档已通过地图审核，可以进行下一步处理',
              date: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString().split('T')[0] + ' 16:30:00',
              version: '0.0.9',
              reviewType: 'map'
            }
            reviewRecords.unshift(mapApprovedRecord)
          } else if (terminalNodeIndex % 3 === 2) { // 每第四个终端节点添加 Map Reviewed
            // 添加 Map Reviewed 记录
            const mapReviewedRecord = {
              id: `${node.id}-map-reviewed`,
              type: 'response',
              reviewer: 'admin',
              status: 'map reviewed',
              comment: 'Map Reviewed - 地图审核已完成，等待最终批准',
              date: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString().split('T')[0] + ' 14:15:00',
              version: '0.0.9',
              reviewType: 'map'
            }
            reviewRecords.unshift(mapReviewedRecord)
          }
          
          localStorage.setItem(reviewHistoryKey, JSON.stringify(reviewRecords))
        }
        terminalNodeIndex++
      }

      if (node.children) {
        traverse(node.children)
      }
    }
  }

  traverse(mockTreeData.value)
})

const handleToggle = (id: string, isDialog = false) => {
  const targetSet = isDialog ? dialogExpandedIds : expandedIds
  if (targetSet.value.has(id)) {
    targetSet.value.delete(id)
  } else {
    targetSet.value.add(id)
  }
}

const handleDoubleClick = (id: string, node: TreeNode) => {
  if (hasChildren(node)) {
    handleToggle(id)
  }
}

const handleSelect = (id: string, node: TreeNode) => {
  selectedId.value = id
  emit('update:modelValue', id)
  emit('select', node)
}

// 展开所有节点
const expandAll = () => {
  const expandNode = (nodes: TreeNode[]) => {
    nodes.forEach(node => {
      if (node.children && node.children.length > 0) {
        expandedIds.value.add(node.id)
        expandNode(node.children)
      }
    })
  }
  expandNode(mockTreeData.value)
}

// 折叠所有节点
const collapseAll = () => {
  expandedIds.value.clear()
}

const isExpanded = (id: string, isDialog = false) => {
  const targetSet = isDialog ? dialogExpandedIds : expandedIds
  return targetSet.value.has(id)
}
const isSelected = (id: string) => selectedId.value === id

const hasChildren = (node: TreeNode) => node.children && node.children.length > 0
// 终端节点：只根据显式标记的isTerminal判断
const isTerminalNode = (node: TreeNode) => {
  return node.isTerminal === true
}

// 检查节点权限 - 基于末端节点状态
const canCopy = (node: TreeNode) => getNodePermissions(node).copy
const canClone = (node: TreeNode) => getNodePermissions(node).clone
const canBranch = (node: TreeNode) => getNodePermissions(node).branch

// 右键菜单 - 添加边界检查
const handleContextMenu = (e: MouseEvent, nodeId: string) => {
  e.preventDefault()

  const menuWidth = 180
  const menuHeight = 300  // 增加高度以适应更多菜单项
  let x = e.clientX
  let y = e.clientY

  if (x + menuWidth > window.innerWidth) {
    x = window.innerWidth - menuWidth - 10
  }

  if (y + menuHeight > window.innerHeight) {
    y = window.innerHeight - menuHeight - 10
  }

  if (x < 0) x = 10
  if (y < 0) y = 10

  contextMenu.value = {
    show: true,
    x,
    y,
    nodeId
  }
}

const closeContextMenu = () => {
  contextMenu.value.show = false
}

const openOperationDialog = (mode: 'copy' | 'clone' | 'branch') => {
  const currentSourceNodeId = contextMenu.value?.nodeId || ''
  const currentNode = findNode(mockTreeData.value, currentSourceNodeId)
  
  operationDialog.value = {
    show: true,
    mode,
    sourceNodeId: currentSourceNodeId,
    selectedSourceIds: [],
    owner: currentNode?.owner || 'admin'
  }
  dialogExpandedIds.value = new Set(expandedIds.value)
  closeContextMenu()
}

const handleDelete = () => {
  const nodeId = contextMenu.value?.nodeId || ''
  if (nodeId === '1') {
    alert('Cannot delete root node')
    closeContextMenu()
    return
  }
  if (confirm('Are you sure you want to delete this node?')) {
    deleteNodeFromTree(mockTreeData.value, nodeId)
    if (selectedId.value === nodeId) {
      selectedId.value = null
    }
  }
  closeContextMenu()
}

// 添加同级节点
const handleAddSibling = () => {
  console.log('handleAddSibling called')
  const nodeId = contextMenu.value?.nodeId || ''
  console.log('nodeId:', nodeId)
  const node = findNode(mockTreeData.value, nodeId)
  console.log('node found:', node)
  if (!node) return
  
  // 找到父节点
  const parentNode = findParentNode(mockTreeData.value, nodeId)
  console.log('parentNode found:', parentNode)
  
  // 打开添加节点对话框
  // 如果没有父节点，则使用空字符串作为parentNodeId
  addNodeDialog.value = {
    show: true,
    mode: 'sibling',
    parentNodeId: parentNode?.id || '',
    targetNodeId: nodeId,
    nodeType: 'Product Scenario',
    owner: 'admin',
    reviewer: ''
  }
  console.log('addNodeDialog set to show')
  
  closeContextMenu()
}

// 添加下级节点
const handleAddChild = () => {
  console.log('handleAddChild called')
  const nodeId = contextMenu.value?.nodeId || ''
  console.log('nodeId:', nodeId)
  const node = findNode(mockTreeData.value, nodeId)
  console.log('node found:', node)
  if (!node) return
  
  // 打开添加节点对话框
  addNodeDialog.value = {
    show: true,
    mode: 'child',
    parentNodeId: nodeId,
    targetNodeId: nodeId,
    nodeType: 'Product Scenario',
    owner: 'admin',
    reviewer: ''
  }
  console.log('addNodeDialog set to show')
  
  closeContextMenu()
}

// 查找节点在父节点中的索引位置
const findNodeIndex = (parent: TreeNode, targetId: string): number => {
  if (!parent.children) return -1
  return parent.children.findIndex(child => child.id === targetId)
}

// 确认添加节点
const confirmAddNode = () => {
  const { mode, parentNodeId, targetNodeId } = addNodeDialog.value
  const targetNode = findNode(mockTreeData.value, targetNodeId)
  
  if (!targetNode) {
    alert('Node does not exist')
    return
  }
  
  // 获取输入的节点名称
  const nodeName = (document.getElementById('new-node-name') as HTMLInputElement)?.value || 
    (mode === 'sibling' ? '新建节点' : '新建子节点')
  
  // 获取owner
  const owner = addNodeDialog.value.owner || 'admin'
  
  // 获取reviewer
  const reviewer = addNodeDialog.value.nodeType === 'document' ? addNodeDialog.value.reviewer || '' : ''
  
  // 创建新节点
  const newNode: TreeNode = {
    id: `${targetNodeId}-${Date.now()}`,
    label: nodeName,
    type: 'folder',
    status: 'work',
    version: '(1)',
    expanded: false,
    children: undefined,
    isTerminal: false,
    createDate: new Date().toISOString().split('T')[0],
    access: 'Read',
    owner: owner,
    lastChangedBy: owner,
    lastChangedDate: new Date().toISOString().split('T')[0],
    reviewer: reviewer
  }
  
  // 根据模式添加节点
  if (mode === 'sibling') {
    // 如果没有父节点ID，说明是在根级别添加同级节点
    if (!parentNodeId) {
      // 在 mockTreeData 根级别添加
      const targetIndex = mockTreeData.value.findIndex(n => n.id === targetNodeId)
      if (targetIndex !== -1) {
        mockTreeData.value.splice(targetIndex + 1, 0, newNode)
      } else {
        mockTreeData.value.push(newNode)
      }
    } else {
      // 有父节点，在父节点的children中添加
      const parentNode = findNode(mockTreeData.value, parentNodeId)
      if (!parentNode) {
        alert('Parent node does not exist')
        return
      }
      
      if (!parentNode.children) {
        parentNode.children = []
      }
      
      // 找到目标节点在父节点中的位置
      const targetIndex = findNodeIndex(parentNode, targetNodeId)
      
      if (targetIndex !== -1) {
        // 在目标节点后插入新节点
        parentNode.children.splice(targetIndex + 1, 0, newNode)
      } else {
        // 如果没找到，添加到末尾
        parentNode.children.push(newNode)
      }
    }
  } else {
    // 添加下级节点
    if (!targetNode.children) {
      targetNode.children = []
    }
    targetNode.children.push(newNode)
    // 展开目标节点
    expandedIds.value.add(targetNodeId)
  }
  
  // 关闭对话框
  addNodeDialog.value.show = false
}

// 查找父节点的辅助函数
const findParentNode = (nodes: TreeNode[], childId: string, parent: TreeNode | null = null): TreeNode | null => {
  for (const node of nodes) {
    if (node.id === childId) {
      return parent
    }
    if (node.children) {
      const found = findParentNode(node.children, childId, node)
      if (found) return found
    }
  }
  return null
}

// 检查操作是否可用 - 基于节点类型
const isCopyEnabled = (node: TreeNode | null) => {
  return node ? canCopy(node) : false
}

const isCloneEnabled = (node: TreeNode | null) => {
  return node ? canClone(node) : false
}

const isBranchEnabled = (node: TreeNode | null) => {
  return node ? canBranch(node) : false
}

// Check if a node is in Projects tree
const isInProjects = (node: TreeNode): boolean => {
  // Find Projects root
  // Projects is usually at the top level in mockTreeData
  const projectsRoot = mockTreeData.value.find(n => n.label === 'Projects')
  if (!projectsRoot) return false
  
  // Helper to check descendant
  const isDescendant = (parent: TreeNode, targetId: string): boolean => {
    if (parent.id === targetId) return true
    if (parent.children) {
      return parent.children.some(child => isDescendant(child, targetId))
    }
    return false
  }
  
  return isDescendant(projectsRoot, node.id)
}

const isMapEnabled = (node: TreeNode | null) => {
  if (!node) return false
  // Map allowed if: is terminal AND is in Projects tree AND not already mapped
  const isMapped = node.status === 'mapped' || (node.versions && node.versions[0] && node.versions[0].author === '系统映射')
  return isTerminalNode(node) && isInProjects(node) && !isMapped
}

const handleMapTo = () => {
    if (!contextMenuNode.value || !isMapEnabled(contextMenuNode.value)) return
    
    // Select the node
    handleSelect(contextMenuNode.value.id, contextMenuNode.value)
    
    // Switch to Map view
    emit('switch-view', 'map')
    
    // Close menu
    closeContextMenu()
}

const executeOperation = () => {
  // destinationNode (Context Menu Node) is where we want to add the new node (TARGET)
  const destinationNode = findNode(mockTreeData.value, operationDialog.value.sourceNodeId)
  
  if (!destinationNode) {
     return
  }
  
  // Determine actual parent for valid insertion
  // If destination is a Terminal, we add as sibling (to its parent)
  // If destination is a Folder (or Branch), we add as child
  let targetParent = destinationNode
  if (isTerminalNode(destinationNode)) {
     const parent = findParentNode(mockTreeData.value, destinationNode.id)
     if (parent) {
       targetParent = parent
     } else {
       // Should not happen for valid tree structure unless root is terminal
       console.warn('Cannot add to terminal root node')
       return
     }
  }

  const sourceIds = operationDialog.value.selectedSourceIds
  if (sourceIds.length === 0) {
    alert('Please select at least one source node')
    return
  }

  const { mode } = operationDialog.value
  let processedCount = 0

  sourceIds.forEach(sourceId => {
      // sourceNode (Dialog Selection) is where we want to copy FROM (SOURCE)
      const sourceNode = findNode(mockTreeData.value, sourceId)
      if (!sourceNode) return
      
      // Strict constraint: Copy/Clone/Branch only allow terminal nodes as source
      // even if user selected a folder (for UI convenience).
      if (!isTerminalNode(sourceNode)) {
        return
      }

      if (mode === 'copy') {
        const newNode = cloneNode(sourceNode, `${destinationNode.id}-${Date.now()}-${processedCount}`)
        newNode.label = `${newNode.label} (Copy)`
        newNode.owner = operationDialog.value.owner
        addChildNode(targetParent, newNode)
      } else if (mode === 'clone') {
        const newNode: TreeNode = {
          ...sourceNode,
          id: `${destinationNode.id}-${Date.now()}-${processedCount}`,
          label: `${sourceNode.label} (Clone)`,
          isClone: true,
          cloneSourceId: sourceNode.id,
          owner: operationDialog.value.owner
        }
        addChildNode(targetParent, newNode)
      } else if (mode === 'branch') {
         // Even if source is terminal, "Branch" op might function like copy
        const newNode = cloneNode(sourceNode, `${destinationNode.id}-${Date.now()}-${processedCount}`)
        newNode.label = `${newNode.label} (Branch)`
        newNode.owner = operationDialog.value.owner
        addChildNode(targetParent, newNode)
      }
      processedCount++
  })

  operationDialog.value.show = false
  expandedIds.value.add(targetParent.id)
}

const flattenedNodes = computed(() => {
  const result: Array<{ node: TreeNode; level: number }> = []

  const flatten = (nodes: TreeNode[], level: number, isDialog = false) => {
    nodes.forEach(node => {
      result.push({ node, level })
      if (node.children && isExpanded(node.id, isDialog)) {
        flatten(node.children, level + 1, isDialog)
      }
    })
  }

  flatten(mockTreeData.value, 0)
  return result
})

const dialogFlattenedNodes = computed(() => {
  const result: Array<{ node: TreeNode; level: number }> = []

  const flatten = (nodes: TreeNode[], level: number) => {
    nodes.forEach(node => {
      result.push({ node, level })
      if (node.children && isExpanded(node.id, true)) {
        flatten(node.children, level + 1)
      }
    })
  }

  flatten(mockTreeData.value, 0)
  return result
})

const sourceNodeForDialog = computed(() => {
  return findNode(mockTreeData.value, operationDialog.value.sourceNodeId)
})

const contextMenuNode = computed(() => {
  return findNode(mockTreeData.value, contextMenu.value?.nodeId || '')
})

// 更新节点内容的方法
const updateNodeContent = (nodeId: string, content: any) => {
  const node = findNode(mockTreeData.value, nodeId)
  if (node) {
    node.content = content
    // 更新最后修改信息
    node.lastChangedBy = node.owner || 'admin'
    node.lastChangedDate = new Date().toISOString().split('T')[0]
    console.log('Node content updated:', nodeId)
  }
}

// 初始化review_history
const initializeReviewHistory = () => {
  const traverse = (nodes: TreeNode[]) => {
    for (const node of nodes) {
      if (node.isTerminal && node.versions && node.versions.length > 0) {
        const reviewHistoryKey = `review_history_${node.id}`
        const existingHistory = localStorage.getItem(reviewHistoryKey)
        if (!existingHistory) {
          // 使用 generateMockReviewHistory 生成完整的审核历史
          const reviewRecords = generateMockReviewHistory(node.id, node.label, node.lastChangedBy || 'zhangsan')
          localStorage.setItem(reviewHistoryKey, JSON.stringify(reviewRecords))
        }
      }
      if (node.children) {
        traverse(node.children)
      }
    }
  }
  traverse(mockTreeData.value)
}

onMounted(() => {
  initializeReviewHistory()
})

// 暴露方法给父组件
defineExpose({
  updateNodeContent
})
</script>

<template>
  <div class="tree-view" @click="closeContextMenu">
    <div class="tree-header">
      <div class="tree-header-title">
        <span class="tree-header-icon">
          <Database :size="14" />
        </span>
        <span>Vehicle level - Default(modified)</span>
      </div>
      <div class="tree-header-actions">
        <button class="tree-header-btn" title="Expand All" @click="expandAll">
          <Plus :size="12" />
        </button>
        <button class="tree-header-btn" title="Collapse All" @click="collapseAll">
          <Minus :size="12" />
        </button>
      </div>
    </div>
    <div class="tree-content">
      <div class="tree-column-headers">
        <span class="tree-col-name">Name</span>
        <span class="tree-col-status">Status</span>
        <span class="tree-col-version">Version</span>
      </div>
      <div class="tree-nodes">
        <div v-for="{ node, level } in flattenedNodes" :key="node.id"
          :class="['tree-node-wrapper', { 'has-children': hasChildren(node) }]">
          <div :class="['tree-node', { selected: isSelected(node.id) }]" :style="{ paddingLeft: `${level * 16 + 4}px` }"
            @click="handleSelect(node.id, node)" @dblclick="handleDoubleClick(node.id, node)"
            @contextmenu="handleContextMenu($event, node.id)">
            <span class="tree-node-toggle" @click.stop="handleToggle(node.id)">
              <Minus v-if="hasChildren(node) && isExpanded(node.id)" :size="12" />
              <Plus v-else-if="hasChildren(node)" :size="12" />
              <span v-else class="tree-node-spacer" />
            </span>
            <span class="tree-node-icon">
              <Link v-if="isMappedNode(node)" :size="14" class="icon-mapped" />
              <FileText v-else-if="isTerminalNode(node)" :size="14" class="icon-terminal" />
              <FolderOpen v-else-if="isExpanded(node.id)" :size="14" class="icon-folder-open" />
              <Folder v-else :size="14" class="icon-folder" />
            </span>
            <span class="tree-node-label" :title="node.label">
              {{ node.label }}
              <span v-if="node.department" class="dept-badge">[{{ node.department }}]</span>
              <span v-if="node.label === 'Inbox' && inboxTotalCount > 0" class="inbox-count">({{ inboxTotalCount }})</span>
              <span v-if="node.label === 'Map' && mappedCount > 0" class="inbox-count">({{ mappedCount }})</span>
              <span v-if="node.label === 'Review' && pendingReviewCount > 0" class="inbox-count">({{ pendingReviewCount }})</span>
              <span v-if="node.isClone" class="clone-badge">(Clone)</span>
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 右键菜单 -->
    <div v-if="contextMenu.show" class="context-menu" :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
      @click.stop>
        <div class="menu-group">
          <div class="menu-item" @click="handleAddSibling">
            <CornerUpLeft :size="14" />
            <span>添加同级节点</span>
          </div>
          <div class="menu-item" @click="handleAddChild">
            <CornerDownLeft :size="14" />
            <span>添加下级节点</span>
          </div>
          <div class="menu-item delete" @click="handleDelete">
            <Trash2 :size="14" />
            <span>edit</span>
          </div>
          <div class="menu-item delete" @click="handleDelete">
            <Trash2 :size="14" />
            <span>Delete</span>
          </div>   
        </div>
        <div class="menu-divider"></div>
        <div class="menu-group">
          <div class="menu-item" :class="{ disabled: !isCopyEnabled(contextMenuNode) }"
            @click="isCopyEnabled(contextMenuNode) && openOperationDialog('copy')">
            <Copy :size="14" />
            <span>添加文档 (Copy From)...</span>
          </div>
          <div class="menu-item" :class="{ disabled: !isCloneEnabled(contextMenuNode) }"
            @click="isCloneEnabled(contextMenuNode) && openOperationDialog('clone')">
            <Database :size="14" />
            <span>添加文档 (Clone From)...</span>
          </div>
          <div class="menu-item" :class="{ disabled: !isBranchEnabled(contextMenuNode) }"
            @click="isBranchEnabled(contextMenuNode) && openOperationDialog('branch')">
            <GitBranch :size="14" />
            <span>Branch From...</span>
          </div>
          <div class="menu-item" :class="{ disabled: !isMapEnabled(contextMenuNode) }"
            @click="isMapEnabled(contextMenuNode) && handleMapTo()">
            <Plus :size="14" />
            <span>Map To...</span>
          </div>
        </div>
    </div>

    <!-- 添加节点对话框 -->
    <div v-if="addNodeDialog.show" class="dialog-overlay" @click="addNodeDialog.show = false">
      <div class="add-node-dialog" @click.stop>
        <div class="dialog-header">
          <h3>{{ addNodeDialog.mode === 'sibling' ? '添加同级节点' : '添加下级节点' }}</h3>
          <button class="close-btn" @click="addNodeDialog.show = false">
            <X :size="18" />
          </button>
        </div>

        <div class="dialog-body">
          <div class="input-group">
            <label for="new-node-name">节点名称:</label>
            <input 
              type="text" 
              id="new-node-name" 
              class="node-name-input"
              :placeholder="addNodeDialog.mode === 'sibling' ? '请输入同级节点名称' : '请输入子节点名称'"
              autofocus
              @keyup.enter="confirmAddNode"
            />
          </div>
          
          <div class="input-group">
            <label for="new-node-type">节点类型:</label>
            <div class="radio-group">
              <label 
                v-for="type in nodeTypes" 
                :key="type" 
                class="radio-option"
              >
                <input 
                  type="radio" 
                  :value="type" 
                  v-model="addNodeDialog.nodeType"
                  name="node-type"
                />
                <span>{{ type }}</span>
              </label>
            </div>
          </div>
          
          <div class="input-group">
            <label for="new-node-owner">Owner:</label>
            <input 
              type="text" 
              id="new-node-owner" 
              class="node-owner-input"
              v-model="addNodeDialog.owner"
              placeholder="请输入owner"
            />
          </div>
          
          <div class="input-group" v-if="addNodeDialog.nodeType === 'document'">
            <label for="new-node-reviewer">Reviewer:</label>
            <input 
              type="text" 
              id="new-node-reviewer" 
              class="node-owner-input"
              v-model="addNodeDialog.reviewer"
              placeholder="请输入reviewer"
            />
          </div>
        </div>

        <div class="dialog-footer">
          <button class="btn btn-secondary" @click="addNodeDialog.show = false">取消</button>
          <button class="btn btn-primary" @click="confirmAddNode">确定</button>
        </div>
      </div>
    </div>

    <!-- 操作选择弹窗 -->
    <div v-if="operationDialog.show" class="dialog-overlay" @click="operationDialog.show = false">
      <div class="operation-dialog" @click.stop>
        <div class="dialog-header">
          <h3>{{ operationDialog.mode === 'copy' ? 'Copy Node' : operationDialog.mode === 'clone' ? 'Clone Node' :
            'Branch Node' }}</h3>
          <button class="close-btn" @click="operationDialog.show = false">
            <X :size="18" />
          </button>
        </div>

        <div class="dialog-body">
          <div class="source-info">
            <label>Target (Destination):</label>
            <span class="source-name">{{ sourceNodeForDialog?.label }}</span>
            <span class="source-type">{{ isTerminalNode(sourceNodeForDialog!) ? '(Terminal)' : '(Branch)' }}</span>
          </div>

          <div class="target-selection">
            <label>Select Source:</label>
            <div class="target-tree">
              <div v-for="{ node, level } in dialogFlattenedNodes" :key="node.id"
                :class="['tree-node']"
                :style="{ paddingLeft: `${level * 16 + 8}px` }">
                <span class="tree-node-toggle" @click.stop="handleToggle(node.id, true)">
                  <Minus v-if="hasChildren(node) && isExpanded(node.id, true)" :size="10" />
                  <Plus v-else-if="hasChildren(node)" :size="10" />
                  <span v-else class="tree-node-spacer-small" />
                </span>
                
                <input 
                  type="checkbox" 
                  :checked="isIdsSelected(node)" 
                  :indeterminate.prop="isIdsIndeterminate(node)"
                  :disabled="!isTerminalNode(node)"
                  @change="toggleSourceSelection(node)"
                  style="margin-right: 6px;"
                />

                <span class="tree-node-icon">
                  <Link v-if="isMappedNode(node)" :size="12" class="icon-mapped" />
                  <FileText v-else-if="isTerminalNode(node)" :size="12" class="icon-terminal" />
                  <FolderOpen v-else-if="isExpanded(node.id, true)" :size="12" class="icon-folder-open" />
                  <Folder v-else :size="12" class="icon-folder" />
                </span>
                <span class="tree-node-label-small" @click="toggleSourceSelection(node)">{{ node.label }}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="dialog-footer">
          <div class="owner-input-group">
            <label>Owner:</label>
            <input type="text" v-model="operationDialog.owner" class="dialog-input" />
          </div>
          <div class="dialog-actions">
            <button class="btn btn-secondary" @click="operationDialog.show = false">Cancel</button>
            <button class="btn btn-primary" @click="executeOperation" :disabled="operationDialog.selectedSourceIds.length === 0">
              {{ operationDialog.mode === 'copy' ? 'Copy' : operationDialog.mode === 'clone' ? 'Clone' : 'Branch' }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tree-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
  border-bottom: 1px solid #a0a0a0;
}

.tree-header-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.tree-header-icon {
  color: #0078d4;
}

.tree-header-actions {
  display: flex;
  gap: 4px;
}

.tree-header-btn {
  padding: 4px;
  background: transparent;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tree-header-btn:hover {
  background: #d0d0d0;
  color: #333;
}

.tree-content {
  flex: 1;
  overflow: auto;
}

.tree-column-headers {
  display: flex;
  padding: 4px 8px;
  background: #e8e8e8;
  border-bottom: 1px solid #a0a0a0;
  font-size: 11px;
  font-weight: 600;
  color: #666;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tree-col-name {
  flex: 1;
  min-width: 150px;
}

.tree-col-status,
.tree-col-version {
  width: 70px;
  text-align: center;
}

.tree-nodes {
  padding: 2px 0;
}

.tree-node-wrapper {
  display: flex;
  flex-direction: column;
}

.tree-node {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.1s;
  border-bottom: 1px solid transparent;
  user-select: none;
}

.tree-node:hover {
  background: #d0d0d0;
}

.tree-node.selected {
  background: #cde8ff;
  border-bottom-color: #0078d4;
}

.tree-node-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 2px;
  cursor: pointer;
  color: #666;
}

.tree-node-spacer,
.tree-node-spacer-small {
  width: 14px;
}

.tree-node-spacer-small {
  width: 10px;
}

.tree-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.icon-folder,
.icon-folder-open {
  color: #daa520;
}

.icon-requirement {
  color: #0078d4;
}

.icon-subsystem {
  color: #6b8e23;
}

.icon-component {
  color: #cd853f;
}

.icon-attribute {
  color: #9370db;
}

.icon-issue {
  color: #dc3545;
}

.icon-terminal {
  color: #666;
}

.icon-mapped {
  color: #0078d4;
}

.icon-version {
  color: #17a2b8;
}

.icon-default {
  color: #999;
}

.tree-node-label,
.tree-node-label-small {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: #333;
}

.tree-node-label-small {
  font-size: 11px;
}

.clone-badge {
  font-size: 10px;
  color: #0078d4;
  margin-left: 4px;
}

.inbox-count {
  color: #dc3545;
  font-weight: bold;
  margin-left: 4px;
}

.dept-badge {
  color: #666;
  font-size: 0.85em;
  margin-left: 6px;
  background: #eaeaea;
  padding: 0 4px;
  border-radius: 3px;
  border: 1px solid #ddd;
}

/* 右键菜单 */
.context-menu {
  position: fixed;
  background: #fff;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 160px;
  padding: 4px 0;
}

.menu-group {
  padding: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #333;
  transition: background 0.15s;
}

.menu-item:hover:not(.disabled) {
  background: #f0f8ff;
}

.menu-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.menu-item.delete {
  color: #dc3545;
}

.menu-item.delete:hover {
  background: #fff5f5;
}

.menu-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 4px 0;
}

/* 操作选择弹窗 */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.operation-dialog {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.dialog-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #666;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #333;
}

.dialog-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.source-info {
  margin-bottom: 20px;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 4px;
}

.source-info label {
  font-size: 12px;
  color: #666;
  display: block;
  margin-bottom: 4px;
}

.source-name {
  font-weight: 600;
  color: #333;
  margin-right: 8px;
}

.source-type {
  font-size: 11px;
  color: #0078d4;
  background: #e8f4fc;
  padding: 2px 6px;
  border-radius: 3px;
}

.operation-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.op-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.op-btn:hover:not(.disabled) {
  border-color: #0078d4;
  background: #f0f8ff;
}

.op-btn.active {
  border-color: #0078d4;
  background: #e8f4fc;
}

.op-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.op-btn span {
  font-weight: 600;
  color: #333;
}

.op-btn small {
  font-size: 11px;
  color: #666;
}

.target-selection {
  margin-top: 20px;
}

.target-selection label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.target-tree {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fafafa;
}

.target-tree .tree-node {
  padding: 3px 8px;
  border-bottom: 1px solid #f0f0f0;
}

.target-tree .tree-node:last-child {
  border-bottom: none;
}

.target-tree .tree-node:hover {
  background: #f0f0f0;
}

.target-tree .tree-node.selected {
  background: #cde8ff;
  border-bottom-color: #0078d4;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid #e0e0e0;
}

.owner-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.owner-input-group label {
  font-size: 13px;
  font-weight: 500;
  color: #333;
}

.dialog-input {
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  width: 150px;
  outline: none;
  transition: border-color 0.2s;
}

.dialog-input:focus {
  border-color: #0078d4;
}

.dialog-actions {
  display: flex;
  gap: 12px;
}

.btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.btn-secondary {
  background: #f5f5f5;
  border-color: #c0c0c0;
  color: #333;
}

.btn-secondary:hover {
  background: #e0e0e0;
}

.btn-primary {
  background: #0078d4;
  border-color: #0078d4;
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: #106ebe;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 添加节点对话框 */
.add-node-dialog {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  width: 400px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.node-name-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  outline: none;
  transition: border-color 0.2s;
}

.node-name-input:focus {
  border-color: #0078d4;
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

.node-name-input::placeholder {
  color: #999;
}

/* 节点类型单选按钮组样式 */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #555;
  transition: all 0.2s;
  background: #fff;
}

.radio-option:hover {
  border-color: #0078d4;
  background: #f0f8ff;
}

.radio-option input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

.radio-option input[type="radio"]:checked + span {
  color: #0078d4;
  font-weight: 500;
}

.radio-option:has(input[type="radio"]:checked) {
  border-color: #0078d4;
  background: #e6f2ff;
}

/* Owner输入框样式 - 与节点名称输入框统一 */
.node-owner-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  outline: none;
  transition: border-color 0.2s;
}

.node-owner-input:focus {
  border-color: #0078d4;
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

.node-owner-input::placeholder {
  color: #999;
}
</style>