<template>
  <section class="panel">
    <div class="panel-header">
      <div>
        <p class="eyebrow">流程闭环</p>
        <h3>订单、材料、工单、完工的联动看板</h3>
      </div>
      <span class="panel-tag">流程化管理</span>
    </div>

    <div class="flow-grid">
      <section v-for="group in groups" :key="group.title" class="flow-group">
        <div class="flow-group-head">
          <h4>{{ group.title }}</h4>
        </div>
        <article
          v-for="step in group.items"
          :key="step.step_code"
          class="flow-step"
          :class="`flow-${step.status}`"
          :title="step.summary"
        >
          <div class="flow-step-top">
            <strong>{{ step.title }}</strong>
            <span>{{ step.quantity }}</span>
          </div>
        </article>
      </section>
    </div>
  </section>
</template>

<script setup>
defineProps({
  groups: {
    type: Array,
    required: true
  }
});
</script>
