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

const { pieOption, pieChart, itemList } = useLeft();
</script>

<template>
  <div>
    <zh-module
      class="h-1/3"
      title="设备类型统计"
      EnTitle="equipment type"
      showIcon
    >
      <div class="mt-7">
        <div
          class="h-[201px] bg-[url('assets/images/device/l1-pie_bg.png')] bg-no-repeat bg-center"
        >
          <v-charts
            class="w-full h-full"
            type="pie"
            :options="pieOption"
            ref="pieChart"
          />
        </div>
      </div>
    </zh-module>
    <zh-module
      class="h-1/3"
      title="设备状态分析"
      EnTitle="equipment status"
      showIcon
    >
      <div
        class="h-[66px] bg-[url('assets/images/device/l2-top_bg.png')] bg-center bg-no-repeat text-center pt-5 mt-2"
      >
        <div class="text-[#B3E3E8] text-xs">设备总数</div>
        <div class="tracking-[16px] ml-5 font-bold">
          <span v-for="value in countFormat(1220, 6)">{{ value }}</span>
        </div>
      </div>
      <div class="flex justify-between mt-4">
        <div
          v-for="i in itemList"
          class="w-[103px] h-[150px] bg-no-repeat relative"
          :style="{ backgroundImage: `url(${i.image})` }"
        >
          <div class="absolute bottom-[82px] w-full text-center">
            <span class="value">{{ i.value }}</span
            ><span class="unit">{{ i.unit }}</span>
          </div>
          <div class="w-full text-xs absolute bottom-12 text-center">
            {{ i.pct }}<span class="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-1/3"
      title="处置状态"
      EnTitle="dispositition status"
      showIcon
    >
      <div class="flex mt-3 justify-around">
        <div
          class="w-[157px] h-[235px] bg-[url('assets/images/device/l3-item_bg.png')] text-center text-[#B3E3E8] text-xs"
        >
          <div class="text-lg mt-[45px]">12 %</div>
          <div class="mt-9">
            <div class="mb-3">
              今日报警：<span class="text-[#E15050]">12次</span>
            </div>
            <div>
              <span class="value text-base">10</span
              ><span class="unit">件</span>
            </div>
            <div>已处理信息</div>
          </div>
        </div>
        <div
          class="w-[157px] h-[235px] bg-[url('assets/images/device/l3-item_bg.png')] text-center text-[#B3E3E8] text-xs"
        >
          <div class="text-lg mt-[45px]">12 %</div>
          <div class="mt-9">
            <div class="mb-3">
              本月报警：<span class="text-[#E15050]">75次</span>
            </div>
            <div>
              <span class="value text-base">65</span
              ><span class="unit">件</span>
            </div>
            <div>已处理信息</div>
          </div>
        </div>
      </div>
    </zh-module>
  </div>
</template>
