<template>
  <div class="col-12 text-dark">
    <div class="row col-12">
      <div class="row col-12 q-gutter-lg">
        <div class="col-12">
          <div class="row q-col-gutter-sm q-mb-sm">
            <div class="col-6">
              <q-skeleton type="QIput" height="40px" />
            </div>
            <div class="col-6">
              <q-skeleton type="QIput" height="40px" />
            </div>
          </div>

          <div class="col-12 text-top0 items-center">
            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
            ผู้ทดลองปฏิบัติหน้าที่ราชการ
          </div>
          <div class="col-12 row q-col-gutter-md">
            <div class="col-xs-12 col-sm-6">
              <q-skeleton type="QIput" height="40px" />
            </div>
            <div class="col-xs-12 col-sm-6">
              <q-skeleton type="QIput" height="40px" />
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top0 items-center">
                ระยะเวลาการทดลองปฏิบัติหน้าที่ราชการ
              </div>
              <div class="col-12 row q-col-gutter-md">
                <div class="col-xs-12 col-sm-4">
                  <q-skeleton type="QIput" height="40px" />
                </div>
                <div class="col-xs-12 col-sm-4">
                  <q-skeleton type="QIput" height="40px" />
                </div>
                <div class="col-xs-12 col-sm-4">
                  <q-skeleton type="QIput" height="40px" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <q-separator size="3px" color="grey-2" />
        </div>
        <div class="col-12 row">
          <div class="col-12 text-top0 items-center">
            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
            ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
          </div>
          <div class="col-12 row q-col-gutter-md">
            <div class="col-xs-12 col-sm-6">
              <q-skeleton type="QIput" height="40px" />
            </div>
            <div class="col-xs-12 col-sm-6">
              <q-skeleton type="QIput" height="40px" />
            </div>
          </div>
        </div>
        <div class="col-12">
          <q-separator size="3px" color="grey-2" />
        </div>
        <!-- 3.1 -->
        <div class="col-12 row">
          <div class="col-12 text-top0 items-center">
            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
            ผลการปฏิบัติงาน
          </div>
          <div class="col-12 text-top2 row items-center">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            3.1 ชื่องาน/ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
          </div>
          <div class="col-12 row q-gutter-sm">
            <q-card flat bordered class="col-12 q-pa-sm bg-grey-1">
              <div class="col-12 row q-col-gutter-sm">
                <div class="col-xs-12 col-sm-6">
                  <q-skeleton type="QIput" height="90px" />
                </div>
                <div class="col-xs-12 col-sm-5">
                  <q-skeleton type="QIput" height="90px" />
                </div>
              </div>
            </q-card>
            <q-card flat bordered class="col-12 q-pa-sm bg-grey-1">
              <div class="col-12 row q-col-gutter-sm">
                <div class="col-xs-12 col-sm-6">
                  <q-skeleton type="QIput" height="90px" />
                </div>
                <div class="col-xs-12 col-sm-5">
                  <q-skeleton type="QIput" height="90px" />
                </div>
              </div>
            </q-card>
          </div>
        </div>
        <!-- 3.2 -->
        <div class="col-12 row">
          <div class="col-12 text-top2">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            3.2 ความรู้ความสามารถและทักษะ (ตามที่ก.ก.กําหนด)
          </div>
          <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
            <div class="row col-12 q-gutter-lg">
              <div class="col-12 row">
                <div class="col-12 text-top2 row items-center">
                  ความรู้ความสามารถในการปฏิบัติงาน
                </div>
                <div class="col-12 row q-col-gutter-sm">
                  <div class="col-11 q-my-xs">
                    <q-skeleton type="QIput" height="40px" />
                  </div>
                </div>
                <div class="col-12 row q-col-gutter-sm">
                  <div class="col-11 q-my-xs">
                    <q-skeleton type="QIput" height="40px" />
                  </div>
                </div>
                <div class="col-12 row q-col-gutter-sm">
                  <div class="col-11 q-my-xs">
                    <q-skeleton type="QIput" height="40px" />
                  </div>
                </div>
              </div>
              <div class="col-12 row">
                <div class="col-12 text-top2 row items-center">
                  ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
                </div>
                <q-card
                  flat
                  bordered
                  class="col-12 q-pa-md q-mt-sm"
                  style="max-height: 500px; overflow-y: scroll"
                >
                  <q-skeleton height="400px" />
                </q-card>
              </div>

              <div class="col-12 row">
                <div class="col-12 text-top2">
                  กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
                </div>
                <div class="col-12 row q-col-gutter-md">
                  <div class="col-12">
                    <q-skeleton type="QIput" height="40px" />
                  </div>
                </div>
              </div>

              <div class="col-12 row">
                <div class="col-12 text-top2">ทักษะ</div>
                <div class="col-12 row q-col-gutter-sm">
                  <div class="col-xs-12 col-sm-6">
                    <q-skeleton type="QIput" height="40px" />
                  </div>

                  <div class="col-xs-12 col-sm-6">
                    <q-skeleton type="QIput" height="40px" />
                  </div>

                  <div class="col-xs-12 col-sm-6">
                    <q-skeleton type="QIput" height="40px" />
                  </div>

                  <div class="col-xs-12 col-sm-6">
                    <q-skeleton type="QIput" height="40px" />
                  </div>
                </div>
              </div>
            </div>
          </q-card>
        </div>

        <div class="col-12 row">
          <div class="col-12 text-top2">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
          </div>
          <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
            <div class="row col-12 q-gutter-lg">
              <div class="col-12 row">
                <div class="col-12 text-top2">สมรรถนะหลัก</div>
                <div class="col-12 row q-col-gutter-sm">
                  <div class="col-xs-12 col-sm-6">
                    <q-skeleton type="QIput" height="40px" />
                  </div>

                  <div class="col-xs-12 col-sm-6">
                    <q-skeleton type="QIput" height="40px" />
                  </div>

                  <div class="col-xs-12 col-sm-6">
                    <q-skeleton type="QIput" height="40px" />
                  </div>

                  <div class="col-xs-12 col-sm-6">
                    <q-skeleton type="QIput" height="40px" />
                  </div>

                  <div class="col-xs-12 col-sm-6">
                    <q-skeleton type="QIput" height="40px" />
                  </div>
                </div>
              </div>

              <div class="col-12 row">
                <div class="col-12 text-top2">สมรรถนะประจํากลุ่มงาน</div>
                <div class="col-12 row q-col-gutter-sm">
                  <div class="col-xs-12 col-sm-6">
                    <q-skeleton type="QIput" height="40px" />
                  </div>

                  <div class="col-xs-12 col-sm-6">
                    <q-skeleton type="QIput" height="40px" />
                  </div>

                  <div class="col-xs-12 col-sm-6">
                    <q-skeleton type="QIput" height="40px" />
                  </div>
                </div>
              </div>
            </div>
          </q-card>
        </div>

        <div class="col-12 row">
          <div class="col-12 text-top2 row items-center">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span
              class="text-weight-regular q-pl-sm"
            >
              ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )</span
            >
          </div>
          <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
            <div class="row col-12 q-gutter-lg">
              <div class="col-12 row">
                <div class="col-12 text-top2">ความประพฤติ ได้แก่</div>
                <div class="col-12 row q-col-gutter-md">
                  <div class="col-12 column q-ml-md">
                    <li>ให้บริการประชาชน หรือผู้รับบริการด้วยอธัยาศัยดี</li>
                    <li>มีความรับผิดชอบในการปฏิบัติงาน</li>
                    <li>
                      ให้บริการประชาชน หรือผู้รับบริการด้วยความรวดเร็ว
                      เอาใจใส่เป็นมาตรฐานเดียวกัน
                    </li>
                    <li>
                      ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร
                    </li>
                  </div>
                </div>
              </div>
              <div class="col-12 row">
                <div class="col-12 text-top2">ความมีคุณธรรมจริยธรรม ได้แก่</div>
                <div class="col-12 row q-col-gutter-md">
                  <div class="col-12 column q-ml-md">
                    <li>
                      อุทิศตน
                      และเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ
                    </li>
                    <li>มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต</li>
                    <li>
                      ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใดๆ
                      อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา
                      และพระมหากษัตริย์
                    </li>
                  </div>
                </div>
              </div>
              <div class="col-12 row">
                <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
                <div class="col-12 row q-col-gutter-md">
                  <div class="col-12 column q-ml-md">
                    <li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
                    <li>
                      แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ
                    </li>
                    <li>
                      ไม่กระทำการใดๆ อันเป็นการเสื่อมเกียรติ
                      และศักดิ์ศรีของความเป็นข้าราชการ
                    </li>
                    <li>
                      ไม่กระทำการใดๆ
                      อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน
                    </li>
                    <li>
                      ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ
                    </li>
                  </div>
                </div>
              </div>
            </div>
          </q-card>
        </div>

        <div class="col-12 row">
          <div class="col-12 text-top2">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            3.5 อื่น ๆ (ถ้ามี)
          </div>
          <div class="col-12 row q-col-gutter-md">
            <div class="col-12">
              <q-skeleton type="QIput" height="40px" />
            </div>
          </div>
        </div>
        <div class="col-12 row">
          <div class="col-12 text-top2 row items-center">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
          </div>
          <div class="col-12 row q-gutter-md">
            <q-card flat bordered class="col-12 q-pa-sm bg-grey-1">
              <div class="col-12 row q-col-gutter-sm">
                <div class="col-xs-12 col-sm-6">
                  <q-skeleton type="QIput" height="90px" />
                </div>

                <div class="col-xs-12 col-sm-5">
                  <q-skeleton type="QIput" height="90px" />
                </div>
              </div>
            </q-card>
          </div>
        </div>

        <div class="col-12">
          <q-separator size="3px" color="grey-2" />
        </div>
        <div class="col-12 row">
          <div class="col-12 text-top0 items-center">
            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
            การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
          </div>
          <div class="col-12 row">
            <div class="col-12 text-top2">
              ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศ
              และอบรมหลักสูตรต่าง ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ
              ดังนี้
            </div>
            <div class="col-12 text-top2 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              4.1 การปฐมนิเทศเพื่อให้มีความรู้เกี่ยวกับหน่วยงาน/ส่วนราชการ
            </div>
            <div class="col-12 text-top2 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              4.2
              การเรียนรู้ด้วยตนเองเพื่อให้มีความรู้เกี่ยวกับกฎหมายกฎระเบียบแบบแผนของทางราชการ
            </div>
            <div class="col-12 text-top2 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              4.3
              การอบรมสัมมนาร่วมกันเพื่อปลูกฝังการประพฤติปฏิบัติตนเป็นข้าราชการที่ดี
            </div>
            <div class="col-12 text-top2 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
            </div>
          </div>
        </div>
        <div class="col-12">
          <q-separator size="3px" color="grey-2" />
        </div>
        <div class="col-12 row">
          <div class="col-12 text-top0 items-center">
            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar>
            การประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
          </div>
          <div class="col-12 text-top2 row items-center">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            5.1
            ประเมินผลการทดลองปฏิบัติหน้าที่ราชการโดยคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
          </div>
          <div class="col-12 text-top2 row items-center">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            5.2 รายละเอียดการประเมินประกอบด้วย 2 ส่วนคือ
          </div>
          <div class="col-12 row q-gutter-md">
            <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
              <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
              <div class="col-12 row q-col-gutter-md">
                <div class="col-12 column q-ml-md">
                  <li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
                  <li>ทักษะที่ ก.ก. กำหนด</li>
                  <li>สมรรถนะตามที่ ก.ก. กำหนด</li>
                  <li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
                  <li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
                  <li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
                  <li>
                    อื่น ๆ (ถ้ามี)
                    <q-skeleton type="QIput" height="40px" />
                  </li>
                </div>
              </div>
            </q-card>
          </div>
        </div>
        <div class="col-12 row">
          <div class="col-12 text-top2 row items-center">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            5.3
            ข้อมูลที่ใช้ประกอบการประเมินผลการทดลองปฏิบัติหน้าที่ราชการประกอบด้วย
          </div>
          <div class="col-12 row q-gutter-md">
            <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
              <div class="col-12 row q-col-gutter-md">
                <div class="col-12 column q-ml-md">
                  <li>
                    บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
                    และผู้บังคับบัญา
                  </li>
                  <li>
                    แบบประเมินผลการทดลองปฏิบัติหน้าที่ราชการของผู้บังคับบัญชา
                  </li>
                  <li>รายงานผลการพัฒนาตามที่สำนักงาน ก.ก. กำหนด</li>
                </div>
              </div>
            </q-card>
          </div>
        </div>
        <div class="col-12 row">
          <div class="col-12 text-top2 row items-center">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            5.3 สัดส่วนของคะแนน และมาตรฐานการประเมิน
          </div>
          <div class="col-12 row q-gutter-md">
            <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
              <div class="col-12 row q-col-gutter-md">
                <div class="col-12 column q-ml-md">
                  <li>สัดส่วนของคะแนนการทดลองปฏิบัติหน้าที่ราชการ</li>
                  <div class="q-pl-lg">
                    ส่วนที่ 1
                    คะแนนผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการร้อยละ 50
                  </div>
                  <div class="q-pl-lg">
                    ส่วนที่ 2 คะแนนพฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการร้อยละ
                    50
                  </div>
                  <div class="q-pl-lg">
                    มาตรฐานการประเมินแต่ละส่วนต้องได้คะแนนไม่ต่ำกว่าร้อยละ 60
                  </div>
                  <li>
                    สัดส่วนคะแนนการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
                  </li>
                  <div class="q-pl-lg">
                    คะแนนรวมของการพัฒนาจะต้องไม่น้อยกว่าร้อยละ 60
                  </div>
                  <div>
                    <span style="text-decoration: underline">หมายเหตุ</span>
                    ให้นำคะแนนรวมทั้ง 2
                    ส่วนมารวมกันแล้วต้องได้คะแนนไม่น้อยกว่าร้อยละ 60
                    จึงถือว่าผ่านการประเมินการทดลองปฏิบัติหน้าที่ราชการ
                  </div>
                </div>
              </div>
            </q-card>
          </div>
        </div>
        <div class="col-12">
          <q-separator size="3px" color="grey-2" />
        </div>
        <div class="col-12 row">
          <div class="col-12 text-top0 items-center">
            การลงชื่อเพื่อมอบหมายงานและรับมอบหมายงานในการทดลองปฏิบัติหน้าที่ราชการ
          </div>
          <div class="col-12 row">
            <div class="col-12 text-top2 row items-center">
              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
              ผู้ทดลองปฏิบัติหน้าที่ราชการ
            </div>
          </div>
          <div class="col-12 row q-col-gutter-md">
            <div class="col-xs-12 col-sm-4">
              <q-skeleton type="QIput" height="40px" />
            </div>

            <div class="col-xs-12 col-sm-4">
              <q-skeleton type="QIput" height="40px" />
            </div>

            <div class="col-xs-12 col-sm-4">
              <q-skeleton type="QIput" height="40px" />
            </div>
          </div>
        </div>

        <div class="col-12 row">
          <div class="col-12 text-top2 row items-center">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
          </div>

          <div class="col-12 row q-col-gutter-md">
            <div class="col-xs-12 col-sm-8">
              <q-skeleton type="QIput" height="40px" />
            </div>

            <div class="col-xs-12 col-sm-4">
              <q-skeleton type="QIput" height="40px" />
            </div>
            <div class="col-xs-12 col-sm-8">
              <q-skeleton type="QIput" height="40px" />
            </div>

            <div class="col-xs-12 col-sm-4">
              <q-skeleton type="QIput" height="40px" />
            </div>
          </div>
        </div>
        <div class="col-12 row">
          <div class="col-12 text-top2 row items-center">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            ผู้บังคับบัญชาผู้มอบหมายงาน
          </div>

          <div class="col-12 row q-col-gutter-md">
            <div class="col-xs-12 col-sm-8">
              <q-skeleton type="QIput" height="40px" />
            </div>

            <div class="col-xs-12 col-sm-4">
              <q-skeleton type="QIput" height="40px" />
            </div>
          </div>
        </div>

        <div class="col-12 row" style="display: none">
          <div class="col-12 text-top2 row items-center">
            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
            ประธานกรรมการ
          </div>
          <div class="col-12 row q-col-gutter-md">
            <div class="col-xs-12 col-sm-8">
              <q-skeleton type="QIput" height="40px" />
            </div>
            <div class="col-xs-12 col-sm-4">
              <q-skeleton type="QIput" height="40px" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
