<template>
  <aside class="article-nav-tree">
    <div class="tree-title">导航</div>
    <div class="tree-scroll">
      <el-tree
        ref="treeRef"
        :data="treeData"
        node-key="id"
        :props="treeProps"
        :current-node-key="currentNodeKey"
        highlight-current
        default-expand-all
        @node-click="onNodeClick"
      />
    </div>
  </aside>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
  treeData: {
    type: Array,
    default: () => []
  },
  currentNodeKey: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['node-click'])
const treeRef = ref(null)
const treeProps = { label: 'title', children: 'children' }

function onNodeClick(nodeData) {
  emit('node-click', nodeData)
}
</script>

<style scoped lang="scss">
.article-nav-tree {
  width: 280px;
  flex-shrink: 0;
  padding: 16px 19px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #e8ecf2;
  border-radius: 8px;
  background: #fff;
}

.tree-title {
  font-family: 'Source Han Sans CN', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary-80-color, #344054);
  margin-bottom: 17px;
}

:deep(.article-nav-tree .el-tree) {
  min-width: 0;
}

.tree-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

:deep(.article-nav-tree .el-tree-node__label) {
  font-family: 'Source Han Sans CN', sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-primary-80-color, #344054);
}
</style>
