<template>
  <div class="skill-card" @click="$emit('click')">
    <a-card hoverable size="small">
      <template #title>
        <div class="skill-card__title">
          <AppstoreOutlined class="skill-card__icon" />
          <span>{{ skill.name }}</span>
        </div>
      </template>
      <template #extra>
        <a-badge
          :status="skill.status === 'active' ? 'success' : 'default'"
          :text="skill.status === 'active' ? '正常' : skill.status"
        />
      </template>
      <p class="skill-card__desc">{{ skill.description || '暂无描述' }}</p>
      <div class="skill-card__tags">
        <a-tag v-for="cap in skill.capabilities" :key="cap" size="small" color="blue">
          {{ cap }}
        </a-tag>
      </div>
      <div v-if="skill.dependencies.length > 0" class="skill-card__deps">
        <span class="skill-card__deps-label">依赖:</span>
        <a-tag v-for="dep in skill.dependencies.slice(0, 3)" :key="dep" size="small">
          {{ dep }}
        </a-tag>
        <span v-if="skill.dependencies.length > 3" class="skill-card__more">
          +{{ skill.dependencies.length - 3 }}
        </span>
      </div>
      <div class="skill-card__footer">
        <span v-if="skill.version" class="skill-card__version">v{{ skill.version }}</span>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { AppstoreOutlined } from '@ant-design/icons-vue'
import type { ISkillInfo } from '@/api/skills'

defineProps<{
  skill: ISkillInfo
}>()

defineEmits<{
  click: []
}>()
</script>

<style scoped>
.skill-card {
  cursor: pointer;
}

.skill-card__title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.skill-card__icon {
  color: #1677ff;
}

.skill-card__desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.skill-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.skill-card__deps {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.skill-card__deps-label {
  font-size: 12px;
  color: #999;
}

.skill-card__more {
  font-size: 12px;
  color: #999;
}

.skill-card__footer {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.skill-card__version {
  font-size: 12px;
  color: #999;
}
</style>
