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

const { lineOption, item1, Ranking } = useRight();
</script>

<template>
  <div>
    <zh-module title="能耗统计" EnTitle="energy" showIcon>
      <div class="flex justify-between mt-6">
        <div
          v-for="i in item1"
          class="bg-no-repeat w-[100px] h-[138px] relative"
          :style="{ backgroundImage: `url(${i.image})` }"
        >
          <div class="absolute bottom-[15px] w-full text-center">
            <div class="mb-1">
              <span class="value">{{ i.value }}</span
              ><span class="unit">{{ i.unit }}</span>
            </div>
            <div class="text-[#B3E3E8] w-full text-xs text-center">
              {{ i.name }}
            </div>
          </div>
        </div>
      </div>
    </zh-module>
    <zh-module
      class="h-[45%]"
      title="用能排名"
      EnTitle="energy ranking"
      showIcon
    >
      <div class="space-y-5 h-full py-6 flex flex-col items-center overflow-y-scroll">
        <div
          v-for="(i, index) in Ranking"
          class="flex items-center w-[332px] h-[45px] bg-[url('assets/images/soc/r2-list.png')] bg-no-repeat"
        >
          <div class="w-[45px] mr-5 inline-flex items-center justify-center">
            {{ index + 1 }}
          </div>
          <div class="w-[calc(100%-(37px+1rem))] pr-2">
            <div class="text-sm text-[#B3E3E8]">{{ i.name }}</div>
            <zh-progress
              :value="i.value"
              :total="Ranking.reduce((a:any, b:any) => a + b.value, 0)"
              :color="i.color"
              :labelWidth="60"
              unit="kw.h"
              showLabel
            ></zh-progress>
          </div>
        </div>
      </div>
    </zh-module>
    <zh-module
      class="h-1/3"
      title="用能趋势"
      EnTitle="energy usage trends"
      showIcon
    >
      <v-charts class="h-full" type="line" :options="lineOption" />
    </zh-module>
  </div>
</template>
