<script setup lang="ts">
import ProjectList from './components/ProjectList.vue'
import type { ListItem, MenuItem } from '@/types'

// 生成模拟数据
const listData: ListItem[] = Array.from({ length: 789 }, (_, i) => ({
  id: i,
  name: `project-${i + 1}`,
  path: `/Users/lanyuanxiaoyao/Project/IdeaProjects/project-${i + 1}`,
  tags: [
    { id: 1, name: 'Vue', color: '#42b883' },
    { id: 2, name: 'TypeScript', color: '#3178c6' },
    ...(i % 3 === 0 ? [{ id: 3, name: 'React', color: '#61dafb' }] : []),
    ...(i % 4 === 0 ? [{ id: 4, name: 'Node.js', color: '#339933' }] : []),
  ]
}))

// 自定义菜单项
const menuItems: MenuItem[] = [
  { 
    id: 'refresh', 
    label: '刷新列表',
    action: (item) => {
      console.log('当前选中项:', item)
    }
  },
  { 
    id: 'clear', 
    label: '清空选择',
    action: (item) => {
      console.log('清空前选中项:', item)
    }
  },
  { 
    id: 'export', 
    label: '导出数据',
    action: (item) => {
      console.log('当前选中项:', item)
    }
  },
]

// 列表项点击事件处理
const handleItemClick = (item: ListItem): void => {
  console.log('点击列表项:', item)
}
</script>

<template>
  <ProjectList
    :data="listData"
    :menu-items="menuItems"
    @click="handleItemClick"
  />
</template>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#app {
  height: 100%;
}
</style>
