<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();

/**
 * เข้าสู้หน้าของรายการ เเต่ละ ประเภท
 * @param type ประเภท
 * @param title ชื่อประเภท
 */
function nextPage(type: string, title: string) {
  router.push(`/discipline/report/${type}`);
}
</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
          clickable
          @click=" nextPage('1', 'รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี') "
          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( '2', 'รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน' ) "
          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( '3', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด' ) "
          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( '4', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด' ) "
          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( '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">
            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด
          </q-item-section>
        </q-item>

        <q-item
          clickable
          @click=" nextPage( '6', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด' ) "
          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( '7', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด' ) "
          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( '8', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง' ) "
          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>
