<script setup>
import { ref, computed } from "vue";
import useSearchParam from "@/hooks/useSearchParam";
const { searchParams, changeParams } = useSearchParam();
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const props = defineProps({
  data: {
    type: Object,
  },
});

const currentData = computed(() => {
  return props.data[searchParams.value.floor_id] || [];
});
</script>
<template>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
    <div
      v-for="device in currentData"
      :key="device.id"
      class="col-auto relative"
    >
      <div class="item h-full cursor-pointer">
        <div class="left w-full h-full flex flex-wrap justify-center">
          <div class="sec02 w-full">
            <div
              v-if="device[2]?.icon"
              class="border-2 rounded-lg shadow-sm shadow-slate-100 p-2 me-2"
              :style="{
                backgroundColor: device[2]?.bgColor,
              }"
            >
              <img
                :src="`${device[2]?.icon}`"
                :alt="device[2]?.full_name"
                class=""
              />
            </div>
            <span v-else></span>
            <span>{{ device[2]?.full_name }}</span>
          </div>
          <div class="flex justify-between w-full self-end">
            <div class="sec03">
              <span
                class="w-5 h-5 rounded-full"
                :style="{
                  backgroundColor: device[2]?.bgColor,
                }"
              ></span>
              <span class="mx-2">{{ $t("system.status") }}:</span>
              <span>{{ device[2]?.state }}</span>
            </div>
            <!-- <button
              class="btn-text border-0"
              @click.prevent="
                (e) => {
                  if (device.full_name === 'SmartSocket-AA001') {
                    openDialog();
                  } else {
                    getCurrentInfoModalData(
                      e,
                      { left: e.clientX, top: e.clientY },
                      device
                    );
                  }
                }
              "
            >
              {{ $t("system.details") }}
            </button> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="css" scoped>
/*設備顯示*/

.item {
  @apply flex items-center border border-success rounded shadow-emerald-600 shadow-inner py-4 px-5 relative mb-5 after:absolute after:right-0 after:top-3 after:w-6 after:h-10 after:bg-[url(/src/assets/img/equipment/state-background.svg)] after:z-10;
}

.item .btn-text {
  @apply hover:bg-transparent focus-within:bg-transparent !important;
}

.item .sec01 span:nth-child(1) {
  font-size: 1rem;
  position: relative;
  margin-right: 50px;
}
.item .sec01 span:nth-child(1)::after {
  content: "";
  position: absolute;
  bottom: 5px;
  right: -47px;
  display: block;
  transform: translateY(50%);
  width: 45px;
  height: 1px;
  background-color: #35eded;
  border-radius: 25px;
  z-index: 10;
}

.item .sec01 span:nth-child(2) {
  font-size: 0.6rem;
}

.item .sec02 {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 10px;
}

.item .sec02::after {
  content: "";
  background: url(/src/assets/img/equipment/state-title.svg) center center;
  position: absolute;
  right: 0;
  bottom: -18px;
  height: 25px;
  width: 105px;
  background-repeat: no-repeat;
  z-index: 1;
}

.item .sec02 img {
  /* margin-right: 10px; */
  width: 1.5rem !important;
  height: 1.5rem;
}

.item .sec02 span:nth-child(1) {
  background-color: #31afdf;
  border: 3px solid #fff;
  display: block;
  border-radius: 5px;
  margin-right: 10px;
  width: 1.5rem !important;
  height: 1.5rem;
}

.item .sec02 span:nth-child(2) {
  font-size: 1.2rem;
  width: calc(100% - 2rem);
  word-break: break-all;
}

.item .sec03 {
  display: flex;
  align-items: center;
}
</style>
