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

// Mock data based on the image, grouped data
const mockData = ref([
  {
    title: "Abnormal state",
    items: [
      [
        { label: "Abnormal", value: 0 },
        { label: "Return", value: 5168 },
      ],
      [
        { label: "Confirmed", value: 182 },
        { label: "Unacknowledged", value: 4986 },
      ],
    ],
  },
  {
    title: "Progress",
    items: [
      [
        { label: "Not dispatched", value: 5126 },
        { label: "Dispatched", value: 42 },
      ],
      [
        { label: "Completed", value: 28 },
        { label: "Unfinished", value: 14 },
      ],
    ],
  },
]);

// Compute progress value for each group
const getProgressValue = (group) => {
  const total = group.reduce((sum, item) => sum + item.value, 0);
  return (group[0].value / total) * 100;
};
</script>

<template>
  <div class="flex flex-wrap">
    <div
      v-for="(section, index) in mockData"
      :key="index"
      class="w-full sm:w-1/2 state-box-col relative px-4"
    >
      <div class="state-box">
        <div class="title">
          <img class="state-title01" src="@ASSET/img/state-title01.svg" />
          <span>{{ section.title }}</span>
          <img class="state-title02" src="@ASSET/img/state-title02.svg" />
        </div>

        <div
          v-for="(group, groupIndex) in section.items"
          :key="groupIndex"
          class="item"
        >
          <div class="item-title">
            <div
              v-for="(item, itemIndex) in group"
              :key="itemIndex"
              class="text"
            >
              <div class="text-position">
                <span>{{ item.label }}</span>
                <span>{{ item.value }}</span>
              </div>
            </div>
          </div>
          <div class="state-ul">
            <img src="@ASSET/img/state-ul.svg" />
            <div class="box">
              <div class="mark">
                <span>{{ group[0].value }}</span>
                <span
                  ><img class="w-[50px]" src="@ASSET/img/state-ul-text.svg" />
                </span>
                <span>{{ group[1].value }}</span>
              </div>
              <progress
                class="progress [&::-webkit-progress-value]:bg-red-600 [&::-moz-progress-bar]:bg-red-600"
                :value="getProgressValue(group)"
                max="100"
                size=""
              ></progress>
            </div>
          </div>
        </div>
      </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 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-6;
}

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

.state-box .title .state-title02 {
  @apply w-5 ml-1.5;
}

.state-box .item-title {
  @apply flex justify-between items-center m-auto mb-1 relative;
}

.state-box .item-title:after {
  @apply absolute right-0 -bottom-2.5 w-full h-4 bg-no-repeat bg-center z-10;
  content: "";
  background-image: url(@ASSET/img/text-position-line.svg);
}

.state-box .item-title .text {
  @apply w-1/2 m-0 mb-1.5 flex justify-center items-center relative;
}

.state-box .item-title .text .text-position span {
  @apply block text-center text-xs;
}

.state-box .item-title .text .text-position span:nth-child(2) {
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8);
}

.mark {
  @apply flex justify-between items-center mb-2.5;
}

.state-ul {
  @apply relative mb-2.5;
}

.state-ul::after {
  @apply absolute -left-3.5 top-0 w-4 h-16 bg-no-repeat bg-center z-10;
  content: "";
  background-image: url(@ASSET/img/state-ul-background01.svg);
}

.state-ul .box {
  @apply absolute top-1/2 w-4/5 left-0 right-0 m-auto text-center -translate-y-1/2;
}

.progress {
  @apply w-full h-3 rounded;
  appearance: none;

  &::-webkit-progress-bar {
    border: 1px solid #ffffff;
    background-color: #5eabea;
  }

  &::-webkit-progress-value {
    border-radius: 4px;
  }
}
</style>
