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

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

<template>
  <div>
    <zh-module class="h-1/2" text="功率平滑 双向可控 局部增容" rightText="源">
      <div class="py-6 grid grid-cols-2 gap-2">
        <div
          type="item"
          class="w-[163px] h-[51px] inline-flex bg-[url('assets/images/home/l1_item_bg.png')]"
          v-for="i in item1"
        >
          <div class="w-[75px] 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="text-xs mt-1">{{ i.name }}</div>
            <div class="whitespace-pre mt-1">
              <span class="value text-lg font-bold">{{ i.value }}</span>
              <span class="unit">{{ i.unit }}</span>
            </div>
          </div>
        </div>
      </div>
      <v-charts
        class="h-[calc(100%-160px)]"
        type="line"
        :options="lineOptions"
      />
    </zh-module>
    <zh-module class="h-1/2" text="柔性调节 协同参与 智能存储" rightText="储">
      <div
        class="relative mt-8 mb-2 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"
        >
          SOH电池充电量
        </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-2">
        <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>