<!-- src/components/algorithm/AlgorithmCenter.vue -->
<template>
  <div class="algorithm-center">
    <div class="algorithm-grid">
      <AlgorithmCard 
        v-for="(algorithm, index) in algorithms" 
        :key="index"
        :algorithm="algorithm"
      />
    </div>
  </div>
</template>

<script setup>
import AlgorithmCard from './AlgorithmCard.vue'

const algorithms = [
  {
    name: '非法登轮识别算法',
    taskTypes: ['区域入侵检测', '行为识别'],
    detectionCount: '68,000'
  },
  {
    name: '靠泊状态检测算法',
    taskTypes: ['靠泊检测', '静态目标跟踪'],
    detectionCount: '5,124'
  },
  {
    name: '打瞌睡检测算法',
    taskTypes: ['姿态识别', '行为识别'],
    detectionCount: '1,025'
  },
  {
    name: '值班离岗检测算法',
    taskTypes: ['手部动作识别', '行为识别'],
    detectionCount: '90,128'
  },
  {
    name: '佩戴证件识别算法',
    taskTypes: ['属性识别', '目标特征比对'],
    detectionCount: '6,094'
  },
  {
    name: '非法律行识别算法',
    taskTypes: ['人体轨迹跟踪', '滞留时长分析'],
    detectionCount: '5,080'
  },
  {
    name: '暴力动作检测算法',
    taskTypes: ['多人姿态动作识别', '非正常行为判定'],
    detectionCount: '8,300'
  },
  {
    name: '异常靠近设备算法',
    taskTypes: ['电脑未锁屏', '人脸识别'],
    detectionCount: '3,456'
  },
  {
    name: '违章品携带检测',
    taskTypes: ['接近行为追踪', '人体-物体关系识别'],
    detectionCount: '7,890'
  },
  {
    name: '注意力评估算法',
    taskTypes: ['可疑动作追踪', '头部朝向识别'],
    detectionCount: '4,321'
  },
  {
    name: '危险区域闯入检测',
    taskTypes: ['行为持续性分析', '区域入侵检测'],
    detectionCount: '9,876'
  },
  {
    name: '异常聚集检测算法',
    taskTypes: ['人群密度分析', '行为识别'],
    detectionCount: '5,678'
  }
]
</script>

<style scoped>
.algorithm-center {
  width: 100%;
  height: 100%;
  padding: 20px;
}

.algorithm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 15px;
  height: calc(100vh - 100px);
}
</style>