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

// 生成模拟数据
const listData: Ref<ListItem[]> = ref([])
const initListData = () => {
  let samplePic = 'https://aisuda.bce.baidu.com/amis/static/favicon_b3b0647.png'
  listData.value = Array.from({ length: 1000 }, (_, i) => ({
    id: i,
    name: `project-${i + 1}`,
    description: `这是项目 ${i + 1} 的详细描述信息`,
    icon: samplePic,
    tags: [
      ...(i % 2 === 0 ? [{ id: 1, name: 'Vue', color: '#42b883' }] : []),
      ...(i % 3 === 0 ? [{ id: 2, name: 'TypeScript', color: '#3178c6' }] : []),
      ...(i % 4 === 0 ? [{ id: 3, name: 'React', color: '#149eca' }] : []),
      ...(i % 5 === 0 ? [{ id: 4, name: 'Node.js', color: '#539e43' }] : []),
    ],
  }))
}
initListData()

// 自定义菜单项
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> 