<script setup>
import { ref } from "vue";
const props = defineProps({
  vessel: Object,
});
const tabs = [
  { label: "生產資訊" },
  { label: "投料進度" },
  { label: "流量計" },
  { label: "SIP" },
];
const activeTab = ref(tabs[0].label);
</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">{{ vessel?.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':
                            activeTab === tab.label,
          }"
                    @click.prevent="activeTab = tab.label"
        >
          {{ tab.label }}
        </a>
      </div>
      <div class="p-0">
         <div v-if="activeTab === '生產資訊'">
          <ul class="leading-7 tracking-wider text-slate-700 px-2">
            <li><b>品名:</b> {{ vessel.productInfo?.product }}</li>
            <li><b>鍋次:</b> 第{{ vessel.productInfo?.batch || "__" }}鍋</li>
            <li><b>溫度:</b> {{ vessel.productInfo?.temperature }}</li>
            <li><b>狀態:</b> {{ vessel.productInfo?.status }}</li>
          </ul>
        </div>
        <div v-else-if="activeTab === '投料進度'">
          <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 vessel.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="!vessel.feedProgress || !vessel.feedProgress.length"
                  class="h-28 border-0"
                >
                  <td colspan="4" class="text-center">無投料進度資料</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
         <div v-else-if="activeTab === '流量計'">
          <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></th>
                  <th>今日累積量</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(flow, index) in vessel.flowMeterData"
                  :key="index"
                  class="border-0"
                >
                  <th class="w-26">{{ flow.material }}</th>
                  <td>{{ flow.total }}</td>
                </tr>
                <tr
                  v-if="!vessel.flowMeterData || !vessel.flowMeterData.length"
                  class="h-28 border-0"
                >
                  <td colspan="2" class="text-center">無流量計資料</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
         <div v-else-if="activeTab === 'SIP'">
          <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>次數</th>
                  <th>開始時間</th>
                  <th>結束時間</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(value, index) in vessel.sip"
                  :key="index"
                  class="border-0"
                >
                  <th>{{ value.count }}</th>
                  <td>{{ value.startTime }}</td>
                  <td>{{ value.endTime }}</td>
                </tr>
                <tr
                  v-if="!vessel.sip || !vessel.sip.length"
                  class="h-28 border-0"
                >
                  <td colspan="3" class="text-center">無SIP資料</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
