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

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

<template>
  <div>
    <zh-module title="上网电量" EnTitle="enectricity" showIcon>
      <div class="flex justify-between mt-6">
        <div
          v-for="i in item1"
          class="bg-no-repeat w-[104px] h-[146px] relative bg-[url('assets/images/net/l1-item_bg.png')]"
        >
          <div class="absolute bottom-[72px] 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-[38%]"
      title="风电上网电量"
      EnTitle="wind power"
      showIcon
    >
      <v-charts
        class="w-full h-full"
        type="bar-line"
        :options="barLineOption"
      />
    </zh-module>
    <zh-module
      class="h-[38%]"
      title="光伏上网电量"
      EnTitle="photovoltaic"
      showIcon
    >
      <v-charts
        class="w-full h-full"
        type="bar-line"
        :options="barLine2Option"
      />
    </zh-module>
  </div>
</template>
