<script lang="ts" setup>
import { useRight } from "./useRight";

const { lineOption, barOption, pieOption } = useRight();
</script>

<template>
  <div>
    <zh-module class="h-[70%]" text="有序用电 精准调控 需求相应" rightText="荷">
      <div class="grid grid-rows-2 grid-flow-col gap-1 mt-4 px-2">
        <div
          class="relative text-center row-span-2 w-[111px] h-[146px] bg-[url('assets/images/home/r1-left_bg.png')]"
        >
          <div
            class="absolute animate-spin-slow top-10 left-6 w-[63px] h-[63px] bg-[url('assets/images/home/r1-top_center.png')]"
          ></div>
          <div class="mt-2">
            <span class="value text-lg">2336</span>
            <span class="unit">kw.h</span>
          </div>
          <div class="absolute bottom-6 w-full">
            <span class="text-[#B3E3E8] text-sm">今日用能</span>
          </div>
        </div>
        <div
          class="w-[181px] h-[54px] pl-20 bg-[url('assets/images/home/r1-right_item1.png')]"
        >
          <div class="text-[#B3E3E8]">
            <div class="whitespace-pre mt-2">
              <span class="value text-lg font-bold">78.09</span>
              <span class="unit">kw.h</span>
            </div>
            <div class="text-xs">光伏出力</div>
          </div>
        </div>
        <div
          class="w-[181px] h-[54px] pl-20 bg-[url('assets/images/home/r1-right_item2.png')]"
        >
          <div class="text-[#B3E3E8]">
            <div class="whitespace-pre mt-2">
              <span class="value text-lg font-bold">78.09</span>
              <span class="unit">kw.h</span>
            </div>
            <div class="text-xs">风电出力</div>
          </div>
        </div>
      </div>
      <v-charts
        class="w-full h-[calc(100%-160px-183px)]"
        type="line"
        :options="lineOption"
      />
      <div
        class="w-[369px] h-[183px] pb-[0px] pr-[0px] relative bg-[url('assets/images/home/r1-pie_bg.png')]"
      >
        <v-charts
          class="absolute w-full h-full"
          type="pie"
          :options="pieOption"
        />
        <div class="absolute top-4 left-9 text-center">
          <div class="text-[#B3E3E8] text-xs">空调</div>
          <span class="value text-base font-bold">24.5</span>
          <span class="unit">%</span>
        </div>
        <div class="absolute top-4 right-9 text-center">
          <div class="text-[#B3E3E8] text-xs">照明</div>
          <span class="value text-base font-bold">26.7</span>
          <span class="unit">%</span>
        </div>
        <div class="absolute left-9 bottom-8 text-center">
          <div class="text-[#B3E3E8] text-xs">电梯</div>
          <span class="value text-base font-bold">25.5</span>
          <span class="unit">%</span>
        </div>
        <div class="absolute right-9 bottom-8 text-center">
          <div class="text-[#B3E3E8] text-xs">其他</div>
          <span class="value text-base font-bold">23.3</span>
          <span class="unit">%</span>
        </div>
      </div>
    </zh-module>
    <zh-module class="h-[30%]" text="互联互供 潮流可控 自治可靠" rightText="网">
      <v-charts class="w-full h-full" type="bar" :options="barOption" />
    </zh-module>
  </div>
</template>
