<script setup>
import { ref, onMounted, onUnmounted, computed } from "vue";
import { getDashboardProductTask } from "@/apis/dashboard";
import useActiveBtn from "@/hooks/useActiveBtn";

const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();

const formulaData = ref([]);
const productData = ref([]);
const loading = ref(false);

let timer = null;

const fetchProductTask = async () => {
  loading.value = true;
  try {
    const res = await getDashboardProductTask();
    formulaData.value = res?.data?.formula || [];
    productData.value = res?.data?.product || [];
  } catch (e) {
    formulaData.value = [];
    productData.value = [];
  } finally {
    loading.value = false;
  }
};

const production_data = computed(() => {
  if (selectedBtn.value?.key === 1) {
    return formulaData.value;
  } else if (selectedBtn.value?.key === 2) {
    return productData.value;
  }
  return [];
});

const selectedProduct = ref(null);

const showDetails = (product) => {
  selectedProduct.value = product;
};

const goBack = () => {
  selectedProduct.value = null;
};

onMounted(() => {
  setItems([
    {
      id: 1,
      title: "調理",
      key: 1,
      active: true,
    },
    {
      id: 2,
      title: "成品",
      key: 2,
      active: false,
    },
  ]);
  fetchProductTask();
  timer = setInterval(() => {
    fetchProductTask();
  }, 60 * 1000);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});
</script>

<template>
  <div>
    <div class="flex items-center justify-between mb-3">
      <h3 class="text-info font-bold text-xl text-center">今日生產目標</h3>
      <button
        v-if="selectedProduct"
        class="btn-xs btn btn-info"
        @click="goBack"
      >
        返回
      </button>
    </div>
    <div class="text-center mb-3">
      <template v-if="selectedProduct === null">
        <ButtonConnectedGroup
          :items="items"
          :onclick="
            (e, item) => {
              changeActiveBtn(item);
            }
          "
          size="sm"
        />
      </template>
      <template v-else>
        <p class="text-base my-4">{{ selectedProduct.name }}</p>
      </template>
    </div>
    <div className="h-60 overflow-x-auto">
      <table class="table table-sm table-pin-rows">
        <thead v-if="!selectedProduct">
          <tr>
            <th>品名</th>
            <th>狀態</th>
            <!-- <th>生產進度</th> -->
            <th v-if="selectedBtn?.key === 1">功能</th>
          </tr>
        </thead>
        <thead v-else>
          <tr>
            <th
              v-if="
                selectedProduct.details &&
                selectedProduct.details.length &&
                selectedBtn?.key === 1
              "
            >
              鍋次
            </th>
            <th>狀態</th>
          </tr>
        </thead>
        <tbody>
          <!-- 產品列表 -->
          <template v-if="!selectedProduct">
            <tr v-for="item in production_data" :key="item.name">
              <td>{{ item.name }}</td>
              <td>{{ item.status }}</td>
              <!-- <td>{{ item.progress }}</td> -->
              <td v-if="item.details && item.details.length">
                <button
                  class="btn btn-xs btn-outline-info"
                  @click="showDetails(item)"
                  :disabled="!item.details || item.details.length === 0"
                >
                  詳細
                </button>
              </td>
            </tr>
          </template>
          <!-- 詳細資料 -->
          <template v-else>
            <tr
              v-if="selectedProduct.details && selectedProduct.details.length"
              v-for="(detail, index) in selectedProduct.details"
              :key="index"
            >
              <td v-if="selectedBtn?.key === 1">{{ detail.batch }}</td>
              <td>{{ detail.status }}</td>
            </tr>
            <tr v-else>
              <td colspan="3" class="text-center">無詳細資料</td>
            </tr>
          </template>
        </tbody>
      </table>
      <div v-if="loading" class="text-center mt-2">載入中...</div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
