<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { twMerge } from "tailwind-merge";
import useBuildingStore from "@/stores/useBuildingStore";
const store = useBuildingStore();
const router = useRouter();
const FILE_BASEURL = window.env?.VITE_FILE_API_BASEURL;
const navigateToSubSystem = (mainSystemId, subSystemId) => {
  router.push({
    name: "sub_system",
    params: {
      main_system_id: mainSystemId,
      sub_system_id: subSystemId,
      floor_id: "main",
    },
  });
};
</script>

<template>
  <div class="flex flex-wrap -mx-1 h-[21rem] overflow-y-scroll">
    <div
      v-for="(item, index) in store.subSys"
      :key="index"
      :class="
        twMerge(
          'w-full sm:w-1/2 relative my-2 ',
          item.sub_system_tag
            ? 'saturate-200 cursor-pointer text-base text-info'
            : 'grayscale opacity-70 cursor-not-allowed text-sm'
        )
      "
      @click="navigateToSubSystem(item.main_system_tag, item.sub_system_tag)"
    >
      <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">
          <img
            v-if="item.device_image_url"
            class="w-7 m-auto"
            :src="`${FILE_BASEURL}/${item.device_image_url}`"
          />
          <FontAwesomeIcon
            v-else
            class="text-2xl mt-1 m-auto"
            :icon="['fas', 'tv']"
          ></FontAwesomeIcon>
        </div>
        <div class="icon-text">
          <div class="">
            {{ item.full_name }}
          </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>
