<script setup lang="ts">
import { NButton } from 'naive-ui'
import { ref } from 'vue'

const activeId = ref(1)
const groups = ref(Array.from({ length: 10 }, (_, i) => ({
  id: i + 1,
  code: String(i + 1).padStart(2, '0'),
  name: `第${['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][i]}组`,
})))
</script>

<template>
  <div>
    <!-- 标题头 -->
    <div class="flex items-center justify-between border-b border-gray-100 p-4">
      <div class="flex items-center gap-2 text-gray-800 font-bold">
        <div class="i-carbon-tree-view-alt text-blue-600" />
        <span>分组情况</span>
      </div>
      <!-- 需求1：右侧改为添加按钮 -->
      <NButton text class="text-blue-600 hover:text-blue-700">
        <template #icon>
          <div class="i-carbon-add-filled text-lg" />
        </template>
      </NButton>
    </div>

    <!-- 列表区域 -->
    <div class="max-h-[calc(100vh-120px)] overflow-y-auto p-2">
      <div
        v-for="item in groups"
        :key="item.id"
        class="group mb-1 flex cursor-pointer items-center gap-3 rounded-lg px-4 py-3 transition-colors"
        :class="activeId === item.id ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-50 text-gray-600'"
        @click="activeId = item.id"
      >
        <span
          class="text-xs font-mono"
          :class="activeId === item.id ? 'text-blue-400' : 'text-gray-300'"
        >
          #{{ item.code }}
        </span>
        <span class="font-medium">{{ item.name }}</span>

        <div
          v-if="activeId === item.id"
          class="ml-auto h-4 w-1 rounded-full bg-blue-600"
        />
      </div>
    </div>
  </div>
</template>
