<template>
  <home-card desc="System" title="系统数据">
    <active-plate :info-list="list" />
  </home-card>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import ActivePlate from '@/components/ActivePlate.vue'
import HomeCard from './HomeCard.vue'
import * as systemApi from '@/api/system'

const props = defineProps({
  scrapydServerId: {
    type: String,
    default: ''
  }
})

const list = ref([])

const getData = async () => {
  try {
    const res = await systemApi.getSystemData({
      scrapydServerId: props.scrapydServerId
    })
    
    if (res.code === 0) {
      // 将后端数据转换为组件需要的格式
      list.value = res.data.map((item: any, index: number) => {
        // 根据数据类型选择不同的图标
        let icon = 'Monitor'
        
        if (item.title.includes('项目')) {
          icon = 'Files'
        } else if (item.title.includes('爬虫')) {
          icon = 'Lock'
        } else if (item.title.includes('版本')) {
          icon = 'View'
        } else if (item.title.includes('任务')) {
          icon = 'Folder'
        } else if (item.title.includes('服务')) {
          icon = 'Upload'
        }
        
        return {
          title: item.title,
          icon: icon,
          count: item.count || 0,
          color: getColorByIndex(index)
        }
      })
    }
  } catch (error) {
    console.error('获取系统数据失败:', error)
  }
}

// 根据索引获取颜色
const getColorByIndex = (index: number): string => {
  const colors = ['#11A0F8', '#FFBB44', '#7ACE4C', '#36CBCB', '#F47F92', '#FBD437']
  return colors[index % colors.length]
}

// 监听服务器ID变化，重新获取数据
watch(() => props.scrapydServerId, (newVal) => {
  if (newVal) {
    getData()
  }
})

onMounted(() => {
  // 只有当scrapydServerId存在时才获取数据
  if (props.scrapydServerId) {
    getData()
  }
})
</script>

<style lang="scss" scoped>
</style>
