<script setup lang="ts">
import { ref } from "vue";
const rightDrawerOpen = ref(false);
const text = ref("");
</script>

<template>
  <div class="row col-12">
    <div class="col-12">
      <div class="toptitle text-dark col-12 row items-center">
        คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
      </div>

      <q-card
        flat
        bordered
        class="col-12 q-pa-md"
        style="
          background-color: #ecebeb;
          border-radius: 8px 8px 0px 0px;
          padding: 10px 16px 10px 16px;
        "
      >
        <div class="custom-topic text-dark">
          <div style="font-size: 16px; font-weight: 700">
            การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
          </div>
        </div>
      </q-card>

      <q-card
        flat
        bordered
        class="col-12 q-pa-md"
        style="border-radius: 0px 0px 8px 8px"
      >
        <div class="col-12 text16">
          เปิดโปรแกรม Google Chrome เวอร์ชั่น 20 ขึ้นไป หรือ Firefox เวอร์ชั่น
          14 ขึ้นไป กรอก
          <span class="text-green">URL: https://bma-ehr.frappet.com</span>
          ลงในช่อง Address จากนั้นกดแป้น Enter ที่คีย์บอร์ด 1 ครั้ง ดังรูป
        </div>
        <div class="col-12">
          <q-img
            src="@/assets/manual/01_login/1_main/1-1.png"
            style="
              max-width: 100%;
              display: block;
              margin: 0 auto;
              border-radius: 20px;
              margin-top: 20px;
            "
          />

          <div class="text-center text-grey-6" style="margin-top: 20px">
            รูปภาพที่ 1–1 แสดงการเข้าสู่เว็บไซต์
          </div>
        </div>
      </q-card>
    </div>

    <!-- <div class="col-3 row justify-center" style="position: relative">
      <q-list
        dense
        padding
        class="col-12"
        style="max-width: 328px; position: absolute; top: 50px"
      >
        <q-expansion-item label="การเข้าสู่ระบบ">
          <q-list dense>
            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7"
                >การเข้าสู่ระบบโดยใช้ User name และ Password</q-item-section
              >
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7"
                >การเปลี่ยนรหัสผ่านผู้ใช้งาน</q-item-section
              >
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7"
                >การลงทะเบียนผู้ใช้งานใหม่</q-item-section
              >
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7">การออกจากระบบ</q-item-section>
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7"
                >การแสดงแจ้งเตือน</q-item-section
              >
            </q-item>
          </q-list>
        </q-expansion-item>

        <q-expansion-item label="ระบบข้อมูลหลัก" class="text-grey-7">
          <q-list dense>
            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7"
                >การเข้าสู่ระบบโดยใช้ User name และ Password</q-item-section
              >
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7"
                >การเปลี่ยนรหัสผ่านผู้ใช้งาน</q-item-section
              >
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7"
                >การลงทะเบียนผู้ใช้งานใหม่</q-item-section
              >
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7">การออกจากระบบ</q-item-section>
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7"
                >การแสดงแจ้งเตือน</q-item-section
              >
            </q-item>
          </q-list>
        </q-expansion-item>

        <q-expansion-item label="ระบบโครงสร้างอัตรากำลัง" class="text-grey-7">
          <q-list dense>
            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7">จัดการตำแหน่ง</q-item-section>
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7"
                >แผนภูมิโครงสร้าง</q-item-section
              >
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7">แผนภูมิองค์กร</q-item-section>
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7">ผังโครงสร้าง</q-item-section>
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7">จัดการบัญชี 2</q-item-section>
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7">รายงานบัญชี</q-item-section>
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7">จัดการบัญชี 2</q-item-section>
            </q-item>
          </q-list>
        </q-expansion-item>

        <q-expansion-item
          label="หน้าจัดการระบบทะเบียนประวัติ"
          class="text-grey-7"
        >
          <q-list dense>
            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7"
                >การเข้าสู่หน้าระบบทะเบียนประวัติ</q-item-section
              >
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7"
                >การค้นหาข้อมูลทะเบียนประวัติ</q-item-section
              >
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7"
                >การดูรายละเอียดข้อมูลทะเบียนประวัติ</q-item-section
              >
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7"
                >การเพิ่ม แก้ไข
                ดูประวัติแก้ไขข้อมูลทะเบียนประวัติ</q-item-section
              >
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7"
                >การค้นหาข้อมูลส่วนตัว
                การเลือกคอลัมน์แสดงผลข้อมูล</q-item-section
              >
            </q-item>

            <q-item dense clickable v-ripple>
              <q-item-section
                avatar
                class="q-pa-none"
                style="min-width: 36px; margin-left: 30px"
              >
              </q-item-section>
              <q-item-section class="text-grey-7"
                >การปรับหน้าต่างแสดงผลหน้าข้อมูลส่วนตัว</q-item-section
              >
            </q-item>
          </q-list>
        </q-expansion-item>
      </q-list>
    </div> -->
  </div>
</template>

<style>
.q-item__section--side .q-icon {
  font-size: 20px;
}
</style>
