<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import BarChart from "@/components/chart/BarChart.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
// 獨立顏色配置
const chartColors = {
  yesterdayToday: [
    { start: "#17CEE3", middle: "#398ECA", end: "#17CEE3" },
    { start: "#E4EA00", middle: "#b2b800", end: "#E4EA00" },
  ],
  weekComparison: [
    { start: "#62E39A", middle: "#53c283", end: "#62E39A" },
    { start: "#E9971F", middle: "#ba7a1c", end: "#E9971F" },
  ],
};

// 定義用電比較資料
const yesterdayTodayData = {
  categories: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00"],
  values: [
    {
      name: `2024.11.8 ${t("dashboard.electricity_consumption")}`,
      value: [8, 8, 8, 8, 8, 15, 25, 65, 75, 60, 70, 65],
    },
    {
      name: `2024.11.7 ${t("dashboard.electricity_consumption")}`,
      value: [10, 10, 10, 10, 10, 20, 30, 80, 90, 70, 80, 85],
    },
  ],
};

// 本週與上週用電比較資料
const weekComparisonData = {
  categories: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
  values: [
    {
      name: `${t("dashboard.thisweek_electricity_consumption")}`,
      value: [850, 200, 350, 850, 950, 950, 900],
    },
    {
      name: `${t("dashboard.lastweek_electricity_consumption")}`,
      value: [800, 150, 300, 750, 900, 900, 800],
    },
  ],
};

// 生成圓柱圖表的 option
const generateCylinderChartOption = (categories, values, colors) => {
  const barWidth = 15; // 圓柱體寬度
  return {
    xAxis: {
      type: "category",
      data: categories,
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#ccc",
        },
      },
    },
    series: [
      {
        name: values[0].name,
        type: "bar",
        barWidth: barWidth,
        data: values[0].value,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1, // 向右漸層
            y2: 0, // 水平漸層
            colorStops: [
              { offset: 0, color: colors[0].start },
              { offset: 0.5, color: colors[0].middle },
              { offset: 1, color: colors[0].end },
            ],
          },
        },
      },
      {
        name: values[1].name,
        type: "bar",
        barWidth: barWidth,
        data: values[1].value,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1, // 向右漸層
            y2: 0, // 水平漸層
            colorStops: [
              { offset: 0, color: colors[1].start },
              { offset: 0.5, color: colors[1].middle },
              { offset: 1, color: colors[1].end },
            ],
          },
        },
      },
      // 圓柱頂部
      {
        name: null,
        type: "pictorialBar",
        symbolSize: [barWidth, 5],
        symbolOffset: [-9, -5],
        symbolPosition: "end",
        data: values[0].value,
        z: 12,
        itemStyle: {
          color: colors[0].middle,
          borderWidth: 10,
          borderColor: "#fff",
          borderType: "solid",
        },
      },
      {
        name: null,
        type: "pictorialBar",
        symbolSize: [barWidth, 5],
        symbolOffset: [9, -5],
        symbolPosition: "end",
        data: values[1].value,
        itemStyle: {
          color: colors[1].middle,
          borderWidth: 10,
          borderColor: "#fff",
          borderType: "solid",
        },
        z: 12,
      },
      // 圓柱底部
      {
        name: null,
        type: "pictorialBar",
        symbolSize: [barWidth, 5],
        symbolOffset: [-9, 4],
        symbolPosition: "start",
        data: values[0].value,
        z: 12,
        itemStyle: {
          color: colors[0].middle,
        },
      },
      {
        name: null,
        type: "pictorialBar",
        symbolSize: [barWidth, 5],
        symbolOffset: [9, 4],
        symbolPosition: "start",
        data: values[1].value,
        itemStyle: {
          color: colors[1].middle,
        },
        z: 12,
      },
    ],
    grid: {
      left: "3%",
      right: "3%",
      bottom: "3%",
      top: "15%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params) {
        // 僅顯示 bar 系列的資料
        const barData = params.filter((item) => item.seriesType === "bar");
        return barData
          .map((item) => `${item.seriesName}: ${item.data}`)
          .join("<br/>");
      },
    },
    legend: {
      show: false, // 隱藏 legend
    },
  };
};

// 分別生成每個圖表的 option
const yesterdayTodayOption = generateCylinderChartOption(
  yesterdayTodayData.categories,
  yesterdayTodayData.values,
  chartColors.yesterdayToday
);
const weekComparisonOption = generateCylinderChartOption(
  weekComparisonData.categories,
  weekComparisonData.values,
  chartColors.weekComparison
);
</script>

<template>
  <div class="flex flex-wrap">
    <!-- 昨天與今天的用電比較 -->
    <div class="lg:w-1/2 w-full chart-data relative px-8 py-3">
      <div class="flex flex-wrap items-center">
        <h2 class="text-xs font-light w-1/2 relative">
          {{ $t("dashboard.elec_consumption_comparison_trend") }}
          (kWH)
        </h2>
        <div class="w-[48%]">
          <div class="text-con">
            <img src="@ASSET/img/chart-title01.svg" />
            <span>2024.11.8 {{ $t("dashboard.electricity_consumption") }}</span>
          </div>
          <div class="text-con">
            <img src="@ASSET/img/chart-title02.svg" />
            <span>2024.11.7 {{ $t("dashboard.electricity_consumption") }}</span>
          </div>
        </div>
      </div>
      <div class="h-[250px]">
        <BarChart
          id="dashboard_chart_yesterday_today"
          class="h-full"
          :option="yesterdayTodayOption"
        />
      </div>
    </div>

    <!-- 本週與上週的用電比較 -->
    <div class="lg:w-1/2 w-full chart-data relative px-8 py-3">
      <div class="flex flex-wrap items-center">
        <h2 class="text-xs font-light w-1/2 relative">
          {{ $t("dashboard.this_last_week") }}<br />
          {{ $t("dashboard.elec_consumption_comparison") }}
          (kWH)
        </h2>
        <div class="w-[48%]">
          <div class="text-con">
            <img src="@ASSET/img/chart-title03.svg" />
            <span>{{ $t("dashboard.thisweek_electricity_consumption") }}</span>
          </div>
          <div class="text-con">
            <img src="@ASSET/img/chart-title04.svg" />
            <span>{{ $t("dashboard.lastweek_electricity_consumption") }}</span>
          </div>
        </div>
      </div>
      <div class="h-[250px]">
        <BarChart
          id="dashboard_chart_week_comparison"
          class="h-full"
          :option="weekComparisonOption"
        />
      </div>
    </div>
  </div>
</template>

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

h2:after {
  @apply absolute -bottom-2 left-1/3 block translate-y-1/2 w-3/5 h-[1px] bg-success rounded-3xl;
  content: "";
}

.text-con {
  @apply relative text-white text-xs block mb-1;
}

.text-con span {
  @apply absolute top-1/2 w-[90%] left-0 right-0 m-auto -translate-y-1/2 text-xs text-center;
}
</style>
