<script setup>
const props = defineProps({
  pot: Object,
  tabs: Array,
});
</script>
<template>
  <div class="card bg-slate-200 text-accent-content rounded-md w-[25rem]">
    <div class="card-body p-3">
      <h2 class="card-title">{{ pot.name }}</h2>
      <div
        role="tablist"
        class="tabs tabs-boxed tabs-sm bg-opacity-50 shadow-inner shadow-slate-600"
      >
        <a
          v-for="tab in tabs"
          :key="tab.label"
          role="tab"
          class="tab"
          :class="{
            'tab-active !bg-green-500 !text-white shadow-sm shadow-slate-800':
              pot.activeTab2.value === tab.label,
          }"
          @click.prevent="pot.activeTab2.value = tab.label"
        >
          {{ tab.label }}
        </a>
      </div>
      <div class="p-0">
        <div v-if="pot.activeTab2.value === '生產資訊'">
          <ul class="leading-7 tracking-wider text-slate-700 px-2">
            <li><b>品名:</b> {{ pot.productInfo?.product }}</li>
            <li><b>鍋次:</b> 第{{ pot.productInfo?.batch || "__" }}鍋</li>
            <li><b>溫度:</b> {{ pot.productInfo?.temperature }}</li>
            <li><b>糖度:</b> {{ pot.productInfo?.sugar }}</li>
            <li><b>狀態:</b> {{ pot.productInfo?.status }}</li>
          </ul>
        </div>
        <div v-else-if="pot.activeTab2.value === '投料進度'">
          <div class="h-40 overflow-x-auto">
            <table class="table table-sm table-pin-rows">
              <thead>
                <tr class="border-0 bg-slate-300 text-slate-800">
                  <th class="w-10">順序</th>
                  <th>動作</th>
                  <th>原料</th>
                  <th class="w-20">狀態</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(feed, index) in pot.feedProgress"
                  :key="index"
                  class="border-0"
                >
                  <th>{{ feed.order }}</th>
                  <td>{{ feed.action }}</td>
                  <td>{{ feed.material }}</td>
                  <td>{{ feed.state }}</td>
                </tr>
                <tr
                  v-if="!pot.feedProgress || !pot.feedProgress.length"
                  class="h-28 border-0"
                >
                  <td colspan="4" class="text-center">無投料進度資料</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div v-else-if="pot.activeTab2.value === '品檢'">
          <div class="h-40 overflow-x-auto">
            <table class="table table-sm table-pin-rows whitespace-nowrap">
              <thead>
                <tr class="border-0 bg-slate-300 text-slate-800">
                  <th>狀態</th>
                  <th>品檢時間</th>
                  <th>風味</th>
                  <th>色澤</th>
                  <th>雜異物</th>
                  <th>鹽度</th>
                  <th>酸度</th>
                  <th>糖度</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(flow, index) in pot.qcResult"
                  :key="index"
                  class="border-0"
                >
                  <th>{{ flow.state }}</th>
                  <td>{{ flow.time }}</td>
                  <td>{{ flow.flavor }}</td>
                  <td>{{ flow.color }}</td>
                  <td>{{ flow.impurities }}</td>
                  <td>{{ flow.actual_Salinity }}</td>
                  <td>{{ flow.actual_PH }}</td>
                  <td>{{ flow.actual_Brix }}</td>
                </tr>
                <tr v-if="!pot.qcResult || !pot.qcResult.length" class="h-28 border-0">
                  <td colspan="8" class="text-center">無品檢資料</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div v-else-if="pot.activeTab2.value === '流量計'">
          <div class="h-40 overflow-x-auto">
            <table class="table table-sm">
              <thead>
                <tr class="border-0 bg-slate-300 text-slate-800">
                  <th></th>
                  <th>今日累積量</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(flow, index) in pot.flowMeterData"
                  :key="index"
                  class="border-0"
                >
                  <th class="">{{ flow.material }}</th>
                  <td>{{ flow.total }}</td>
                </tr>
                <tr
                  v-if="!pot.flowMeterData || !pot.flowMeterData.length"
                  class="h-28 border-0"
                >
                  <td colspan="2" class="text-center">無流量計資料</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div v-else-if="pot.activeTab2.value === 'SIP'">
          <div class="">
            <table class="table table-sm whitespace-nowrap">
              <thead>
                <tr class="border-0 bg-slate-300 text-slate-800">
                  <th>次數</th>
                  <th>開始時間</th>
                  <th>結束時間</th>
                </tr>
              </thead>
              <tbody>
                <tr 
                 v-for="(value, index) in pot.sip"
                  :key="index"
                class="border-0">
                  <th>{{ value.count }}</th>
                  <td>{{ value.startTime }}</td>
                  <td>{{ value.endTime }}</td>
                </tr>
                <tr
                  v-if="!pot.sip || !pot.sip.length"
                  class="h-28 border-0"
                >
                  <td colspan="3" class="text-center">無SIP資料</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
