<script setup>
import { ref } from "vue";

// 假資料
const mockData = ref([
  { title: "Elevator system", icon: "EL", isError: false },
  { title: "CCTV system", icon: "C", isError: true },
  { title: "Emergency rescue system", icon: "P", isError: true },
  { title: "Air Conditioning System", icon: "M10", isError: false },
  { title: "Lighting system", icon: "L1", isError: false },
  { title: "Fire Equipment", icon: "F1", isError: false },
  { title: "Water supply system", icon: "W2", isError: false },
  {
    title: "Sewage and wastewater equipment",
    icon: "P1",
    isError: false,
  },
  { title: "High voltage switchboard", icon: "E1", isError: false },
  { title: "Low voltage switchboard", icon: "E2", isError: false },
  { title: "Meter system", icon: "E4-1", isError: false },
  { title: "Emergency generator", icon: "E3", isError: false },
  { title: "Shutdown system", icon: "PSC", isError: false },
  { title: "Access control system", icon: "R", isError: false },
  {
    title: "Environmental sensing equipment",
    icon: "M12",
    isError: false,
  },
  {
    title: "Air supply and exhaust system",
    icon: "M5-2",
    isError: false,
  },
]);
</script>

<template>
  <div class="flex flex-wrap -mx-1">
    <div
      v-for="(item, index) in mockData"
      :key="index"
      class="w-full sm:w-1/2 lg:w-1/4 relative my-2"
    >
      <img
        v-if="item.isError"
        src="@ASSET/img/equipment-item-background05.svg"
      />
      <img v-else src="@ASSET/img/equipment-item-background04.svg" />

      <div class="equipment-item">
        <div class="w-20">
          <img
            class="w-14 p-2 m-auto"
            :src="`./icon/${item.icon}.png`"
            alt="icon"
          />
        </div>
        <div class="icon-text">
          <div class="text-slate-300 text-xs">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.equipment-item {
  @apply flex items-center absolute top-1/2 w-[90%] left-0 right-0 m-auto text-center -translate-y-1/2;
}
.icon-text {
  @apply text-start font-light p-1 relative z-20;
}
.icon-text:before {
  @apply absolute -left-3 top-0 bottom-0 m-auto h-10 w-5 z-10;
  content: "";
  background-image: url(@ASSET/img/equipment-item-background.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
</style>
