<script setup lang="ts">
import { useRouter } from "vue-router";
import { useInsigniaDataStore } from "@/modules/07_insignia/store";
const router = useRouter();
const store = useInsigniaDataStore();
const { setTypeandTitle } = store;

const nextPage = (type: string, title: string) => {
  setTypeandTitle(type, title);
  router.push("/insignia/report/report-02");
};
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    รายงานเครื่องราชอิสริยาภรณ์
  </div>
  <div>
    <q-card flat bordered class="col-12 q-mt-sm">
      <div class="q-pa-md">
        <q-item to="/insignia/report/report-01" dense class="hover-green">
          <q-item-section avatar>
            <q-icon color="primary" name="mdi-file" size="xs" />
          </q-item-section>
          <q-item-section class="text-dark">
            รายงาน ขร.1 - ขร.4
          </q-item-section>
        </q-item>

        <q-item
          clickable
          @click="
            nextPage(
              '45',
              'บัญชีรายชื่อข้าราชการผู้ขอพระราชทานเครื่องราชอิสริยาภรณ์'
            )
          "
          dense
          class="hover-green"
        >
          <q-item-section avatar>
            <q-icon color="primary" name="mdi-file" size="xs" />
          </q-item-section>
          <q-item-section class="text-dark">
            บัญชีรายชื่อข้าราชการผู้ขอพระราชทานเครื่องราชอิสริยาภรณ์
          </q-item-section>
        </q-item>

        <!-- <q-item to="/insignia/report/report-01" dense class="hover-green">
          <q-item-section avatar>
            <q-icon color="primary" name="mdi-file" size="xs" />
          </q-item-section>
          <q-item-section class="text-dark"
            >รายชื่อข้าราชการสามัญฯ ที่ได้รับ/ไม่ได้รับใบกำกับ
          </q-item-section>
        </q-item> -->

        <q-item
          clickable
          @click="
            nextPage('43', 'บัญชีระดับผลการประเมินผลการปฏิบัติราชการในรอบ 5 ปี')
          "
          dense
          class="hover-green"
        >
          <q-item-section avatar>
            <q-icon color="primary" name="mdi-file" size="xs" />
          </q-item-section>
          <q-item-section class="text-dark">
            บัญชีระดับผลการประเมินผลการปฏิบัติราชการในรอบ 5 ปี
          </q-item-section>
        </q-item>

        <q-item
          clickable
          @click="nextPage('44', 'บัญชีแสดงจำนวนชั้นตราเครื่องราชฯ')"
          dense
          class="hover-green"
        >
          <q-item-section avatar>
            <q-icon color="primary" name="mdi-file" size="xs" />
          </q-item-section>
          <q-item-section class="text-dark">
            บัญชีแสดงจำนวนชั้นตราเครื่องราชฯ
          </q-item-section>
        </q-item>

        <q-item
          clickable
          @click="
            nextPage('46', 'ประวัติสำหรับการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา')
          "
          dense
          class="hover-green"
        >
          <q-item-section avatar>
            <q-icon color="primary" name="mdi-file" size="xs" />
          </q-item-section>
          <q-item-section class="text-dark">
            ประวัติสำหรับการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา
          </q-item-section>
        </q-item>
      </div>
    </q-card>
  </div>
</template>

<style lang="scss" scope>
.q-item.hover-green:hover {
  background-color: #d5f1ee57;
  border-radius: 2px;
}
.q-item.hover-green {
  padding: 10px;
}
</style>
