<template>
  <div class="left-panel">
    <div class="panel-header">
      <h3>项目管理</h3>
    </div>
    <div class="project-tree">
      <a-tree
        :data="projectTreeData"
        :selected-keys="selectedKeys"
        :field-names="{ key: 'id', title: 'name', children: 'children' }"
        :load-more="handleLoadMore"
        :show-line="true"
        @select="handleNodeSelect"
      >
        <template #title="node">
          <div class="tree-node">
            <span class="node-icon">
              <icon-folder v-if="node.type === 'project'" />
              <icon-settings v-else-if="node.type === 'turbine'" />
              <icon-tool v-else-if="node.type === 'part'" />
              <icon-apps v-else />
            </span>
            <span class="node-title">{{ node.name }}</span>
            <span v-if="node.imageCount" class="node-count">({{ node.imageCount }})</span>
          </div>
        </template>
      </a-tree>
    </div>
  </div>
</template>

<script setup lang="ts">
import { 
  IconFolder, 
  IconSettings, 
  IconTool, 
  IconApps
} from '@arco-design/web-vue/es/icon'
import type { ProjectTreeNode } from '@/apis/industrial-image'

defineProps<{
  projectTreeData: ProjectTreeNode[]
  selectedKeys: string[]
}>()

const emit = defineEmits<{
  nodeSelect: [keys: string[]]
  loadMore: [node: ProjectTreeNode]
}>()

const handleNodeSelect = (keys: string[]) => {
  emit('nodeSelect', keys)
}

const handleLoadMore = (node: ProjectTreeNode) => {
  emit('loadMore', node)
}
</script>

<style scoped lang="scss">
.left-panel {
  width: 280px;
  background: #f8f9fa;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  height: 100%; /* 填满父容器 */
  overflow: hidden;

  .panel-header {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    background: white;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;
    }
  }

  .project-tree {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 0; /* 让 flex: 1 生效，自动计算高度 */
    min-height: 0; /* 确保可以收缩 */
    
    // 美化滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 3px;
      
      &:hover {
        background: #a8a8a8;
      }
    }
    
    // Firefox 滚动条样式
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;

    .tree-node {
      display: flex;
      align-items: center;
      gap: 6px;

      .node-icon {
        color: #6b7280;
      }

      .node-title {
        flex: 1;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .node-count {
        font-size: 12px;
        color: #6b7280;
        flex-shrink: 0;
      }
    }
  }
}
</style> 