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

// 假資料
const mockData = ref([
  { title: "Elevator system", icon: "building", isError: false },
  { title: "Air Conditioning System", icon: "fan", isError: false },
  { title: "Environmental sensing equipment", icon: "temperature-high", isError: false },
  { title: "Lighting system", icon: "lightbulb", isError: false },
  { title: "Meter system", icon: "bolt", isError: false },
  { title: "High voltage switchboard", icon: "charging-station", isError: false },
  { title: "Low voltage switchboard", icon: "charging-station", isError: false },
  { title: "Water supply system", icon: "tint", isError: false },
  { title: "Sewage and wastewater equipment", icon: "water", isError: false },
  { title: "Emergency generator", icon: "car-battery", isError: false },
  { title: "Fire Equipment", icon: "fire-extinguisher", isError: false },
  { title: "CCTV system", icon: "video", isError: true },
  { title: "Access control system", icon: "door-open", isError: false },
  { title: "Shutdown system", icon: "car", isError: false },
  { title: "Emergency rescue system", icon: "exclamation-triangle", isError: true },
  { title: "Air supply and exhaust system", icon: "wind", 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-16">
          <FontAwesomeIcon  class="text-2xl mt-1 m-auto" :icon="['fas', item.icon]"></FontAwesomeIcon>
        </div>
        <div class="icon-text">
          <div class="text-slate-300 text-sm">{{ 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 w-52 text-start p-3 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>
