<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";

import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";

import type { CompetencySumary } from "@/modules/01_masterdata/interface/index/Main";

const $q = useQuasar();
const { messageError } = useCounterMixin();

const indicatorTotal = ref<CompetencySumary[]>([
  {
    value: "kpiPlan",
    label: "ตัวชี้วัดตามแผน",
    color: "edit",
  },
  {
    value: "kpiRole",
    label: "ตัวชี้วัดตามตำแหน่ง",
    color: "primary",
  },
  {
    value: "kpiSpecial",
    label: "ตัวชี้วัดงานอื่นๆ ที่ได้รับมอบหมาย",
    color: "blue",
  },
  {
    value: "total",
    label: "ทั้งหมด",
    color: "red",
  },
]);

function getTotal() {
  http
    .post(config.API.indicatorSummary)
    .then((res) => {
      const data = res.data.result;
      indicatorTotal.value = indicatorTotal.value.map((indicator) => {
        return {
          ...indicator,
          total: data[indicator.value],
        };
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {});
}
onMounted(() => {
  getTotal();
});
</script>
<template>
  <q-card bordered class="q-pa-xs bg-grey-1">
    <div class="row q-col-gutter-sm">
      <div
        v-for="i in indicatorTotal"
        class="col-12 col-sm-6 col-md-6 col-lg-3"
      >
        <div
          class="bg-white rounded-borders q-pa-sm"
          style="border: 1px solid #ededed"
        >
          <div class="row items-center no-wrap">
            {{ i.label }}
            <q-space />
            <q-badge :color="i.color" text-color="white" :label="i.total" />
          </div>
        </div>
      </div>
    </div>
  </q-card>
</template>
