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

const { l1ItemList, l2ItemList, lineOption } = useRight();
</script>

<template>
  <div>
    <zh-module
      class="h-1/3"
      title="风力发电量"
      EnTitle="maximum output"
      showIcon
    >
      <div
        class="w-full h-[90px] bg-[url('assets/images/source/l1-top.png')] bg-no-repeat flex items-center pl-14"
      >
        <span class="text-[#B3E3E8] text-xs tracking-widest whitespace-pre">
          今日发电<span class="value text-lg font-bold">78456</span
          ><span class="unit"> kw.h</span>
        </span>
      </div>
      <div class="flex justify-between mt-2">
        <div
          v-for="i in l1ItemList"
          class="w-[108px] h-[134px] relative"
          :style="{
            backgroundImage: `url(${i.image})`,
          }"
        >
          <div class="text-center mt-1">
            <div class="value font-bold">{{ i.value }}</div>
            <div class="unit">{{ i.unit }}</div>
          </div>
          <div
            class="w-full absolute bottom-5 text-[#B3E3E8] text-xs text-center"
          >
            {{ i.name }}
          </div>
        </div>
        <div></div>
        <div></div>
      </div>
    </zh-module>
    <zh-module
      class="min-h-[28%]"
      title="风力发电量指标"
      EnTitle="efficiency"
      showIcon
    >
      <div class="grid grid-cols-2 gap-x-0 gap-y-8 py-10">
        <div
          v-for="i in l2ItemList"
          class="h-[51px] inline-flex pl-16 bg-no-repeat"
          :style="{
            backgroundImage: `url(${i.image})`,
          }"
        >
          <div
            class="w-[calc(100%-22px)] inline-flex flex-col justify-start text-[#B3E3E8]"
          >
            <div class="whitespace-pre mt-2">
              <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>
    <zh-module
      class="h-1/3"
      title="发电量预测趋势"
      EnTitle="generation"
      showIcon
    >
      <v-charts class="h-full" type="line" :options="lineOption" />
    </zh-module>
  </div>
</template>
