<script setup lang="ts">
import { reactive, ref } from "vue";
import { useQuasar } from "quasar";
import { defineAsyncComponent } from "@vue/runtime-core";
import { useRouter } from "vue-router";
const $q = useQuasar();
const router = useRouter();
const year = ref<string>("2566");
const round = ref<string>("1");
const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
  const sizeCard = (val: number) => {
  if (val === 5) {
    return "width:15%;";
  } 
};
const itemTop = reactive([
  {
    id: 1,
    num: 7,
    title: "จำนวนทั้งหมด",
    color: "#016987",
  },
  {
    id: 2,
    num: 1,
    title: "ยังไม่บรรจุ",
    color: "#02A998",
  },
  {
    id: 3,
    num: 5,
    title: "เตรียมบรรจุ",
    color: "#2EA0FF",
  },
  {
    id: 4,
    num: 1,
    title: "บรรจุเเล้ว",
    color: "#4154B3",
  },
  {
    id: 5,
    num: 0,
    title: "สละสิทธิ์",
    color: "#FF5C5F",
  },
]);
const AddTablePosition = defineAsyncComponent(
  () => import("@/modules/05_placement/components/pass/Table.vue")
);
</script>

<template>
  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
    <div class="toptitle">
      <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
      รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
    </div>
    <q-space />

    <div class="q-py-md row col-12">  
      <div class="col-12 row bg-white">
        <div class="fit q-pa-md">
          <div class="row col-12 q-col-gutter-md fit">
            <div class="" v-for="item in itemTop" :key="item.id" :style="$q.screen.lt.md ? '' : sizeCard(5)" :class="$q.screen.lt.sm ? 'col-4' : ''">
              <div class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-pa-sm">
                <div class="col-12 row items-center q-pa-sm">
                  <div class="col-12 text-h5 text-weight-bold" :style="{ color: item.color }">
                    {{ item.num }}
                  </div>
                  <div class="col-12 text-dark ellipsis">
                    {{ item.title }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
    <div>
      <AddTablePosition class="q-pa-none" />
    </div>
  </q-card>
</template>

<style lang="scss">
.cardNum {
  border-radius: 5px;
  /* border-left: 3px solid #016987 !important; */
  padding-left: 8px;
}
</style>
