<template>
    <div class="document-tree-container">
      <div class="document-tree-header">
        <span class="document-tree-title">题库归属</span>
        <el-button type="primary" size="small" @click="handleAddDocument">
          <el-icon><Plus /></el-icon>添加分类
        </el-button>
      </div>
      <el-tree
        ref="treeRef"
        :data="treeData"
        node-key="id"
        :props="defaultProps"
        default-expand-all
        highlight-current
        @node-click="handleNodeClick"
      >
        <template #default="{ node, data }">
          <div class="custom-tree-node">
            <div class="node-label">
              <el-icon><Folder /></el-icon>
              <span class="ml-2">{{ data.title }}</span>
            </div>
          <!--   <div class="node-actions" v-if="data.id">
              <el-button type="primary" link size="small" @click.stop="handleEdit(data)">
                <el-icon><Edit /></el-icon>
              </el-button>
              <el-button type="danger" link size="small" @click.stop="handleDelete(node, data)">
                <el-icon><Delete /></el-icon>
              </el-button>
            </div> -->
          </div>
        </template>
      </el-tree>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, defineProps, defineEmits } from 'vue';
  import { Plus, Folder, Edit, Delete } from '@element-plus/icons-vue';
  
  const props = defineProps({
    treeData: {
      type: Array,
      default: () => []
    }
  });
  
  const emit = defineEmits(['treeClick', 'updateDocument', 'deleteDocument']);
  
  const treeRef = ref(null);
  
  const defaultProps = {
    children: 'children',
    label: 'title'
  };
  
  // 处理节点点击
  const handleNodeClick = (data: any, node: any) => {
    // 获取当前节点的层级路径
    let currentNode = node;
    let firstLevelNode = null;
    let secondLevelNode = null;
  
    // 遍历父节点找到一级和二级节点
    while (currentNode) {
      if (currentNode.level === 1) {
        firstLevelNode = currentNode.data;
      } else if (currentNode.level === 2) {
        secondLevelNode = currentNode.data;
      }
      currentNode = currentNode.parent;
    }
  
    // 如果当前点击的是一级节点
    if (node.level === 1) {
      firstLevelNode = data;
      secondLevelNode = null;
    }
    // 如果当前点击的是二级节点
    else if (node.level === 2) {
      secondLevelNode = data;
    }
  
    emit('treeClick', {
      firstLevel: firstLevelNode,
      secondLevel: secondLevelNode,
      currentNode: data
    });
  };
  
  // 添加文档分类
  const handleAddDocument = () => {
    emit('updateDocument', 'add');
  };
  
  // 编辑文档分类
  const handleEdit = (data: any) => {
    emit('updateDocument', 'update', data);
  };
  
  // 删除文档分类
  const handleDelete = (node: any, data: any) => {
    emit('deleteDocument', data.id, () => {
      // 回调函数，删除成功后可以执行
    });
  };
  
  defineExpose({
    treeRef
  });
  </script>
  
  <style lang="scss" scoped>
  .document-tree-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .document-tree-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }
  
  .document-tree-title {
    font-size: 16px;
    font-weight: bold;
  }
  
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 8px;
  }
  
  .node-label {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    position: relative;
    
    .ml-2 {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      flex: 1;
    }
  }
  
  
  .node-actions {
    display: none;
  }
  
  .custom-tree-node:hover .node-actions {
    display: flex;
    overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
  }
  </style> 