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

import http from "@/plugins/http";
import config from "@/app.config";

import type { CompetencySumary } from "@/modules/01_masterdata/interface/index/Main";
const $q = useQuasar();
const { messageError } = useCounterMixin();

const competencyTotal = ref<CompetencySumary[]>([
  {
    value: "HEAD",
    label: "สมรรถนะหลัก",
    color: "edit",
  },
  {
    value: "GROUP",
    label: "สมรรถนะประจำกลุ่มงาน",
    color: "primary",
  },
  {
    value: "EXECUTIVE",
    label: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
    color: "blue",
  },
  {
    value: "total",
    label: "ทั้งหมด",
    color: "red",
  },
  {
    value: "DIRECTOR",
    label:
      "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
    color: "deep-purple",
  },
  {
    value: "INSPECTOR",
    label: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
    color: "orange",
  },
]);

function getTotal() {
  http
    .get(config.API.capacitySummary)
    .then((res) => {
      const data = res.data.result;
      competencyTotal.value.forEach((i: CompetencySumary) => {
        const map = data.find((item: any) => item.type === i.value);
        if (map) i.total = map.total;
      });
      const totalSum = data.reduce((i: any, j: any) => i + +j.total, 0);
      const totalItem = competencyTotal.value.find(
        (i: CompetencySumary) => i.value === "total"
      );
      if (totalItem) {
        totalItem.total = totalSum.toString();
      }
    })
    .catch((e) => {
      messageError($q, e);
    });
}

onMounted(() => {
  getTotal();
});
</script>
<template>
  <q-card class="bg-grey-1">
    <div class="row q-col-gutter-xs">
      <div
        v-for="(i, index) in competencyTotal"
        :class="
          index > 3
            ? 'col-12 col-sm-12 col-md-6 col-lg-6'
            : 'col-12 col-sm-12 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 text-size">
            {{ i.label }}
            <q-space />
            <q-badge :color="i.color" text-color="white" :label="i.total" />
          </div>
        </div>
      </div>
    </div>
  </q-card>
</template>
<style scoped>
.text-size {
  font-size: 14px;
}
@media (min-width: 1400px) {
  .text-size {
    font-size: 14px;
  }
}

@media (min-width: 1350px) and (max-width: 1399px) {
  .text-size {
    font-size: 13px;
  }
}

@media (min-width: 1050px) and (max-width: 1349px) {
  .text-size {
    font-size: 12px;
  }
}
@media (min-width: 1024px) and (max-width: 1049px) {
  .text-size {
    font-size: 12px;
  }
}
</style>
