<script setup>
const props = defineProps({
  vessel: Object,
  tabs: Array,
});
</script>
<template>
  <div class="card bg-slate-200 text-accent-content rounded-md w-[22rem]">
    <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':
              vessel.activeTab.value === tab.label,
          }"
          @click.prevent="vessel.activeTab.value = tab.label"
        >
          {{ tab.label }}
        </a>
      </div>
      <div class="p-0">
        <div v-if="vessel.activeTab.value === '生產資訊'">
          <ul class="leading-7 tracking-wider text-slate-700 px-2">
            <li><b>品名:</b> {{ vessel.product }}</li>
            <li><b>鍋次:</b> 第{{ vessel.batch }}鍋</li>
            <li><b>狀態:</b> {{ vessel.status }}</li>
          </ul>
        </div>
        <div v-else-if="vessel.activeTab.value === '投料進度'">
          <div class="overflow-x-auto">
            <table class="table table-sm">
              <thead>
                <tr class="border-0 bg-slate-300 text-slate-800">
                  <th>順序</th>
                  <th>動作</th>
                  <th>原料</th>
                  <th>狀態</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>
              </tbody>
            </table>
          </div>
        </div>
        <div v-else-if="vessel.activeTab.value === '流量計'">
          <div class="overflow-x-auto">
            <table class="table table-sm">
              <thead>
                <tr class="border-0 bg-slate-300 text-slate-800">
                  <th></th>
                  <th>當前使用量</th>
                  <th>今日累積量</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(flow, index) in vessel.flowMeterData"
                  :key="index"
                  class="border-0"
                >
                  <th>{{ flow.material }}</th>
                  <td>{{ flow.current }}</td>
                  <td>{{ flow.total }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
