<template>
  <view class="tree-container">
    <view v-for="(node, index) in data" :key="index" class="tree-node">
      <!-- 修改：添加库存数显示 -->
      <view class="node-content" @click="handleNodeClick(node)">
        <text class="node-label">{{ node[defaultProps.label] }}</text>
        <!-- 关键：只在最后一级节点显示库存数 -->
        <text v-if="!node[defaultProps.children] && node.storageNum" class="storage-num">
          （{{ node.storageNum }}）
        </text>
      </view>
      <!-- 始终显示子节点 -->
      <view class="children-container">
        <leo-tree :data="node[defaultProps.children]" :defaultProps="defaultProps" @node-click="handleNodeClick"></leo-tree>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'leoTree',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    defaultProps: {
      type: Object,
      default: () => ({
        id: 'id',
        children: 'children',
        label: 'label'
      })
    },
    // 添加默认展开所有节点的属性
    defaultExpandAll: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleNodeClick(node) {
      this.$emit('node-click', node)
    }
  }
}
</script>

<style scoped>
.tree-container {
  width: 100%;
}

.tree-node {
  padding: 4rpx 0;
}

.node-content {
  display: flex;
  align-items: center;
  padding: 12rpx 16rpx;
  cursor: pointer;
  font-size: 28rpx;
  /* 添加：让标签和库存数在一行显示 */
  justify-content: space-between;
}

.node-content:hover {
  background-color: #f5f7fa;
}

.node-label {
  flex: 1;
  color: #333;
}

/* 新增：库存数样式 */
.storage-num {
  font-size: 28rpx;
  color: #666;
  margin-left: 10rpx;
}

/* 移除三角图标样式 */
.arrow-icon {
  display: none !important;
}

.children-container {
  padding-left: 32rpx;
  border-left: 1rpx solid #e8e8e8;
  margin-left: 16rpx;
}
</style>