<script setup>
import { ref, onMounted, watch } from "vue";
import GaugeChart from "@/components/chart/GaugeChart.vue";
import { CHART_COLOR, SECOND_CHART_COLOR } from "@/constant";
import useBuildingStore from "@/stores/useBuildingStore";

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

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

// 監聽 guid，取 sysConfig 後判斷顯示
watch(
  () => buildingStore.selectedBuilding?.building_guid,
  async (guid) => {
    if (!guid) {
      visible.value = false;
      return;
    }

    await buildingStore.getSysConfig(guid);

    // 與檔案一一致：先嘗試 .value，再嘗試非 .value（相容 ref/reactive）
    const cfg = buildingStore.sysConfig?.value ?? buildingStore.sysConfig;
    const showIndicator = !!cfg?.show_production_indicator;

    console.log("[DashboardProduct] guid:", guid);
    console.log("[DashboardProduct] sysConfig:", cfg);
    console.log("[DashboardProduct] show_production_indicator:", showIndicator);

    if (showIndicator === false) {
      visible.value = false; // 整個元件不顯示
      return;
    }

    // 允許顯示整個元件
    visible.value = true;
  },
  { immediate: true }
);

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

// 圖表設定
const sameOptionAttr = {
  type: "gauge",
  center: ["50%", "60%"],
  startAngle: 90,
  endAngle: -270,
  axisTick: {
    show: false,
  },
  splitLine: {
    show: false,
  },
  axisLabel: {
    show: false,
  },
  anchor: {
    show: false,
  },
  title: {
    show: false,
  },
};
const defaultChartOption = (text, lightColor, darkColor, value = 0) => ({
  title: {
    text,
    left: "center",
    textStyle: {
      color: "#ffffff",
      fontSize: 16,
      fontWeight: "normal",
    },
    top: "0%",
  },
  series: [
    {
      ...sameOptionAttr,
      min: 0,
      max: 100,
      itemStyle: {
        color: lightColor,
      },
      progress: {
        show: true,
        width: 10,
      },
      axisLine: {
        lineStyle: {
          width: 10,
        },
      },
      pointer: {
        itemStyle: {
          color: darkColor,
        },
      },
      detail: {
        valueAnimation: true,
        formatter: "{value} %",
        fontSize: 16,
        color: "#ffffff",
      },
      data: [
        {
          value,
        },
      ],
    },
    {
      ...sameOptionAttr,
      min: 0,
      max: 100,
      itemStyle: {
        color: darkColor,
      },
      progress: {
        show: true,
        width: 4,
      },
      axisLine: {
        show: false,
      },
      pointer: {
        show: false,
      },
      detail: {
        show: false,
      },
      data: [
        {
          value,
        },
      ],
    },
  ],
});

const mesona_chart = ref(null);
const aiyu_chart = ref(null);
const blackTea_chart = ref(null);
const chart_data = ref([
  defaultChartOption("產品 A", CHART_COLOR[0], SECOND_CHART_COLOR[0], 75),
  defaultChartOption("產品 B", CHART_COLOR[1], SECOND_CHART_COLOR[1], 60),
  defaultChartOption("產品 C", CHART_COLOR[2], SECOND_CHART_COLOR[2], 90),
]);

onMounted(() => {
  // 可以在這裡模擬資料更新
  // setTimeout(() => {
  //   chart_data.value = [
  //     defaultChartOption("仙草", CHART_COLOR[0], SECOND_CHART_COLOR[0], 80),
  //     defaultChartOption("愛玉", CHART_COLOR[1], SECOND_CHART_COLOR[1], 70),
  //     defaultChartOption("紅茶", CHART_COLOR[2], SECOND_CHART_COLOR[2], 95),
  //   ];
  // }, 2000);
});
</script>
<template>
  <!-- 僅在 show_production_indicator === true 時渲染整個元件 -->
  <div v-if="visible">
    <h3 class="text-info text-xl text-center mb-3">
      {{ $t("dashboard.production_quantity") }}
    </h3>

    <div class="w-full grid grid-cols-3">
      <div>
        <GaugeChart
          id="dashboard_mesona_production"
          class="h-32"
          :option="chart_data[0]"
          ref="mesona_chart"
        />
      </div>
      <div>
        <GaugeChart
          id="dashboard_aiyu_production"
          class="h-32"
          :option="chart_data[1]"
          ref="aiyu_chart"
        />
      </div>
      <div>
        <GaugeChart
          id="dashboard_blackTea_production"
          class="h-32"
          :option="chart_data[2]"
          ref="blackTea_chart"
        />
      </div>
    </div>
  </div>
  <!-- shouldShow 為 null 或 false 時都不顯示任何東西（避免閃動與空白框） -->
</template>

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