<style scoped>
.bg-color {
  background-color: #b7e3fd;
  height: 100%;
  overflow: auto;
}
.div-box {
  background-color: #fff;
  border-radius: 1rem;
  border: 1px solid #bbbbbb;
}
.div-box.loading {
  color: rgba(0, 0, 0, 0.6);
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid transparent;
}
.system-card {
  display: flex;
  overflow-x: auto;
}
.system-card .div-box {
  min-width: 23rem;
  min-height: 9.5rem;
}
.system-card .div-box .usaged {
  display: inline-block;
  border-bottom: 1px #000 solid;
  font-size: 2rem;
  font-weight: bold;
}
.system-card .div-box .limit {
  color: #0000ff;
  font-size: 0.8rem;
  font-weight: bold;
}
.system-card .div-box .left-name {
  color: #0066ff;
  font-size: 1.1rem;
  font-weight: bold;
}
.system-card .div-box .right-date {
  color: #000;
  font-size: 0.9rem;
  font-weight: bold;
}
.system-card .div-box .box-num {
  display: flex;
  justify-content: space-between;
}
.system-card .div-box .box-none {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}
</style>
<template>
  <div class="bg-color p-4">
    <div class="system-card mb-3">
      <div class="div-box loading p-4 me-4" v-if="filteredUserSystems.length == 0">
        <p class="box-none my-4">{{ $t('global.loading') }}</p>
      </div>
      <div class="div-box p-3 me-3" v-for="system in filteredUserSystems" :key="system.id">
        <div class="d-flex justify-content-between align-items-center">
          <span class="left-name">{{ system.name }}</span>
          <span class="right-date">{{ system.expiry_date }}</span>
        </div>
        <div class="box-num mt-3" v-if="system.user_plan && systemRole[system.id]">
          <div
            class="flex-1 text-center"
            v-for="item in system.user_plan.items"
            :key="item.id"
          >
            <p class="usaged px-3">{{ item.usaged ?? 0 }}</p>
            <p class="limit mt-1">{{ item.item.item }} {{ item.amount }} {{ item.unit }}</p>
          </div>
        </div>
        <p class="box-none mt-3" v-else>{{ $t('backend.activate.not_activated') }}</p>
        <p class="box-none mt-3" v-if="system.user_plan.items.length == 0">尚無資料</p>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from "@/global/axios";
import { sendFailedSwal } from "@/global/swal";
import { systemRole } from "@/global/request";
export default {
  data() {
    return {
      id: this.$store.state.auth.user.id,
      systemRole: systemRole(),
      datas: [],
      userSystemState: [],
    };
  },
  computed: {
    filteredUserSystems() {
      return this.userSystemState.filter(system => this.systemRole[system.id]);
    },
  },
  mounted() {
    const vm = this;
    vm.fetchData();
  },
  methods: {
    fetchData: async function () {
      const vm = this;
      await api
        .get(`/api/getOneUserSubSystemState/${this.id}`)
        .then((res) => {
          vm.userSystemState = res.data.data;
        })
        .catch(sendFailedSwal);
    },
  },
};
</script>
