<script setup lang="ts">
import { computed } from 'vue';

import type { RagDocument } from '@/api/ragDocuments';

const props = defineProps<{
  documents: RagDocument[];
}>();

const total = computed(() => props.documents.length);
const parsing = computed(() => props.documents.filter((row) => row.parseStatus === 'PARSING').length);
const parsed = computed(() => props.documents.filter((row) => row.parseStatus === 'PARSED').length);
const failed = computed(() => props.documents.filter((row) => row.parseStatus === 'FAILED').length);
</script>

<template>
  <div class="flow-overview">
    <el-tag type="info">总文档 {{ total }}</el-tag>
    <el-tag type="warning">解析中 {{ parsing }}</el-tag>
    <el-tag type="success">可切片 {{ parsed }}</el-tag>
    <el-tag type="danger">解析失败 {{ failed }}</el-tag>
  </div>
</template>

<style scoped>
.flow-overview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 28px 0;
}

@media (max-width: 768px) {
  .flow-overview {
    padding: 14px 16px 0;
  }
}
</style>
