<template>
  <view class="fg-tree-node">
    <view
      class="fg-tree-node__content"
      :style="{ paddingLeft: `${(level || 0) * 20}rpx` }"
      @click="$emit('node-click', node)"
    >
      <!-- 展开/折叠图标 -->
      <view
        v-if="node.children && node.children.length > 0"
        class="fg-tree-node__expand-icon"
        :class="{ 'expanded': isExpanded }"
        @click.stop="toggleExpand"
      >
        <view class="expand-icon"></view>
      </view>
      <view v-else class="fg-tree-node__expand-icon placeholder"></view>
      
      <!-- 节点内容 -->
      <view class="fg-tree-node__label">{{ node.label }}</view>
    </view>
    
    <!-- 子节点 -->
    <view v-if="node.children && node.children.length > 0 && isExpanded" class="fg-tree-node__children">
      <template v-for="childNode in node.children" :key="childNode.id">
        <view class="fg-tree-node">
          <view
            class="fg-tree-node__content"
            :style="{ paddingLeft: `${((level || 0) + 1) * 20}rpx` }"
            @click="$emit('node-click', childNode)"
          >
            <!-- 展开/折叠图标 -->
            <view
              v-if="childNode.children && childNode.children.length > 0"
              class="fg-tree-node__expand-icon"
              :class="{ 'expanded': isChildExpanded(childNode.id) }"
              @click.stop="toggleChildExpand(childNode.id)"
            >
              <view class="expand-icon"></view>
            </view>
            <view v-else class="fg-tree-node__expand-icon placeholder"></view>
            
            <!-- 节点内容 -->
            <view class="fg-tree-node__label">{{ childNode.label }}</view>
          </view>
          
          <!-- 递归渲染子节点 -->
          <view v-if="childNode.children && childNode.children.length > 0 && isChildExpanded(childNode.id)" class="fg-tree-node__children">
            <template v-for="grandChildNode in childNode.children" :key="grandChildNode.id">
              <view class="fg-tree-node">
                <view
                  class="fg-tree-node__content"
                  :style="{ paddingLeft: `${((level || 0) + 2) * 20}rpx` }"
                  @click="$emit('node-click', grandChildNode)"
                >
                  <!-- 展开/折叠图标 -->
                  <view
                    v-if="grandChildNode.children && grandChildNode.children.length > 0"
                    class="fg-tree-node__expand-icon"
                    :class="{ 'expanded': isChildExpanded(grandChildNode.id) }"
                    @click.stop="toggleChildExpand(grandChildNode.id)"
                  >
                    <view class="expand-icon"></view>
                  </view>
                  <view v-else class="fg-tree-node__expand-icon placeholder"></view>
                  
                  <!-- 节点内容 -->
                  <view class="fg-tree-node__label">{{ grandChildNode.label }}</view>
                </view>
              </view>
            </template>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
// @ts-ignore
import { defineProps, defineEmits, ref, computed } from 'vue'

const props = defineProps({
  node: {
    type: Object,
    required: true
  },
  level: {
    type: Number,
    default: 0
  },
  defaultExpandedKeys: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['node-click', 'node-expand', 'node-collapse'])

const isExpanded = ref((props.defaultExpandedKeys || []).includes(props.node.id))
const expandedChildKeys = ref<Set<number | string>>(new Set())

const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
  if (isExpanded.value) {
    emit('node-expand', props.node)
  } else {
    emit('node-collapse', props.node)
  }
}

const isChildExpanded = (nodeId: number | string) => {
  return expandedChildKeys.value.has(nodeId) || (props.defaultExpandedKeys || []).includes(nodeId)
}

const toggleChildExpand = (nodeId: number | string) => {
  if (expandedChildKeys.value.has(nodeId)) {
    expandedChildKeys.value.delete(nodeId)
  } else {
    expandedChildKeys.value.add(nodeId)
  }
}
</script>

<style scoped lang="scss">
.fg-tree-node {
  width: 100%;
  
  &__content {
    display: flex;
    align-items: center;
    height: 60rpx;
    padding: 0 10rpx;
    cursor: pointer;
    transition: background-color 0.2s;
    
    &:hover {
      background-color: #f5f7fa;
    }
  }
  
  &__expand-icon {
    width: 30rpx;
    height: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10rpx;
    
    &.placeholder {
      visibility: hidden;
    }
    
    .expand-icon {
      width: 0;
      height: 0;
      border-left: 14rpx solid #31373D;
      border-top: 8rpx solid transparent;
      border-bottom: 8rpx solid transparent;
      transition: transform 0.2s;
    }
    
    &.expanded .expand-icon {
      transform: rotate(90deg);
    }
  }
  
  &__label {
    flex: 1;
    font-size: 28rpx;
    color: #303133;
  }
  
  &__children {
    width: 100%;
  }
}
</style>