<script setup lang="ts">
import { ref } from "vue";
import Header from "@/components/DialogHeader.vue";

const modal = defineModel<boolean>("modal", { required: true });
const separator = ref<any>("cell");
/** ปิด Dialog */
function closeDialog() {
  modal.value = !modal.value;
}
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" full-width>
      <Header
        tittle="หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ"
        :close="closeDialog"
      />
      <q-separator />
      <q-card-section>
        <div class="q-pa-md">
          <q-markup-table
            :separator="separator"
            flat
            bordered
            class="custom-header-table"
          >
            <thead>
              <tr>
                <th class="text-center">หลักเกณฑ์ในการพิจารณาเลื่อนขั้นฯ</th>
                <th class="text-center">หนึ่งขั้น</th>
                <th class="text-center">ครึ่งขั้น</th>
                <th class="text-center">ไม่ได้รับการเลื่อนขั้น</th>
              </tr>
            </thead>
            <tbody>
              <!-- ข้อ1 -->
              <tr>
                <td class="text-left">1. ผลการประเมินผลการปฎิบัติราชการ</td>
                <td class="text-center">
                  ผลการประเมินผลในระดับดีเด่น<br />(90-100%)
                </td>
                <td class="text-center">
                  ผลการประเมินเป็นที่ยอมรับได้<br />(60-89%)
                </td>
                <td class="text-center">
                  ผลการประเมินต้องปรับปรุง<br />(ต่ำกว่า 60%)
                </td>
              </tr>

              <!-- ข้อ2 -->
              <tr>
                <td class="text-left">
                  2. ระยะเวลาการปฎิบัติราชการในรอบครึ่งปี
                </td>
                <td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
                <td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
                <td class="text-center">
                  น้อยกว่า 4 เดือน<br />(บรรจุใหม่ ลาศึกษา ฝึกอบรมดูงาน)
                </td>
              </tr>

              <!-- ข้อ3 -->
              <tr>
                <td class="text-left">3. การลงโทษทางวินัย</td>
                <td class="text-center">
                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
                </td>
                <td class="text-center">
                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
                </td>
                <td class="text-center">
                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
                </td>
              </tr>

              <!-- ข้อ4 -->
              <tr>
                <td class="text-left">4. พักราชการ</td>
                <td class="text-center">ไม่ถูกสั่งพักราชการ</td>
                <td class="text-center">
                  ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
                </td>
                <td class="text-center">
                  ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
                </td>
              </tr>

              <!-- ข้อ5 -->
              <tr>
                <td class="text-left">5. ขาดราชการ</td>
                <td class="text-center">ไม่ขาดราชการ</td>
                <td class="text-center">ไม่ขาดราชการ</td>
                <td class="text-center">ไม่ขาดราชการ</td>
              </tr>

              <!-- ข้อ6 -->
              <tr class="vertical-top">
                <td class="text-left">6. วันลา</td>
                <td class="text-left">
                  <p class="q-mb-none txt-under">
                    ไม่เกิน 5 ครั้ง 23 วัน<br />สายไม่เกิน 5 ครั้ง
                  </p>
                  <p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
                  <p class="text-bold q-mb-none">ยกเว้น</p>
                  <p class="q-mb-none">
                    - ลาอุปสมบท
                    <br />
                    - ลาคลอดบุตร (ไม่เกิน 90 วัน)
                    <br />
                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
                  </p>
                </td>
                <td class="text-left">
                  <p class="txt-under q-mb-none">
                    ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
                  </p>
                  <p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
                  <p class="text-bold q-mb-none">ยกเว้น</p>
                  <p class="q-mb-none">
                    - ลาอุปสมบท
                    <br />
                    - ลาคลอดบุตร (ไม่เกิน 90 วัน)
                    <br />
                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
                  </p>
                </td>
                <td class="text-left">
                  <p class="txt-under q-mb-none">
                    ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
                  </p>
                  <p>(นับเฉพาะการลาป่วยลากิจ)</p>
                  <br />
                  <br />
                  <p class="q-mb-none">
                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
                  </p>
                </td>
              </tr>
            </tbody>
          </q-markup-table>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scoped>
.txt-under {
  text-decoration: underline;
}

.q-table th {
  font-size: 14px !important;
}
</style>
