<script setup>
import { ref } from "vue";
import BarChart from "@/components/chart/BarChart.vue";

// 昨天與今天的用電比較資料
const yesterdayTodayData = {
  data: {
    categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    values: [
      {
        name: "Yesterday's electricity consumption",
        value: [10, 10, 10, 10, 10, 20, 30, 80, 90, 70],
      },
      {
        name: "Today's electricity consumption",
        value: [8, 8, 8, 8, 8, 15, 25, 65, 75, 60],
      },
    ],
  },
};

// 本週與上週的用電比較資料
const weekComparisonData = {
  data: {
    categories: ["週五", "週六", "週日", "週一", "週二", "週三", "週四"],
    values: [
      {
        name: "Last week's electricity consumption",
        value: [800, 150, 300, 750, 900, 900, 800],
      },
      {
        name: "This week's electricity consumption",
        value: [850, 200, 350, 850, 950, 950, 900],
      },
    ],
  },
};

// 生成每個圖表的 option，並隱藏 legend
const generateChartOption = (categories, values) => ({
  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,
      data: values[0].value,
      type: "bar",
      barWidth: "35%",
      itemStyle: {
        color: "#FFD700", // 黃色
      },
    },
    {
      name: values[1].name,
      data: values[1].value,
      type: "bar",
      barWidth: "35%",
      itemStyle: {
        color: "#00BFFF", // 藍色
      },
    },
  ],
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    show: false, // 隱藏 legend
  },
});

// 分別生成每個圖表的 option
const yesterdayTodayOption = generateChartOption(
  yesterdayTodayData.data.categories,
  yesterdayTodayData.data.values
);

const weekComparisonOption = generateChartOption(
  weekComparisonData.data.categories,
  weekComparisonData.data.values
);
</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">
          Yesterday / Today's<br />Electricity Consumption Comparison (kWH)
        </h2>
        <div class="w-[48%]">
          <a href="#" class="text-con">
            <img src="@ASSET/img/chart-title01.svg" />
            <span>Today’s electricity consumption</span>
          </a>
          <a href="#" class="text-con">
            <img src="@ASSET/img/chart-title02.svg" />
            <span>Yesterday’s electricity consumption</span>
          </a>
        </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">
          This Week's / Last Week's <br />Electricity Consumption Comparison (kWH)
        </h2>
        <div class="w-[48%]">
          <a href="#" class="text-con">
            <img src="@ASSET/img/chart-title01.svg" />
            <span>This week’s electricity consumption</span>
          </a>
          <a href="#" class="text-con">
            <img src="@ASSET/img/chart-title02.svg" />
            <span>Last week’s electricity consumption</span>
          </a>
        </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>
