<template>
  <el-card class="mb-4">
    <template #header>
      <div class="flex justify-between items-center">
        <span>工序进度</span>
        <div class="text-gray-400"> 总进度：{{ progressData?.completionRate || 0 }}% </div>
      </div>
    </template>
    <div class="flex justify-between items-center">
      <div class="text-center">
        <div class="text-2xl font-bold">{{ progressData?.totalOperations || 0 }}</div>
        <div class="text-gray-400">总工序</div>
      </div>
      <div class="text-center">
        <div class="text-2xl font-bold text-success">{{
          progressData?.completedOperations || 0
        }}</div>
        <div class="text-gray-400">已完成</div>
      </div>
      <div class="text-center">
        <div class="text-2xl font-bold text-warning">{{
          progressData?.inProgressOperations || 0
        }}</div>
        <div class="text-gray-400">进行中</div>
      </div>
      <div class="text-center">
        <div class="text-2xl font-bold text-info">{{ progressData?.pendingOperations || 0 }}</div>
        <div class="text-gray-400">未开始</div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
interface ProgressData {
  completionRate?: number
  totalOperations?: number
  completedOperations?: number
  inProgressOperations?: number
  pendingOperations?: number
}

const props = defineProps<{ progressData: ProgressData | null }>()
</script>
