<script setup>
import useActiveBtn from "@/hooks/useActiveBtn";
import { ref, onMounted } from "vue";
import DashboardProductCompleteModal from "./DashboardProductCompleteModal.vue";

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

// 假資料
const progress_data = [
  {
    data: [
      { pac: "130g", value: 80, target: 100, percentage: 80 },
      { pac: "150g", value: 70, target: 100, percentage: 70 },
      { pac: "1kg", value: 75, target: 100, percentage: 75 },
    ],
  },
  {
    data: [
      { pac: "500g", value: 70, target: 100, percentage: 70 },
      { pac: "1kg", value: 60, target: 100, percentage: 60 },
      { pac: "2kg", value: 50, target: 100, percentage: 50 },
    ],
  },
  {
    data: [
      { pac: "300g", value: 90, target: 100, percentage: 90 },
      { pac: "500g", value: 96, target: 100, percentage: 96 },
      { pac: "1kg", value: 84, target: 100, percentage: 84 },
    ],
  },
];
const openModal = () => {
  dashboard_product.showModal();
};

onMounted(() => {
  // 初始化按鈕
  setItems([
    { title: "產品 A", key: 1, active: true },
    { title: "產品 B", key: 2, active: false },
    { title: "產品 C", key: 3, active: false },
  ]);
});
</script>

<template>
  <DashboardProductCompleteModal/>
  <div class="mb-3 relative">
    <h3 class="text-info text-xl text-center">今日生產完成率 ％</h3>
    <button
      type="button"
      class="btn btn-xs btn-success absolute top-0 right-0"
      @click.stop="openModal"
    >
      設定
    </button>
  </div>
  <div className="my-3 w-full flex justify-center relative">
    <ButtonConnectedGroup
      :items="items"
      :onclick="
        (e, item) => {
          changeActiveBtn(item);
        }
      "
    />
  </div>
  <template
    v-if="progress_data && selectedBtn && progress_data[selectedBtn.key - 1]"
  >
    <div
      class="grid grid-cols-6 gap-3 justify-items-end items-center"
      v-for="{ pac, value, target, percentage } in progress_data[
        selectedBtn.key - 1
      ].data"
      :key="pac"
    >
      <span class="col-span-1 text-lg">{{ pac }}</span>
      <progress
        v-if="target !== 0"
        class="progress progress-info col-span-4"
        :value="value"
        :max="target"
      ></progress>
      <span class="col-span-1 text-lg justify-self-start"
        >{{ percentage }} %</span
      >
    </div>
  </template>
  <template v-else>
    <p class="text-center mt-8 text-lg">尚未設定目標值</p>
  </template>
</template>

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