<script lang="ts" setup>
import { ref } from "vue";
import { useLeft } from "./useLeft";
import PopoverSoc from "@/components/PopoverSoc.vue";

const { barOption, pieOption, itemList } = useLeft();
const show = ref<boolean>(false);
</script>

<template>
  <div>
    <popover-soc v-model="show"></popover-soc>
    <zh-module title="抄表采集率" EnTitle="energy storage" showIcon>
      <div
        class="mt-2 w-full h-[203px] bg-[url('assets/images/soc/l1_bg.png')] bg-no-repeat bg-center relative text-center"
      >
        <div class="absolute right-2 top-0">
          <div
            class="text-sm cursor-pointer hover:text-sky-300"
            @click="show = true"
          >
            一键采集
          </div>
        </div>
        <div class="absolute left-10 top-[58px]">
          <div>
            <span class="value">45</span>
            <span class="unit">个</span>
          </div>
          <div class="text-[#B3E3E8] text-sm">实采数据</div>
        </div>
        <div class="absolute left-[50%] translate-x-[-50%] top-6">
          <span class="value text-3xl">50</span>
          <span class="unit">%</span>
        </div>
        <div class="absolute right-10 top-[58px]">
          <div>
            <span class="text-[#F05050]">5</span>
            <span class="text-[#F05050] text-xs">个</span>
          </div>
          <div class="text-[#B3E3E8] text-sm">失败数据</div>
        </div>
        <div class="absolute left-[50%] translate-x-[-50%] bottom-[62px]">
          <div>
            <span class="value">50</span>
            <span class="unit">个</span>
          </div>
          <div class="text-[#B3E3E8] text-sm">应采数据</div>
        </div>
      </div>
    </zh-module>
    <zh-module title="用电分项统计" EnTitle="energy storage" showIcon>
      <div class="flex justify-between mt-2">
        <div
          v-for="i in itemList"
          class="w-[109px] h-[159px] flex flex-col justify-between"
          :style="{ backgroundImage: `url(${i.image})` }"
        >
          <div class="text-center">
            <div class="value">{{ i.value }}</div>
            <div class="unit">{{ i.unit }}</div>
          </div>
          <div class="text-sm text-center mb-2">
            <div>
              环比：<span class="text-[#C1C77D]"
                >{{ i.hb }}<span class="text-xs">%</span></span
              >
            </div>
            <div>
              同比：<span class="text-[#C1C77D]"
                >{{ i.tb }}<span class="text-xs">%</span></span
              >
            </div>
            <div class="text-[#B3E3E8] text-sm mt-3">{{ i.name }}</div>
          </div>
        </div>
      </div>
      <div
        class="w-[369px] h-[178px] pb-[2px] pr-[17px] relative bg-[url('assets/images/soc/l2-pie_bg.png')]"
      >
        <v-charts class="w-full h-full" type="bar" :options="pieOption" />
        <div class="absolute top-4 left-9 text-center">
          <div class="text-[#B3E3E8] text-xs">空调</div>
          <div>
            <span class="value text-base font-bold">24.5</span>
            <span class="unit">kw.h</span>
          </div>
        </div>
        <div class="absolute top-4 right-9 text-center">
          <div class="text-[#B3E3E8] text-xs">照明</div>
          <span class="value text-base font-bold">26.7</span>
          <span class="unit">kw.h</span>
        </div>
        <div class="absolute left-9 bottom-8 text-center">
          <div class="text-[#B3E3E8] text-xs">电梯</div>
          <span class="value text-base font-bold">25.5</span>
          <span class="unit">kw.h</span>
        </div>
        <div class="absolute right-9 bottom-8 text-center">
          <div class="text-[#B3E3E8] text-xs">其他</div>
          <span class="value text-base font-bold">23.3</span>
          <span class="unit">kw.h</span>
        </div>
      </div>
    </zh-module>
    <zh-module
      class="h-[30%]"
      title="新能源消纳情况"
      EnTitle="energy storage"
      showIcon
    >
      <v-charts class="w-full h-full" type="bar" :options="barOption" />
    </zh-module>
  </div>
</template>
