<script setup lang="ts">
import type { PipelineRun } from '../../types/pipeline'

defineProps<{ run: PipelineRun }>()
</script>

<template>
  <article class="pipeline-status-card">
    <div>
      <strong>{{ run.biz_dt }}</strong>
      <span :class="['pipeline-status', `is-${run.status}`]">{{ run.status }}</span>
    </div>
    <p>{{ run.current_step || '无执行中步骤' }}</p>
    <small v-if="run.deadline_at">
      截止 {{ new Date(run.deadline_at).toLocaleString('zh-CN') }}
    </small>
    <small v-else>手工任务无截止时间</small>
    <b v-if="run.dry_run">AIGC DRY-RUN</b>
  </article>
</template>

<style scoped>
.pipeline-status-card { border: 1px solid #d9dee8; border-radius: 12px; padding: 14px; }
.pipeline-status-card > div { display: flex; justify-content: space-between; gap: 12px; }
.pipeline-status { font-size: 12px; text-transform: uppercase; }
.is-succeeded { color: #16835d; }
.is-failed, .is-deadline_exceeded { color: #c23d4b; }
b { display: inline-block; margin-top: 8px; color: #8a5b00; font-size: 11px; }
</style>
