<script setup>
import { ref, onMounted, watch, computed, onUnmounted } from "vue";
import * as echarts from "echarts";
import { getSystemEnergyCostGrowth } from "@/apis/headquarters";
import BarChart from "@/components/chart/BarChart.vue";
import { useI18n } from "vue-i18n";

const { locale, t } = useI18n();

const energyCostGrowthData = ref({ day: [], week: [], month: [], year: [] });

const chartData = ref([]);
const currentType = ref({
  name: "day",
});
const energyTypeList = ref([
  {
    title: t("dashboard.daily_relative_change"),
    key: "day",
  },
  {
    title: t("dashboard.weekly_relative_change"),
    key: "week",
  },
  {
    title: t("dashboard.monthly_relative_change"),
    key: "month",
  },
  {
    title: t("dashboard.yearly_relative_change"),
    key: "year",
  },
]);
let intervalId = null;
const labels = computed(() => {
  switch (currentType.value.name) {
    case "day":
      return [t("dashboard.today"), t("dashboard.yesterday")];
    case "week":
      return [t("dashboard.this_week"), t("dashboard.last_week")];
    case "month":
      return [t("dashboard.this_month"), t("dashboard.last_month")];
    case "year":
      return [t("dashboard.this_year"), t("dashboard.last_year")];
    default:
      return [t("dashboard.today"), t("dashboard.yesterday")];
  }
});
const barWidth = 30; // Set barWidth

const barChartOptions = computed(() => ({
  xAxis: {
    type: "category",
    data: chartData.value.map((item) => item.name),
    axisLine: { lineStyle: { color: "#fff" } },
  },
  yAxis: { type: "value", show: false },
  grid: {
    left: "-10%",
    right: "1%",
    bottom: "3%",
    top: "10%",
    containLabel: true,
  },
  series: [
    {
      name: "當前",
      data: chartData.value.map((item) => item.current),
      type: "bar",
      barWidth: barWidth,
      barGap: "-10%",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#186B80" },
          { offset: 1, color: "#50C3E3" },
        ]),
        shadowBlur: 5,
        shadowColor: "rgba(0, 0, 0, 0.3)",
        shadowOffsetY: 2,
        shadowOffsetX: 5,
      },
      z: 3,
    },
    {
      name: "對比",
      data: chartData.value.map((item) => item.last),
      type: "bar",
      barWidth: barWidth,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#988F2C" },
          { offset: 1, color: "#FFF26D" },
        ]),
        shadowBlur: 5,
        shadowColor: "rgba(0, 0, 0, 0.3)",
        shadowOffsetY: 2,
        shadowOffsetX: 5,
      },
    },
    {
      // this top
      z: 6,
      type: "pictorialBar",
      symbolPosition: "end",
      data: chartData.value.map((item) => item.current),
      symbol: "diamond",
      symbolOffset: ["-45%", "-50%"],
      symbolSize: [barWidth, barWidth * 0.5],
      itemStyle: {
        borderWidth: 0,
        color: "#50C3E3",
      },
    },
    {
      // this bot
      z: 6,
      type: "pictorialBar",
      symbolPosition: "start",
      data: chartData.value.map((item) => item.current),
      symbol: "diamond",
      symbolOffset: ["-45%", "50%"],
      symbolSize: [barWidth, barWidth * 0.5],
      itemStyle: {
        borderWidth: 0,
        color: "#50C3E3",
      },
    },
    {
      // last top
      z: 3,
      type: "pictorialBar",
      symbolPosition: "end",
      data: chartData.value.map((item) => item.last),
      symbol: "diamond",
      symbolOffset: ["45%", "-50%"],
      symbolSize: [barWidth, barWidth * 0.5],
      itemStyle: {
        borderWidth: 0,
        color: "#FFF26D",
      },
    },
    {
      // last bot
      z: 3,
      type: "pictorialBar",
      symbolPosition: "start",
      data: chartData.value.map((item) => item.last),
      symbol: "diamond",
      symbolOffset: ["45%", "50%"],
      symbolSize: [barWidth, barWidth * 0.5],
      itemStyle: {
        borderWidth: 0,
        color: "#FFF26D",
      },
    },
  ],
  tooltip: {
    trigger: "axis",
    axisPointer: { type: "shadow" },
    formatter: function (params) {
      let tooltipText = `<div>${params[0].axisValueLabel}</div>`;
      const filteredParams = params.filter((item) => item.seriesType === "bar");
      filteredParams.forEach((item) => {
        tooltipText += `<div>${item.marker} ${item.value}</div>`;
      });

      return tooltipText;
    },
  },
}));

async function fetchEnergyCostGrowth() {
  try {
    const res = await getSystemEnergyCostGrowth();
    energyCostGrowthData.value = res.data || {
      day: [],
      week: [],
      month: [],
      year: [],
    };
    updateChartData();
  } catch (error) {
    console.error("Error fetching energy cost growth:", error);
    energyCostGrowthData.value = { day: [], week: [], month: [], year: [] };
    chartData.value = [];
  }
}

function updateChartData() {
  const list = energyCostGrowthData.value[currentType.value.name] || [];
  chartData.value = list.map((item) => ({
    name: item.name,
    current: item.current,
    last: item.last,
    difference: ((item.current ?? 0) - (item.last ?? 0)).toFixed(2),
    percentage: item.percentage,
  }));
}

watch(
  () => currentType.value.name,
  (newValue) => {
    if (newValue) {
      updateChartData();
    }
  },
  {
    immediate: true,
  }
);

onMounted(() => {
  fetchEnergyCostGrowth();
  if (intervalId) {
    clearInterval(intervalId);
  }
  intervalId = setInterval(() => {
    fetchEnergyCostGrowth();
  }, 60 * 60 * 1000);
});

onUnmounted(() => {
  clearInterval(intervalId);
});
</script>

<template>
  <div class="flex flex-wrap">
    <div class="w-full chart-data relative px-3">
      <div class="flex flex-wrap items-center justify-between">
        <h2 class="font-light pt-1 px-1">
          {{ $t("dashboard.relative_energy_consumption") }}
        </h2>
        <Select
          :value="currentType"
          class="!w-24"
          selectClass="border-info focus-within:border-info btn-xs text-xs"
          name="name"
          Attribute="title"
          :options="energyTypeList"
          :isTopLabelExist="false"
          :isBottomLabelExist="false"
        >
        </Select>
      </div>
      <div class="h-[100px]">
        <BarChart
          id="dashboard_chart_compare"
          class="h-full"
          :option="barChartOptions"
        />
      </div>

      <!-- 表格數據展示 -->
      <div class="flex justify-between">
        <div
          v-for="(data, index) in chartData"
          :key="index"
          class="text-center mx-1"
          :style="{ width: 100 / chartData.length + '%' }"
        >
          <div
            class="text-xs bg-cyan-900 p-1 border border-cyan-100 border-opacity-20"
          >
            {{ labels[0] }}
          </div>
          <div
            class="text-sm bg-cyan-900 p-1 border border-cyan-100 border-opacity-20"
          >
            {{ data.current ?? "-" }}
          </div>
          <div
            class="text-xs bg-cyan-900 p-1 border border-cyan-100 border-opacity-20"
          >
            {{ labels[1] }}
          </div>
          <div
            class="text-sm bg-cyan-900 p-1 border border-cyan-100 border-opacity-20"
          >
            {{ data.last ?? "-" }}
          </div>
          <div
            class="text-sm bg-cyan-900 p-1 border border-cyan-100 border-opacity-20"
          >
            <span
              :class="{
                'text-red-500': data.difference > 0,
                'text-green-500': data.difference < 0,
              }"
            >
              {{
                data.difference
                  ? (data.difference > 0 ? "+" : "") + data.difference
                  : "-"
              }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.chart-data:before {
  @apply absolute -left-0 -top-2 h-10 w-10 bg-no-repeat z-10;
  content: "";
  background: url(@ASSET/img/chart-data-background01.svg) center center;
}

.chart-data::after {
  @apply absolute -right-1 -bottom-3 h-10 w-10 bg-no-repeat z-10;
  content: "";
  background: url(@ASSET/img/chart-data-background02.svg) center center;
}
</style>
