<script setup>
import LiquidfillChart from "@/components/chart/LiquidfillChart.vue";
import { ref, onMounted, provide, watch, inject } from "vue";
import { getSettingInventory } from "@/apis/productSetting";
import DashboardDescriptionCard from "./DashboardDescriptionCard.vue";
import dayjs from "dayjs";

const descriptionCards = ref([]);
const progress_data = ref([]);

const getCompletion = async () => {
  const res = await getSettingInventory();
  descriptionCards.value = res.data.map((item) => ({
    title: item.name,
    percentage: item.percentage,
    current_stock: item.current_stock,
    item_id: item.item_id,
    updateTime: dayjs(item.updated_at).format("YYYY-MM-DD HH:mm:ss"),
  }));
};

provide("dashboard_product_complete", { getCompletion, progress_data });

onMounted(() => {
  getCompletion();
});
</script>

<template>
  <div>
    <div class="flex items-center justify-between">
      <h3 class="text-info font-bold text-xl text-center">原醋即時庫存量</h3>
    </div>
    <div class="w-full grid grid-cols-3">
      <div v-for="(card, idx) in descriptionCards.slice(0, 3)" :key="idx">
        <LiquidfillChart
          :id="`dashboard_product_${idx}`"
          :title="card.title || ''"
          :value="card.percentage || 0"
          :color="idx === 0 ? '#facd91' : idx === 1 ? '#7dd7df' : '#8cce30'"
        />
      </div>
    </div>
    <!-- 說明卡片區域 -->
    <div class="grid grid-cols-3 gap-2 -mt-6">
      <DashboardDescriptionCard
        v-for="(card, index) in descriptionCards"
        :key="index"
        :title="card.title"
        :item_id="card.item_id"
        :current_stock="card.current_stock"
        :updateTime="card.updateTime"
      />
    </div>
  </div>
</template>

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