<script setup>
defineProps({ data: Array });
import { twMerge } from "tailwind-merge";
</script>
<template>
  <div class="flex flex-col gap-3">
    <div
      v-for="(item, index) in data"
      :key="index"
      class="stats shadow bg-slate-200"
    >
      <div class="w-24 stat p-2">
        <div class="bg-green-600 rounded-lg p-2 shadow-lg shadow-slate-400">
          <div class="text-sm text-slate-100">第{{ item.batch || "__" }}鍋</div>
          <div class="text-sm font-bold text-slate-100">
            {{ item.product || "&nbsp;" }}
          </div>
        </div>
      </div>
      <div class="w-26 stat items-center p-2">
        <div class="text-base font-bold text-slate-800">{{ item.name }}</div>
        <div class="text-sm text-slate-800">{{ item.status }}</div>
      </div>
      <div class="w-15 stat items-center text-center p-2">
        <FontAwesomeIcon
          class="text-2xl text-slate-800 mx-auto"
          :icon="['fas', 'temperature-high']"
        />
        <div class="text-sm text-slate-800">{{ item.temperature }}</div>
      </div>
      <div
        :class="[
          'w-15 stat items-center text-center p-2',
          item.sterilization == '殺菌完成'
            ? 'text-green-700'
            : 'text-slate-800',
        ]"
      >
        <FontAwesomeIcon :icon="['far', 'clock']" class="text-2xl mx-auto" />
        <div class="text-sm">
          {{ item.sterilization }}
        </div>
      </div>
      <div
        :class="[
          'w-15 stat items-center text-center p-2',
          typeof item.sugar !== 'number' ? 'text-red-700' : 'text-slate-800',
        ]"
      >
        <FontAwesomeIcon class="text-2xl mx-auto" :icon="['fas', 'tint']" />
        <div class="text-sm">
          {{ item.sugar }}
        </div>
      </div>
      <div class="w-15 stat items-center text-center p-2">
        <div>
          <FontAwesomeIcon
            :icon="['fas', 'circle']"
            :class="
              twMerge(
                'text-2xl border-2 border-slate-400 rounded-full',
                item.qcResult ? item.qcResult.trim() : 'text-slate-400'
              )
            "
          />
        </div>
        <div class="text-sm text-slate-800">{{ item.qcName }}</div>
      </div>
    </div>
  </div>
</template>
