<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: "總電錢", value: 100 },
        { name: "空調系統", value: 40 },
        { name: "照明系統", value: 25 },
        { name: "電梯系統", value: 15 },
        { name: "插座", value: 10 },
        { name: "其他", value: 10 },
      ],
      links: [
        { source: "總電錢", target: "空調系統", value: 40 },
        { source: "總電錢", target: "照明系統", value: 25 },
        { source: "總電錢", target: "電梯系統", value: 15 },
        { source: "總電錢", target: "插座", value: 10 },
        { source: "總電錢", target: "其他", value: 10 },
      ],
      emphasis: {
        focus: "adjacency",
      },
      label: {
        position: "right",
        fontSize: 12,
        borderWidth: 0,
      },
      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">用電即時分佈</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">總用電 (kWh)</span>
          <span class="pr-3.5">160.05</span>
        </li>
        <li class="pr-5 relative z-20">
          <span class="pr-3.5">綠電 (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>
