<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { twMerge } from "tailwind-merge";
const router = useRouter();
// 假資料
const mockData = ref([
  {
    title: "Air Detection System",
    icon: "temperature-high",
    isError: false,
    main_system_tag: "Dust",
    sub_system_tag: "EM",
  },
  {
    title: "Lighting System",
    icon: "lightbulb",
    isError: false,
    main_system_tag: "LS",
    sub_system_tag: "ECLS",
  },
  {
    title: "Air Condition System",
    icon: "fan",
    isError: false,
    main_system_tag: "ME",
    sub_system_tag: "TH",
  },
  {
    title: "Electricity System",
    icon: "bolt",
    isError: false,
    main_system_tag: "EE",
    sub_system_tag: "ECP3",
  },
  {
    title: "Elevator System",
    icon: "building",
    isError: false,
    main_system_tag: null,
    sub_system_tag: null,
  },
  {
    title: "High Voltage Switchboard",
    icon: "charging-station",
    isError: false,
    main_system_tag: null,
    sub_system_tag: null,
  },
  {
    title: "Low Voltage Switchboard",
    icon: "charging-station",
    isError: false,
    main_system_tag: null,
    sub_system_tag: null,
  },
  {
    title: "Water Supply System",
    icon: "tint",
    isError: false,
    main_system_tag: null,
    sub_system_tag: null,
  },
  {
    title: "Sewage And Wastewater Equipment",
    icon: "water",
    isError: false,
    main_system_tag: null,
    sub_system_tag: null,
  },
  {
    title: "Emergency Generator",
    icon: "car-battery",
    isError: false,
    main_system_tag: null,
    sub_system_tag: null,
  },
  {
    title: "Fire Equipment",
    icon: "fire-extinguisher",
    isError: false,
    main_system_tag: null,
    sub_system_tag: null,
  },
  {
    title: "CCTV System",
    icon: "video",
    isError: false,
    main_system_tag: null,
    sub_system_tag: null,
  },
  {
    title: "Access Control System",
    icon: "door-open",
    isError: false,
    main_system_tag: null,
    sub_system_tag: null,
  },
  {
    title: "Shutdown System",
    icon: "car",
    isError: false,
    main_system_tag: null,
    sub_system_tag: null,
  },
  {
    title: "Emergency Rescue System",
    icon: "exclamation-triangle",
    isError: false,
    main_system_tag: null,
    sub_system_tag: null,
  },
  {
    title: "Air Supply Aand Exhaust System",
    icon: "wind",
    isError: false,
    main_system_tag: null,
    sub_system_tag: null,
  },
]);

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">
    <div
      v-for="(item, index) in mockData"
      :key="index"
      :class="
        twMerge(
          'w-full sm:w-1/2 lg:w-1/4 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">
          <FontAwesomeIcon
            class="text-2xl mt-1 m-auto"
            :icon="['fas', item.icon]"
          ></FontAwesomeIcon>
        </div>
        <div class="icon-text">
          <div class="">
            {{ 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>
