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

const { item1, item2 } = useLeft();
</script>

<template>
  <div>
    <zh-module title="储能总览" EnTitle="energy storage" showIcon>
      <div class="flex justify-between mt-6">
        <div
          v-for="i in item1"
          class="bg-no-repeat w-[100px] h-[178px] relative"
          :style="{ backgroundImage: `url(${i.image})` }"
        >
          <div class="absolute bottom-[52px] w-full text-center">
            <span class="value">{{ i.value }}</span
            ><span class="unit">{{ i.unit }}</span>
          </div>
          <div
            class="text-[#B3E3E8] w-full text-xs absolute bottom-5 text-center"
          >
            {{ i.name }}
          </div>
        </div>
      </div>
    </zh-module>
    <zh-module
      class="h-3/4"
      title="储能状态"
      EnTitle="energy storage status"
      showIcon
    >
      <div
        class="relative mt-8 mb-5 w-[335px] h-[192px] bg-[url('assets/images/home/l2-top_bg.png')]"
      >
        <div
          class="absolute animate-spin-slow left-[calc(50%-(123px/2))] top-0 w-[123px] h-[123px] bg-[url('assets/images/home/l2-top_center.png')]"
        ></div>
        <div class="absolute left-[calc(50%)] translate-x-[-50%] top-[44px]">
          <span class="value text-3xl">50</span><span class="unit">%</span>
        </div>
        <div
          class="absolute bottom-12 left-[calc(50%)] translate-x-[-50%] text-[#B3E3E8] text-sm"
        >
          实时充电量
        </div>
        <div class="absolute -bottom-4 left-[5px] text-[#B3E3E8] text-xs">
          储能容量:<span class="value text-lg">30</span>kw/<span class="value text-lg">60</span>kw.h
        </div>
        <div class="absolute left-4 top-10 flex items-center">
          <span class="text-[#EB5050] mr-1">故障</span>
          <span class="writing-vertical text-xs text-[#B3E3E8]">故障状态</span>
        </div>
        <div class="absolute right-3 top-10 flex items-center">
          <span class="writing-vertical mr-1 text-xs text-[#B3E3E8]"
            >实时状态</span
          >
          <span class="w-10 [line-height:1] value">低峰充电</span>
        </div>
      </div>
      <div class="grid grid-cols-2 gap-x-2 gap-y-8">
        <div
          class="w-[163px] h-[62px] inline-flex bg-[url('assets/images/home/l2_item_bg.png')]"
          v-for="i in item2"
        >
          <div class="w-[90px] flex items-center justify-center">
            <img :src="i.image" alt="" />
          </div>
          <div
            class="w-[calc(100%-22px)] inline-flex flex-col justify-start text-[#B3E3E8] ml-2"
          >
            <div class="whitespace-pre mt-1">
              <span class="text-lg font-bold value">{{ i.value }}</span>
              <span class="unit">{{ i.unit }}</span>
            </div>
            <div class="text-xs">{{ i.name }}</div>
          </div>
        </div>
      </div>
    </zh-module>
  </div>
</template>
