<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;
  width:130px;
  
  .ml-2 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 8px;
    
  }
}


.node-actions {
  display: none;
}

.custom-tree-node:hover .node-actions {
  display: flex;
  overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
}
</style> 