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

const buildingStore = useBuildingStore();
const visible = ref(false); // 整體顯示/隱藏

const emit = defineEmits(["visible-change"]);

// 監聽 guid → 取 sysConfig → 用 show_production_indicator 控制顯示
watch(
  () => buildingStore.selectedBuilding?.building_guid,
  async (guid) => {
    if (!guid) {
      visible.value = false;
      return;
    }

    await buildingStore.getSysConfig(guid);

    // 相容 ref/reactive 的讀法（避免 .value 混亂）
    const cfg = buildingStore.sysConfig?.value ?? buildingStore.sysConfig;
    const flag = !!cfg?.show_production_indicator;

    // 若需要除錯可開啟：
    // console.log("[DashboardProductRate] guid:", guid);
    // console.log("[DashboardProductRate] sysConfig:", cfg);
    // console.log("[DashboardProductRate] show_production_indicator:", flag);

    visible.value = flag;
  },
  { immediate: true }
);

// 把 visible 變化回報給父層（立刻、且每次變動）
watch(
  visible,
  (v) => {
    emit("visible-change", v);
  },
  { immediate: true }
);


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>
  <!-- 依 show_production_indicator 控制整個元件顯示 -->
  <div v-if="visible">
    <DashboardProductCompleteModal />
    <div class="mb-3 relative">
      <h3 class="text-info text-xl text-center">
        {{ $t("dashboard.today_production_rate") }} (％)
      </h3>
      <button
        type="button"
        class="btn btn-xs btn-success absolute top-0 right-0"
        @click.stop="openModal"
      >
        {{ $t("button.edit") }}
      </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>
  </div>
</template>

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