<script setup lang="ts">
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
// import { useQuasar } from "quasar";
// import { useRouter } from "vue-router";
// import http from "@/plugins/http";
// import config from "@/app.config";

import cardTop from "@/modules/09_coin/components/2_Manage/StatCard.vue";
import tab1 from "@/modules/09_coin/components/2_Manage/Tab1.vue";
import tab2 from "@/modules/09_coin/components/2_Manage/Tab2.vue";
import tab3 from "@/modules/09_coin/components/2_Manage/Tab3.vue";
import tab4 from "@/modules/09_coin/components/2_Manage/Tab4.vue";

const mixin = useCounterMixin();
const {} = mixin;

const round = ref<string>("รอบการเสนอพระราชทานเหรียญจักรพรรดิมาลาปี 2557");
const optionRound = [
  "รอบการเสนอพระราชทานเหรียญจักรพรรดิมาลาปี 2557",
  "รอบการเสนอพระราชทานเหรียญจักรพรรดิมาลาปี 2558",
  "รอบการเสนอพระราชทานเหรียญจักรพรรดิมาลาปี 2556",
];
const tab = ref<any>("haveInsignia");
const stat = ref<any>({
  total: 0,
  sendName: 0,
  nonSend: 0,
  personSend: 0,
  disclaim: 0,
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    รายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเหรียญจักรพรรดิมาลาของเขต
  </div>
  <q-card bordered class="row col-12 q-mt-sm">
    <div class="bg-grey-2 col-12 row items-center">
      <div class="q-pl-sm q-mr-md text-weight-bold text-grey">รอบ</div>

      <q-select borderless v-model="round" :options="optionRound" />
    </div>
    <div class="col-12 row bg-white">
      <div class="fit q-px-md q-py-sm">
        <div class="row col-12 q-col-gutter-md fit">
          <cardTop
            :amount="stat.total"
            label="หน่วยงานทั้งหมด"
            color="#016987"
          />
          <cardTop
            :amount="stat.sendName"
            label="หน่วยงานที่ส่งรายชื่อเเล้ว"
            color="#02A998"
          />
          <cardTop
            :amount="stat.nonSend"
            label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
            color="#2EA0FF"
          />
          <cardTop
            :amount="stat.personSend"
            label="จำนวนคนที่ยื่นขอ"
            color="#4154B3"
          />
        </div>
      </div>
    </div>
  </q-card>

  <q-card flat bordered class="col-12 q-mt-sm">
    <div class="row col-12">
      <q-tabs
        v-model="tab"
        dense
        class="text-grey"
        active-color="primary"
        active-class="bg-teal-1"
        indicator-color="primary"
        align="left"
      >
        <q-tab name="haveInsignia" label="ผู้ที่ได้รับพระราชทานเหรียญจักรพรรดิมาลา" />
        <q-tab name="personNotapply" label="คนที่ไม่ยื่นขอ" />
        <q-tab name="personRemoved" label="คนที่ถูกลบออก" />
        <q-tab name="nonInsignia" label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ" />
      </q-tabs>
    </div>
    <q-separator />
    <q-tab-panels v-model="tab" animated>
      <q-tab-panel name="haveInsignia">
        <tab1 />
      </q-tab-panel>
      <q-tab-panel name="personNotapply">
        <tab2 />
      </q-tab-panel>
      <q-tab-panel name="personRemoved">
        <tab3 />
      </q-tab-panel>
      <q-tab-panel name="nonInsignia">
        <tab4 />
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<style lang="scss" scope>
.filter-card {
  background-color: #f1f1f1b0;
}

.toggle-expired-account {
  font-size: 12px;
  font-weight: 400;
  font-size: 15px;
  line-height: 150%;
  color: #35373c;
}

.icon-color {
  color: #4154b3;
}

.custom-header-table {
  max-height: 64vh;

  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
    z-index: 1;
  }

  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>
