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

const equipmentData = ref({
  title: "System Status",
  items: [
    { label: "Auxiliary", online: 6, offline: 0, alarm: 0 },
    { label: "Air Detection", online: 31, offline: 0, alarm: 2 },
    { label: "Electricity", online: 12, offline: 0, alarm: 1 },
    { label: "Lighting", online: 20, offline: 3, alarm: 0 },
    { label: "Air Condition", online: 23, offline: 0, alarm: 0 },
  ],
});

const orderData = ref({
  title: "Work Order",
  items: [
    { label: "Unassigned", value: 2 },
    { label: "Assigned", value: 4 },
    { label: "Completed", value: 1 },
  ],
});
</script>

<template>
  <div class="flex flex-wrap">
    <div class="w-full sm:w-3/5 state-box-col relative ps-2">
      <div class="state-box">
        <div class="title">
          <img class="state-title01" src="@ASSET/img/state-title01.svg" />
          <span class="">{{ equipmentData.title }}</span>
          <img class="state-title02" src="@ASSET/img/state-title02.svg" />
        </div>
        <table class="table table-sm text-center">
          <thead>
            <tr class="border-cyan-400 text-cyan-100">
              <th></th>
              <th>Online</th>
              <th>Offline</th>
              <th>Alarm</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, index) in equipmentData.items"
              :key="index"
              class="border-cyan-400"
            >
              <th class="px-0 text-start">{{ item.label }}</th>
              <td>{{ item.online }}</td>
              <td>{{ item.offline }}</td>
              <td>{{ item.alarm }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="w-full sm:w-2/5 state-box-col relative ps-2">
      <div class="state-box">
        <div class="title">
          <img class="state-title01" src="@ASSET/img/state-title01.svg" />
          <span>{{ orderData.title }}</span>
          <img class="state-title02" src="@ASSET/img/state-title02.svg" />
        </div>
        <table class="table table-sm text-center">
          <thead>
            <tr class="border-cyan-400 text-cyan-100">
              <th></th>
              <th>value</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, index) in orderData.items"
              :key="index"
              class="border-cyan-400"
            >
              <th class="px-0 text-start">
                <span>{{ item.label }}</span>
              </th>
              <td>{{ item.value }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.state-box-col:before {
  @apply absolute left-0 right-0 -top-0.5 m-auto h-2 w-36 bg-no-repeat bg-center z-10;
  content: "";
  background-image: url(@ASSET/img/state-box-top.png);
}

.state-box-col:after {
  @apply absolute left-0 right-0 -bottom-0.5 m-auto h-2 w-36 bg-no-repeat bg-center z-10;
  content: "";
  background-image: url(@ASSET/img/state-box-bottom.png);
}

.state-box {
  @apply h-80 border-2 border-light-info rounded-sm py-2 px-6 text-white relative;
}

.state-box:after {
  @apply absolute right-3 top-3 w-4 h-4 bg-no-repeat bg-center z-10;
  content: "";
  background-image: url(@ASSET/img/state-title01.svg);
}

.state-box:before {
  @apply absolute right-0.5 bottom-5 w-4 h-32 bg-no-repeat bg-center z-10;
  content: "";
  background-image: url(@ASSET/img/state-ul-background02.svg);
}

.state-box .title {
  @apply relative flex items-center mb-4;
}

.state-box .title .state-title01 {
  @apply w-4 mr-1.5;
}

.state-box .title .state-title02 {
  @apply w-5 ml-1.5;
}
</style>
