<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-9">
      <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 style="font-weight: bold; font-size: 15px; color: #00aa86">
        3.5 จัดการบัญชี 2
        </div>


        <div class="col-12" style="margin-top: 20px; margin-left: 10px">
            - กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิองค์กร” ระบบแสดงหน้าจอดังรูป        
        </div>

        <div class="col-12">
          <q-img
          src="@/assets/manual/03_structure /6_account2/3-46.png"
            style="
              display: block;
              margin: 0 auto;
              border-radius: 20px;
              margin-top: 20px;
              border: 1px solid #97B2DE; ;

            "
          />
            <div class="text-center text-grey-6" style="margin-top: 20px">
                รูปภาพที่ 3 - 46 หน้าผังโครงสร้าง       
            </div>

            <div
            style="
                margin-top: 20px;
                padding: 10px;
                background-color: #f3f3f3;
                font-size: 14px;
                color: #000000;
                border-radius: 5px;
                "
                >

                หมายเลข 1 แถบเมนูหน่วยงานหรือสำนักงาน <br>
                หมายเลข 2 ไอคอนซ่อนแถบเมนูหน่วยงานหรือสำนักงาน <br>
                หมายเลข 3 การยืนยันออกคำสั่ง <br>
                หมายเลข 4 ประวัติบัญชีจัดข้าราชการกรุงเทพฯสามัญเข้าตำแหน่งประเภท สายงาน และระดับตำแหน่ง <br>
                หมายเลข 5 ข้อมูลรายละเอียดจัดการบัญชี2 กรณีไม่มี ชื่อ-นามสกุล คือ เลขที่ตำแหน่งนั้นยังไม่มีการถือครองหรือว่าง <br>
                หมายเลข 6 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br>
                หมายเลข 7 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน

            </div>
        </div>


        <div class="col-12">
            <div class="col-12">
                <p style="margin-top: 50px; margin-left: 10px">
                    - สามารถกดเลือกแถบเมนูหน่วยงานหรือสำนักงาน ระบบจะแสดงรายละเอียดเฉพาะที่เลือกดังรูปภาพ
                </p>
            </div>
        </div>

        <div class="col-12">
          <q-img
          src="@/assets/manual/03_structure /6_account2/3-47.png"
            style="
              display: block;
              margin: 0 auto;
              border-radius: 20px;
              margin-top: 20px;
              border: 1px solid #97B2DE; ;

            "
          />

            <div class="text-center text-grey-6" style="margin-top: 20px">
                รูปภาพที่ 3 - 47 รายละเอียดที่ได้ทำการเลือก
            </div>
        </div>



        <div class="col-12">
            <div class="col-12">
                <p style="margin-top: 50px; margin-left: 10px">
                    - สามารถกดเลือกไอคอน
                    <span class="circle-icon" style="margin-left: 10px">
                        <span 
                            style="font-weight: bold;
                                font-size: 10px;
                                display: inline-flex; /* เพื่อให้สามารถใช้ transform ได้ */
                                transform: rotate(180deg); /* หมุน 90 องศาทางขวา */
                            ">
                            >
                        </span>
                    </span>
                    แถบเมนูหน่วยงานหรือสำนักงานจะถูกซ่อน ดังรูปภาพ และเมื่อต้องการให้แสดงเหมือนเดิมให้กดไอคอน
                    <span class="circle-icon" style="margin-left: 10px">
                        <span 
                            style="font-weight: bold;
                                font-size: 10px;
                                display: inline-flex; /* เพื่อให้สามารถใช้ transform ได้ */
                                transform: rotate(0deg); /* หมุน 90 องศาทางขวา */
                            ">
                            >
                        </span>
                    </span>
                </p>
            </div>
        </div>

        <div class="col-12">
          <q-img
          src="@/assets/manual/03_structure /6_account2/3-48.png"
            style="
              display: block;
              margin: 0 auto;
              border-radius: 20px;
              margin-top: 20px;
              border: 1px solid #97B2DE; ;

            "
          />

            <div class="text-center text-grey-6" style="margin-top: 20px">
                รูปภาพที่ 3 - 48 ซ่อนแถบเมนูหน่วยงานหรือสำนักงาน
            </div>
        </div>



        <div class="col-12">
            <p style="margin-top: 50px; margin-left: 10px; display: flex;">
                - สามารถคลิกไอคอน 
                <span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
                    <i class="q-icon notranslate material-icons" aria-hidden="true" role="img">assignment_turned_in</i>
                </span>
                เพื่อเพิ่มข้อมูลหน่วยงานและตำแหน่ง ดังรูปภาพ            
            </p>


            <q-img class="col-12"
            src="@/assets/manual/03_structure /6_account2/3-49.png"
            style="
                max-width: 70%;
                display: block;
                margin: 0 auto;
                border-radius: 20px;
                margin-top: 20px;
                border: 1px solid #97B2DE; ;
            "
            />
            <div class="text-center text-grey-6" style="margin-top: 20px">
                รูปภาพที่ 3 - 49 ออกคำสั่ง        
            </div>
        </div>



        <div class="col-12">
            <div class="col-12">
                <p style="margin-top: 50px; margin-left: 10px">
                    - เมื่อกดปุ่ม “ยืนยัน” จะปรากฏป้ายเตือนบริเวณมุมขวาล่างดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการยืนยันเพื่อเอาไปออกคำสั่ง
                </p>
            </div>
        </div>

        <div class="col-12">
          <q-img
          src="@/assets/manual/03_structure /6_account2/3-50.png"
            style="
              display: block;
              margin: 0 auto;
              border-radius: 20px;
              margin-top: 20px;
              border: 1px solid #97B2DE; ;

            "
          />

            <div class="text-center text-grey-6" style="margin-top: 20px">
                รูปภาพที่ 3 - 50 ป้าย “ยืนยันเพื่อเอาไปออกคำสั่ง”
            </div>


            <div
            style="
                margin-top: 20px;
                padding: 10px;
                background-color: #f3f3f3;
                font-size: 14px;
                color: #000000;
                border-radius: 5px;
                "
                >

                หมายเลข 1 แถบเมนูหน่วยงานหรือสำนักงาน <br>
                หมายเลข 2 ไอคอนซ่อนแถบเมนูหน่วยงานหรือสำนักงาน <br>
                หมายเลข 3 การยืนยันออกคำสั่ง <br>
                หมายเลข 4 ประวัติบัญชีจัดข้าราชการกรุงเทพฯสามัญเข้าตำแหน่งประเภท สายงาน และระดับตำแหน่ง <br>
                หมายเลข 5 ข้อมูลรายละเอียดจัดการบัญชี2 กรณีไม่มี ชื่อ-นามสกุล คือ เลขที่ตำแหน่งนั้นยังไม่มีการถือครองหรือว่าง <br>
                หมายเลข 6 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br>
                หมายเลข 7 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
            </div>
        </div>



        <div class="col-12">
            <p
            style="margin-top: 50px;
            margin-left: 10px;display: flex;
            justify-content: flex-start;
            align-items: center;">
                 - สามารถคลิกไอคอน  
            <q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
            เพื่อดูประวัติบัญชีจัดการข้าราชการกรุงเทพฯ ดังรูปภาพ            
            </p>
            <q-img class="col-12"
            src="@/assets/manual/03_structure /6_account2/3-51.png"
            style="
                max-width: 100%;
                display: block;
                margin: 0 auto;
                border-radius: 20px;
                margin-top: 20px;
                border: 1px solid #97B2DE; ;
            "
            />
            <div class="text-center text-grey-6" style="margin-top: 20px">
                รูปภาพที่ 3 - 51 ซ่อนแถบเมนูหน่วยงานหรือสำนักงาน       
            </div>
        </div>



        <div class="col-12">
            <p
            style="margin-top: 50px;
            margin-left: 10px;display: flex;
            justify-content: flex-start;
            align-items: center;">
                 - สามารถสืบค้นข้อมูลที่ช่องค้นหา และทีช่องคอลัมน์สามารถเลือกรายการที่ต้องการซ่อนได้ดังรูปภาพ         
            </p>
            <q-img class="col-12"
            src="@/assets/manual/03_structure /6_account2/3-52.png"
            style="
                max-width: 100%;
                display: block;
                margin: 0 auto;
                border-radius: 20px;
                margin-top: 20px;
                border: 1px solid #97B2DE; ;
            "
            />
            <div class="text-center text-grey-6" style="margin-top: 20px">
                รูปภาพที่ 3 - 52 รายละเอียดที่ได้ทำการเลือก    
            </div>


            <div
            style="
                margin-top: 20px;
                padding: 10px;
                background-color: #f3f3f3;
                font-size: 14px;
                color: #000000;
                border-radius: 5px;
                "
                >

                หมายเลข 1 ช่องสำหรับกรอกเพื่อค้นหาข้อมูลจัดการบัญชีที่ต้องการรายละเอียดข้อมูล <br>
                หมายเลข 2 ช่องสำหรับคลิกเลือกหัวคอลัมแสดงตารางข้อมูลตามที่ได้ทำการคลิกเลือกคอมลัมน์แสดงข้อมูลไว้
            </div>
        </div>


        


      
 
      </q-card>
    </div>
  </div>
</template>

<style>
.circle-icon {
    width: 20px;
    height: 20px;
    background-color: hwb(0 100% 0%);
    border: 1px solid hwb(0 86% 14% / 0.611); ;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    vertical-align: middle;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
}

.col, .col-xs {
    flex: 0 0 5%;
    color: #00aa86;
    font-size: 20px;
}

</style>





