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

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>
  <div>
    <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>
</template>

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