<template>
  <div class="tree-panel">
    <div class="tree-header">
      车机版本树
    </div>
    <div class="tree-container">
      <el-tree
        ref="treeRef"
        :data="treeData"
        node-key="id"
        :props="treeProps"
        :expand-on-click-node="false"
        :highlight-current="true"
        @node-click="handleNodeClick"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getTreeDataApi } from '@/api/is/func/index'

// 定义 emits
const emit = defineEmits()

// 树形结构数据
const treeData = ref([])

// 树形配置
const treeProps = {
  children: 'children',
  label: 'label'
}

// 树节点点击
function handleNodeClick(data) {
  emit('node-click', data)
}

const getTreeData = async () => {
  const res = await getTreeDataApi()
  if (res) {
    treeData.value = res
  }
}

onMounted(() => {
  getTreeData()
})
</script>

<style scoped>
.tree-panel {
  height: 100%;
  background: white;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
}

.tree-header {
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.tree-container {
  flex: 1;
  padding: 16px;
  overflow: auto;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

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

:deep(.el-tree-node__content) {
  height: 36px;
}

:deep(.el-tree-node__content:hover) {
  background-color: #f5f7fa;
}
</style>