<script setup>
import { inject } from "vue"

const { data } = inject("system_deviceList")



</script>

<template>
  <!-- <InfoModal :data="currentInfoModalData" /> -->

  <template v-if="data.length > 0">
    <div class="equipment-show" v-for="d in data" :key="d.full_name">
      <template v-if="d.device_list.length > 0">
        <p class="title">{{ d.full_name }}</p>
        <div class="grid grid-cols-3 gap-5">
          <div class="col-auto relative" v-for="device in d.device_list" :key="device.device_guid">
            <div class="item">
              <div class="left w-4/5">
                <div class="sec02">
                  <img v-if="device.device_image_url" :src="device.device_image_url" alt="" class="w-8 h-8">
                  <span class="w-8 h-8" v-else></span>
                  <span>{{ device.full_name }}</span>
                </div>
                <div class="sec03">
                  <span></span>
                  <span>狀態：</span>
                  <span></span>
                </div>
              </div>


            </div>

          </div>
        </div>
      </template>
    </div>
  </template>
</template>

<style lang='css' scoped>
/*設備顯示*/
.title {
  @apply text-lg text-white relative inline-block mb-5 after:absolute after:-bottom-2 after:left-1/4 after:w-4/5 after:h-[1px] after:bg-info;
}

.item {
  @apply flex items-center border border-success 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;
  ;

}

.equipment-show .item .sec01 span:nth-child(1) {
  font-size: 1rem;
  position: relative;
  margin-right: 50px;
}

.equipment-show .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;
}

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

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

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

.equipment-show .item .sec02 span:nth-child(1) {
  background-color: #31afdf;
  border: 3px solid #fff;
  display: block;
  border-radius: 5px;
  margin-right: 10px;
}

.equipment-show .item .sec02 span:nth-child(2) {
  font-size: 1.5rem;
}

.equipment-show .item .sec03 {
  display: flex;
  align-items: center;
}

.equipment-show .item .sec03 span:nth-child(1) {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  display: block;
  margin-right: 10px;
}
</style>