<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";

const chartDiv = ref(null);

const chartOption = {
  tooltip: {
    trigger: "item",
    formatter: "{b}: {c}kWh",
  },
  series: [
    {
      type: "sankey",
      layout: "none",
      nodeWidth: 20,
      nodeGap: 10,
      data: [
        { name: "Total", value: 100 },
        { name: "HVAC System", value: 40 },
        { name: "Lighting System", value: 25 },
        { name: "Elevator System", value: 15 },
        { name: "Outlets", value: 10 },
        { name: "Others", value: 10 },
      ],
      links: [
        { source: "Total", target: "HVAC System", value: 40 },
        { source: "Total", target: "Lighting System", value: 25 },
        { source: "Total", target: "Elevator System", value: 15 },
        { source: "Total", target: "Outlets", value: 10 },
        { source: "Total", target: "Others", value: 10 },
      ],
      emphasis: {
        focus: "adjacency",
      },
      label: {
        position: "right",
        fontSize: 14,
        color: "#fff",
      },
      itemStyle: {
        borderWidth: 0,
      },
      lineStyle: {
        color: "target",
        opacity: 0.7,
        curveness: 0.5,
      },
    },
  ],
};

onMounted(() => {
  nextTick(() => {
    const myChart = echarts.init(chartDiv.value);
    myChart.setOption(chartOption);
  });
});
</script>

<template>
  <div class="p-3">
    <h2 class="text text-lg text-white mb-5 relative">
      {{ $t("energy.elec_consumption") }}
    </h2>
    <div class="chart-container">
      <div ref="chartDiv" class="w-full min-h-[190px] h-full"></div>
    </div>
    <div class="text-sm mt-3.5">
      <ul class="flex flex-wrap items-center text-white">
        <li class="pr-5 relative z-20">
          <span class="pr-3.5"> {{ $t("energy.total_elec") }} (kWh)</span>
          <span class="pr-3.5">160.05</span>
        </li>
        <li class="pr-5 relative z-20">
          <span class="pr-3.5">{{ $t("energy.green_elec") }} (kWh)</span>
          <span class="pr-3.5">39.50</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.text::after {
  @apply absolute -bottom-2.5 left-0 block w-3/5 h-[1px] bg-slate-600;
  content: "";
}

ul li:last-child:after {
  @apply absolute top-0 bottom-0 left-full block w-full h-[1px] bg-slate-600 m-auto z-10;
  content: "";
}
</style>
