<!-- page:main page ข้อมูลหลัก (tab ย่อยใน page จะอยู่ใน component) -->
<template>
  <div class="toptitle text-dark col-12 row items-center">
    จัดการข้อมูลหลัก
    <q-space />
    <q-btn
      @click="visible = !visible"
      dense
      round
      size="12px"
      :style="
        visible == false
          ? 'transform: rotate(90deg);transition-duration: 0.8s;'
          : 'transform: rotate(0);transition-duration: 0.8s;'
      "
      icon="mdi-pin"
      flat
      v-show="link !== 5"
    ></q-btn>
  </div>
  <div class="row col-12 q-col-gutter-sm">
    <q-slide-transition>
      <div
        :class="
          link !== 5
            ? 'row col-12'
            : 'col-xs-12 col-sm-12 col-md-4 col-lg-4 row'
        "
      >
        <q-card bordered class="col-12 row" v-show="visible">
          <div
            :class="
              link == 5
                ? 'row col-12'
                : 'col-xs-12 col-sm-12 col-md-4 col-lg-4 row'
            "
          >
            <div class="q-pa-md col-12">
              <div class="text-subtitle1 text-grey-9 items-center">
                <q-list
                  class="text-primary"
                  v-for="list in lists"
                  :key="list.name"
                >
                  <q-item
                    dense
                    clickable
                    v-ripple
                    :active="link === list.id"
                    @click="changeList(list.id)"
                    active-class="my-list-link text-blue-9 text-weight-medium"
                    class="my-list text-dark text-body2 row"
                  >
                    <div class="ellipsis">{{ list.name }}</div>
                    <q-space />
                    <q-badge
                      color="grey-4"
                      class="q-px-sm my-list-badge q-py-xs text-weight-medium"
                      :label="list.count"
                      rounded
                    />
                  </q-item>
                </q-list>
              </div>
              <q-separator size="2px" class="q-my-md" v-show="link === 5" />
              <div flat bordered class="q-pb-md col-12" v-if="link === 5">
                <div class="text-grey-9 items-center">
                  <div class="row no-wrap items-center">
                    <div class="text-dark text-weight-medium q-pb-sm q-px-xs">
                      สรุปวันหยุดในแต่ละเดือนประจำปี
                      <span class="text-weight-bold text-primary q-pl-sm">{{
                        yearSum + 543
                      }}</span>
                    </div>
                    <q-space />
                  </div>
                  <div class="col-12 row">
                    <div
                      class="col-xs-4 col-md-6 row q-pa-xs"
                      v-for="(list, index) in listsSumCalendar"
                      :key="index"
                    >
                      <q-card bordered class="col-12">
                        <div
                          class="col-12 text-subtitle2 row q-px-sm items-center q-px-sm"
                        >
                          <span
                            :class="
                              'text-weight-medium text-' + `${list.color}`
                            "
                            >{{ list.monthFull }}</span
                          >
                          <q-space />
                          <q-badge
                            color="white"
                            :class="
                              'text-weight-bold text-subtitle1 text-' +
                              `${list.color}`
                            "
                            :label="list.count"
                            rounded
                          />
                        </div>
                      </q-card>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="col-12 q-px-md"
            v-if="link !== 5"
            v-show="$q.screen.lt.md"
          >
            <q-separator size="2px" />
          </div>
          <div
            class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row"
            v-if="link !== 5"
          >
            <div class="q-py-md row col-12 no-wrap">
              <q-separator size="2px" vertical class="gt-sm" />
              <!-- การ์ดแสดงจำนวนข้อมูล -->
              <div v-if="link !== 5" class="col-12 row">
                <div class="text-dark text-weight-medium col-12 q-pl-md">
                  {{ tittleTextSum }}
                </div>
                <div class="fit q-pa-md">
                  <div class="row col-12 q-col-gutter-md fit">
                    <div
                      :class="$q.screen.lt.md ? 'col-4' : ''"
                      :style="$q.screen.lt.md ? '' : sizeCard(link)"
                      v-for="(num, index) in dataNum"
                      :key="index"
                    >
                      <q-card
                        bordered
                        flat
                        class="row fit cardNum items-center"
                      >
                        <div class="col-12 row items-center q-pa-sm">
                          <div
                            :class="
                              'col-12 text-h5 text-weight-bold text-' +
                              `${num.color}`
                            "
                          >
                            {{
                              num.count != null
                                ? num.count.toLocaleString("en-US")
                                : ""
                            }}
                          </div>
                          <div class="col-12 text-dark ellipsis">
                            {{ num.name }}
                          </div>
                        </div>
                      </q-card>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </q-card>
      </div>
    </q-slide-transition>
    <!-- ปฎิทิน -->
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row" v-if="link === 5">
      <q-card flat bordered class="col-12 q-pa-md fit">
        <calendarComponent
          v-model:dateYear="yearSum"
          :fetchDataSummaryCalendar="fetchDataSummaryCalendar"
        />
      </q-card>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" v-if="link !== 5">
      <!-- tab ย่อย table รายการ -->
      <q-card flat bordered>
        <div class="text-subtitle1 text-grey-9">
          <q-tabs
            dense
            v-model="currentTab"
            align="left"
            indicator-color="primary"
            active-color="primary bg-teal-1"
            inline-label
            class="text-body2 text-grey-7"
          >
            <q-tab
              v-for="tab in tabs"
              :key="tab.value"
              v-on:click="currentTab = tab.value"
              :label="tab.label"
              :name="tab.value"
              class="q-py-xs"
            />
          </q-tabs>
          <q-separator size="2px" />
          <!-- person -->
          <personProvince
            v-if="currentTab == 'person_province'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <personPrefix
            v-if="currentTab == 'person_prefix'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <personGender
            v-if="currentTab == 'person_gender'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <personRelationship
            v-if="currentTab == 'person_relationship'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <personBlood
            v-if="currentTab == 'person_blood'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <personReligion
            v-if="currentTab == 'person_religion'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <personEducation
            v-if="currentTab == 'person_education'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <!-- organization -->
          <organizationOrganization
            v-if="currentTab == 'organization_organization'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <organizationShortName
            v-if="currentTab == 'organization_shortName'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <organizationType
            v-if="currentTab == 'organization_type'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <organizationLevel
            v-if="currentTab == 'organization_level'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <organizationStatus
            v-if="currentTab == 'organization_status'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <organizationAgency
            v-if="currentTab == 'organization_agency'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <organizationGovernmentAgency
            v-if="currentTab == 'organization_governmentAgency'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <organizationTelExternal
            v-if="currentTab == 'organization_telExternal'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <organizationTelInternal
            v-if="currentTab == 'organization_telInternal'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <organizationFax
            v-if="currentTab == 'organization_fax'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <!-- position -->
          <positionPath
            v-if="currentTab == 'position_path'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <positionPathSide
            v-if="currentTab == 'position_pathSide'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <positionExecutive
            v-if="currentTab == 'position_executive'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <positionExecutiveSide
            v-if="currentTab == 'position_executiveSide'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <positionType
            v-if="currentTab == 'position_type'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <positionLine
            v-if="currentTab == 'position_line'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <positionLevel
            v-if="currentTab == 'position_level'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <positionStatus
            v-if="currentTab == 'position_status'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <!-- positionEmployee -->
          <positionEmployeePosition
            v-if="currentTab == 'positionEmployee_position'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <positionEmployeePositionSide
            v-if="currentTab == 'positionEmployee_positionSide'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <positionEmployeeGroup
            v-if="currentTab == 'positionEmployee_group'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <positionEmployeeLine
            v-if="currentTab == 'positionEmployee_line'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <positionEmployeeLevel
            v-if="currentTab == 'positionEmployee_level'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <positionEmployeeStatus
            v-if="currentTab == 'positionEmployee_status'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <!-- insignia -->
          <insigniaType
            v-if="currentTab == 'insignia_insigniaType'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
          <insigniaClass
            v-if="currentTab == 'insignia_insignia'"
            :fetchDataComponent="fetchDataSummarySubComponent"
          />
        </div>
      </q-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "@vue/runtime-core";
import { ref, watch } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
// tab ข้อมูลเกี่ยวกับบุคคล
import personPrefix from "@/modules/01_metadata/components/person/Prefix.vue";
import personGender from "@/modules/01_metadata/components/person/Gender.vue";
import personRelationship from "@/modules/01_metadata/components/person/Relationship.vue";
import personBlood from "@/modules/01_metadata/components/person/Blood.vue";
import personReligion from "@/modules/01_metadata/components/person/Religion.vue";
import personEducation from "@/modules/01_metadata/components/person/Education.vue";
import personProvince from "@/modules/01_metadata/components/person/Province.vue";

// tab ข้อมูลโครงสร้างหน่วยงาน
import organizationOrganization from "@/modules/01_metadata/components/organization/Organization.vue";
import organizationShortName from "@/modules/01_metadata/components/organization/ShortName.vue";
import organizationType from "@/modules/01_metadata/components/organization/Type.vue";
import organizationLevel from "@/modules/01_metadata/components/organization/Level.vue";
import organizationStatus from "@/modules/01_metadata/components/organization/Status.vue";
import organizationAgency from "@/modules/01_metadata/components/organization/Agency.vue";
import organizationGovernmentAgency from "@/modules/01_metadata/components/organization/GovernmentAgency.vue";
import organizationTelExternal from "@/modules/01_metadata/components/organization/TelExternal.vue";
import organizationTelInternal from "@/modules/01_metadata/components/organization/TelInternal.vue";
import organizationFax from "@/modules/01_metadata/components/organization/Fax.vue";

// tab ข้อมูลตำแหน่ง
import positionPath from "@/modules/01_metadata/components/position/Path.vue";
import positionPathSide from "@/modules/01_metadata/components/position/PathSide.vue";
import positionExecutive from "@/modules/01_metadata/components/position/Executive.vue";
import positionExecutiveSide from "@/modules/01_metadata/components/position/ExecutiveSide.vue";
import positionType from "@/modules/01_metadata/components/position/Type.vue";
import positionLine from "@/modules/01_metadata/components/position/Line.vue";
import positionLevel from "@/modules/01_metadata/components/position/Level.vue";
import positionStatus from "@/modules/01_metadata/components/position/Status.vue";

// tab ข้อมูลตำแหน่งของลูกจ้างกรุงเทพมหานคร
import positionEmployeePosition from "@/modules/01_metadata/components/positionEmployee/Position.vue";
import positionEmployeePositionSide from "@/modules/01_metadata/components/positionEmployee/PositionSide.vue";
import positionEmployeeGroup from "@/modules/01_metadata/components/positionEmployee/Group.vue";
import positionEmployeeLine from "@/modules/01_metadata/components/positionEmployee/Line.vue";
import positionEmployeeLevel from "@/modules/01_metadata/components/positionEmployee/Level.vue";
import positionEmployeeStatus from "@/modules/01_metadata/components/positionEmployee/Status.vue";

//tab ปฏิทินวันหยุด
import calendarComponent from "@/modules/01_metadata/views/MainCalendar.vue";

// tab ข้อมูลเครื่องราชฯ
import insigniaClass from "@/modules/01_metadata/components/insignia/Insignia.vue";
import insigniaType from "@/modules/01_metadata/components/insignia/InsigniaType.vue";
// import insigniaBadge from "@/modules/01_metadata/components/insignia/Badge.vue";

import { useCounterMixin } from "@/stores/mixin";
import { useManageDataStore } from "@/modules/01_metadata/store";
import { useDataStore } from "@/stores/data";

import type {
  DataSumCalendarObject,
  DataListsObject,
} from "@/modules/01_metadata/interface/request/Main";
import type { DataNumObject } from "@/modules/01_metadata/interface/request/Calendar";
import { useQuasar } from "quasar";

const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { genColor15, messageError } = mixin;
const store = useManageDataStore();
const dataStore = useDataStore();
const { loaderPage } = dataStore; //ขึ้นหน้า load ขณะเรียก api

const visible = ref(true); //เปิดปิด card สรุปข้อมูล
const link = ref<number>(store.manageData.link); //เลือก tab หลัก
const currentTab = ref<string>(""); //เลือก tab ย่อย
const dataNum = ref<DataNumObject[]>([]); //จำนวนสรุปจำนวนข้อมูลหลัก
const yearSum = ref<number>(new Date().getFullYear()); //ค่าปีในcalendar
const tittleTextSum = ref<string>(""); //ชื่อ main สรุปข้อมูลแต่ละ tab

const listsSumCalendar = ref<DataSumCalendarObject[]>([]);
const defaultListsSumCalendar = () => {
  listsSumCalendar.value = [
    { monthFull: "มกราคม", count: 0, id: 1, color: genColor15(1) },
    { monthFull: "กุมภาพันธ์", count: 0, id: 2, color: genColor15(2) },
    { monthFull: "มีนาคม", count: 0, id: 3, color: genColor15(3) },
    {
      monthFull: "เมษายน",
      count: 0,
      id: 4,
      color: genColor15(4),
    },
    { monthFull: "พฤษภาคม", count: 0, id: 5, color: genColor15(5) },
    {
      monthFull: "มิถุนายน",
      count: 0,
      id: 6,
      color: genColor15(6),
    },
    {
      monthFull: "กรกฎาคม",
      count: 0,
      id: 7,
      color: genColor15(7),
    },
    { monthFull: "สิงหาคม", count: 0, id: 8, color: genColor15(8) },
    { monthFull: "กันยายน", count: 0, id: 9, color: genColor15(9) },
    { monthFull: "ตุลาคม", count: 0, id: 10, color: genColor15(10) },
    {
      monthFull: "พฤศจิกายน",
      count: 0,
      id: 11,
      color: genColor15(11),
    },
    { monthFull: "ธันวาคม", count: 0, id: 12, color: genColor15(12) },
  ];
};
const lists = ref<DataListsObject[]>([
  { name: "ข้อมูลเกี่ยวกับบุคคล", count: 0, id: 1 },
  { name: "ข้อมูลโครงสร้างหน่วยงาน", count: 0, id: 2 },
  { name: "ข้อมูลตำแหน่งของข้าราชการ", count: 0, id: 3 },
  {
    name: "ข้อมูลตำแหน่งของลูกจ้าง",
    count: 0,
    id: 4,
  },
  { name: "ข้อมูลปฏิทินวันหยุด", count: 0, id: 5 },
  { name: "ข้อมูลเครื่องราชอิสริยาภรณ์", count: 0, id: 6 },
]);
const tabsPerson = [
  { label: "คำนำหน้า", value: "person_prefix" },
  { label: "กลุ่มเลือด", value: "person_blood" },
  { label: "เพศ", value: "person_gender" },
  { label: "ศาสนา", value: "person_religion" },
  { label: "สถานภาพ", value: "person_relationship" },
  { label: "ระดับการศึกษา", value: "person_education" },
  { label: "จังหวัด", value: "person_province" },
];
const tabsOrganization = [
  { label: "หน่วยงาน", value: "organization_organization" },
  { label: "ชื่อย่อหน่วยงาน", value: "organization_shortName" },
  { label: "ประเภท", value: "organization_type" },
  { label: "ระดับ", value: "organization_level" },
  { label: "สถานะ", value: "organization_status" },
  { label: "เบอร์ติดต่อภายใน", value: "organization_telInternal" },
  { label: "เบอร์ติดต่อภายนอก", value: "organization_telExternal" },
  { label: "เบอร์โทรสาร", value: "organization_fax" },
];
const tabsPosition = [
  { label: "ชื่อตำแหน่ง", value: "position_path" },
  { label: "ด้าน/สาขา", value: "position_pathSide" },
  { label: "ชื่อตำแหน่งทางการบริหาร", value: "position_executive" },
  { label: "ด้านทางการบริหาร", value: "position_executiveSide" },
  { label: "ตำแหน่งประเภท", value: "position_type" },
  { label: "สายงาน ", value: "position_line" },
  { label: "ระดับ", value: "position_level" },
  { label: "สถานะของตำแหน่ง", value: "position_status" },
];
const tabsPositionEmployee = [
  { label: "ชื่อตำแหน่ง", value: "positionEmployee_position" },
  { label: "ด้านของตำแหน่ง", value: "positionEmployee_positionSide" },
  { label: "กลุ่มงาน", value: "positionEmployee_group" },
  { label: "สายงาน", value: "positionEmployee_line" },
  { label: "ระดับชั้นงาน", value: "positionEmployee_level" },
  { label: "สถานะของตำแหน่ง", value: "positionEmployee_status" },
];
const tabsInsignia = [
  { label: "ลำดับชั้นเครื่องราชฯ", value: "insignia_insigniaType" },
  { label: "ชื่อเครื่องราชฯ", value: "insignia_insignia" },
];
const tabs = ref(tabsPerson);

/**
 * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
 */
onMounted(async () => {
  // api sum by main
  await fetchDataSummary();
  await changeList(link.value);
});

/**
 * ค่าถ้าถูกอัพเดทให้ refresh ค่าสรุปวันหยุดใหม่
 */
watch(yearSum, async (count, prevCount) => {
  await fetchDataSummaryCalendar();
});

watch(currentTab, async (count: string, prevCount: string) => {
  await store.changeManageCurrentTab(link.value, count);
});

watch(link, async (count, prevCount) => {
  await store.changeManageLink(count);
});

/**
 * กดเลือก tab จัดการข้อมูลหลักแต่ละ tab
 * @param val id menu จัดการข้อมูลหลัก
 */
const changeList = async (val: number) => {
  link.value = val;
  if (val == 1) {
    // สรุปจำนวนข้อมูลเกี่ยวกับบุคคล
    tabs.value = tabsPerson;
    currentTab.value =
      store.manageData.person.name === ""
        ? "person_prefix"
        : store.manageData.person.name;
    tittleTextSum.value = "สรุปจำนวนข้อมูลเกี่ยวกับบุคคล";
  }
  if (val == 2) {
    // สรุปจำนวนข้อมูลโครงสร้างหน่วยงาน
    tabs.value = tabsOrganization;
    currentTab.value =
      store.manageData.organization.name === ""
        ? "organization_organization"
        : store.manageData.organization.name;
    tittleTextSum.value = "สรุปจำนวนข้อมูลโครงสร้างหน่วยงาน";
  }
  if (val == 3) {
    // สรุปจำนวนข้อมูลตำแหน่งของข้าราชการกรุงเทพมหานคร
    tabs.value = tabsPosition;
    currentTab.value =
      store.manageData.position.name === ""
        ? "position_path"
        : store.manageData.position.name;
    tittleTextSum.value = "สรุปจำนวนข้อมูลตำแหน่งของข้าราชการกรุงเทพมหานคร";
  }
  if (val == 4) {
    // สรุปจำนวนข้อมูลตำแหน่งของลูกจ้างกรุงเทพมหานคร
    tabs.value = tabsPositionEmployee;
    currentTab.value =
      store.manageData.positionEmployee.name === ""
        ? "positionEmployee_position"
        : store.manageData.positionEmployee.name;
    tittleTextSum.value = "สรุปจำนวนข้อมูลตำแหน่งของลูกจ้างกรุงเทพมหานคร";
  }
  if (val == 5) {
    // สรุปจำนวนข้อมูลปฏิทินวันหยุด
    tabs.value = tabsPerson;
    await fetchDataSummaryCalendar();
  }
  if (val == 6) {
    // สรุปจำนวนข้อมูลเครื่องราชอิสริยาภรณ์
    tabs.value = tabsInsignia;
    currentTab.value =
      store.manageData.insignia.name === ""
        ? "insignia_insignia"
        : store.manageData.insignia.name;
    tittleTextSum.value = "สรุปจำนวนข้อมูลเครื่องราชอิสริยาภรณ์";
  }
};

/**
 * สรุปจำนวน จัดการข้อมูลหลัก
 */
const fetchDataSummary = async () => {
  lists.value = [];
  loaderPage(true);
  await http
    .get(config.API.countDashbordHistory)
    .then((res) => {
      let data = res.data.result;
      data.map((e: DataListsObject) => {
        lists.value.push({
          name: e.name,
          count: e.count,
          id: e.id,
        });
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      loaderPage(false);
    });
};

/**
 * ฟังก์ชันสำหรับ refresh สรุปจำนวนข้อมูลจัดการที่ component ให้อัพเดท
 */
const fetchDataSummarySubComponent = async () => {
  await fetchDataSummarySub(link.value);
};
/**
 * สรุปจำนวน จัดการข้อมูลหลักแต่ละระบบย่อย
 */
const fetchDataSummarySub = async (val: number) => {
  dataNum.value = [];
  //   loaderPage(true);
  await http
    .get(config.API.countDashbordSubHistory(val))
    .then((res) => {
      let data = res.data.result;
      data.map((e: DataNumObject) => {
        dataNum.value.push({
          id: e.id,
          count: e.count,
          name: e.name,
          color: genColor15(e.id),
        });
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      loaderPage(false);
    });
};

/**
 * สรุปวันหยุด
 */
const fetchDataSummaryCalendar = async () => {
  loaderPage(true);
  await http
    .get(config.API.summaryHolidayHistoryYear(yearSum.value))
    .then((res) => {
      let data = res.data.result;
      listsSumCalendar.value = [];
      data.map((e: DataSumCalendarObject) => {
        listsSumCalendar.value.push({
          id: e.id,
          monthFull: e.monthFull,
          count: e.count,
          color: genColor15(e.id),
        });
      });
    })
    .catch(async (e) => {
      await defaultListsSumCalendar;
      messageError($q, e);
    })
    .finally(() => {
      loaderPage(false);
    });
};

/**
 * ขนาดการ์ดสรุปข้อมูล active
 * @param val จำนวนของการ์ดสรุปข้อมูลหลักที่แสดง
 */
const sizeCard = (val: number) => {
  if (val === 3 || val === 2) {
    return "width: 25%;";
  } else if (val === 4) {
    return "width: 33.3%;";
  } else if (val === 6) {
    return "width: 33.3%;";
  } else {
    return "width:20%;";
  }
};
</script>

<style>
.my-menu-link {
  color: rgb(0, 0, 0);
  background: #bad5ec;
}

.my-list-link {
  color: rgb(118, 168, 222);
  border-radius: 5px;
  background: #a3d3fb48 !important;
  font-weight: 600;
  border: 1px solid rgba(175, 185, 196, 0.217);
  /*  box-shadow: 1px 1px 7px 1px rgba(41, 95, 255, 0.15) !important; */
}

.my-list-link .my-list-badge {
  color: rgb(5, 86, 173);
  background: #a3d3fb00 !important;
  font-weight: 800;
  /*  border: 1px solid rgba(62, 139, 222, 0.217); */
}

.my-list:hover {
  border-radius: 5px;
}

.my-list-badge {
  color: rgb(27, 27, 27);
  background: #8b8c8c23 !important;
}

.my-list {
  padding: 9px 9px;
}

.my-card {
  width: 100%;
  max-width: 160px;
}

.sub-card {
  height: 100%;
  max-height: 265px;
}

.cardNum {
  border-radius: 5px;
  /* border-left: 3px solid #016987 !important; */
  padding-left: 8px;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

function components(arg0: () => void) { throw new Error("Function not
implemented."); } function components(arg0: () => void) { throw new
Error("Function not implemented."); } function components(arg0: () => void) {
throw new Error("Function not implemented."); }
