<script setup lang="ts"></script>

<template>
  <div class="display-table">
    <q-card flat bordered class="q-mb-lg">
      <q-card-section>
        <div class="text-h6 text-bold">ประเภทสมรรถนะ</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        ให้ประเมินจากสมรรถนะที่เกี่ยวข้องกับการปฏิบัติราชการตามที่ ก.ก. กำหนด
        มีรายละเอียดดังนี้
      </q-card-section>

      <q-separator inset />
      <div style="border: 1px solid black">
        <div class="row text-center" style="background-color: #e0e4f4">
          <div class="col-3 text-bold flex justify-center items-center">
            ประเภทสมรรถนะ
          </div>
          <div class="col-6">
            <div class="row text-bold flex justify-center">
              ประเภทและระดับตำแหน่ง
            </div>
            <div class="row">
              <div class="col-4 column">
                <div class="row text-bold flex justify-center">ทั่วไป</div>
                <div class="row" style="flex-grow: 1">
                  <div class="col-6">
                    <div>ปฏิบัติงาน</div>
                    <div>ชำนาญงาน</div>
                    <div>อาวุโส</div>
                  </div>
                  <div class="col-6">
                    <div>อาวุโส</div>
                    <div>(ที่ดำรงตำแหน่งทางการบริหาร)</div>
                  </div>
                </div>
              </div>

              <div class="col-4 column">
                <div class="row text-bold flex justify-center">วิชาการ</div>
                <div class="row" style="flex-grow: 1">
                  <div class="col-6">
                    <div>ปฏิบัติงาน</div>
                    <div>ชำนาญงาน</div>
                    <div>ชำนาญการพิเศษ</div>
                    <div>เชี่ยวชาญ</div>
                    <div>ทรงคุณวุฒิ</div>
                  </div>
                  <div class="col-6">
                    <div>ปฏิบัติการ -<br />ทรงคุณวุฒิ</div>
                    <div>(ที่ดำรงตำแหน่งทางการบริหาร)</div>
                  </div>
                </div>
              </div>

              <div class="col-2">
                <div class="text-bold">อำนวยการ</div>
                <div>ต้น สูง</div>
              </div>
              <div class="col-2">
                <div class="text-bold">บริหาร</div>
                <div>ต้น สูง</div>
              </div>
            </div>
          </div>

          <div class="col-3 column">
            <div class="row text-bold flex justify-center">ผู้ดำรงตำแหน่ง</div>
            <div class="row" style="flex-grow: 1">
              <div class="col-6">
                ผู้ตรวจราชการกรุงเทพมหานครและผู้ตรวจราชการ
              </div>
              <div class="col-6 flex justify-center">ผู้อำนวยการเขต</div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-3 q-pa-sm">
            <div class="text-bold">สมรรถนะหลัก</div>
            <div>(5 สมรรถนะ)</div>
          </div>
          <div class="col-6 column">
            <div class="row col-grow">
              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
            </div>
          </div>
          <div class="col-3 column">
            <div class="row col-grow">
              <div class="col-6 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-6 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-3 q-pa-sm">
            <div class="text-bold">สมรรถนะประจำกลุ่มงาน</div>
            <div>(3 สมรรถนะ ตามกลุ่มงาน)</div>
          </div>
          <div class="col-6 column">
            <div class="row col-grow">
              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-2"></div>
              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-2"></div>
              <div class="col-2"></div>

              <div class="col-2"></div>
            </div>
          </div>
          <div class="col-3 column">
            <div class="row col-grow">
              <div class="col-6"></div>
              <div class="col-6"></div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-3 q-pa-sm">
            <div class="text-bold">สมรรถนะประจำผู้บริหารกรุงเทพมหานคร</div>
            <div>(7 สมรรถนะ)</div>
          </div>
          <div class="col-6 column">
            <div class="row col-grow">
              <div class="col-2"></div>
              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-2"></div>
              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
            </div>
          </div>
          <div class="col-3 column">
            <div class="row col-grow">
              <div class="col-6"></div>
              <div class="col-6"></div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-3 q-pa-sm">
            <div class="text-bold">สมรรถนะเฉพาะสำหรับตำแหน่งผู้อำนวยการเขต</div>
            <div>(4 สมรรถนะ)</div>
          </div>
          <div class="col-6 column">
            <div class="row col-grow">
              <div class="col-2"></div>
              <div class="col-2"></div>
              <div class="col-2"></div>
              <div class="col-2"></div>
              <div class="col-2"></div>
              <div class="col-2"></div>
            </div>
          </div>
          <div class="col-3 column">
            <div class="row col-grow">
              <div class="col-6"></div>
              <div class="col-6 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-3 q-pa-sm">
            <div class="text-bold">
              สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการกรุงเทพมหานครและผู้ตรวจราชการ
            </div>
            <div>(2 สมรรถนะ)</div>
          </div>
          <div class="col-6 column">
            <div class="row col-grow">
              <div class="col-2"></div>
              <div class="col-2"></div>
              <div class="col-2"></div>
              <div class="col-2"></div>
              <div class="col-2"></div>
              <div class="col-2"></div>
            </div>
          </div>
          <div class="col-3 column">
            <div class="row col-grow">
              <div class="col-6 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
              <div class="col-6"></div>
            </div>
          </div>
        </div>
        <div class="row text-bold">
          <div class="col-3 q-pa-sm">
            <div class="text-bold flex justify-end">รวมสมรรถนะ</div>
          </div>
          <div class="col-6 column">
            <div class="row col-grow">
              <div class="col-2 flex justify-center items-center">8</div>
              <div class="col-2 flex justify-center items-center">12</div>
              <div class="col-2 flex justify-center items-center">8</div>
              <div class="col-2 flex justify-center items-center">12</div>
              <div class="col-2 flex justify-center items-center">12</div>
              <div class="col-2 flex justify-center items-center">12</div>
            </div>
          </div>
          <div class="col-3 column">
            <div class="row col-grow">
              <div class="col-6 flex justify-center items-center">7</div>
              <div class="col-6 flex justify-center items-center">9</div>
            </div>
          </div>
        </div>
      </div>
    </q-card>

    <q-card flat bordered class="q-mb-lg">
      <q-card-section>
        <div class="text-h6 text-bold">ระดับสมรรถนะ</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        สมรรถนะหลักและสมรรถนะประจำกลุ่มงาน
        กำหนดระดับสมรรถนะที่คาดหวังจำแนกตามประเภทและระดับตำแหน่งของข้าราชการกรุงเทพมหานครสามัญ
        มีรายละเอียดดังนี้
      </q-card-section>

      <q-separator inset />
      <div style="border: 1px solid black">
        <div
          class="row text-bold text-center"
          style="background-color: #c0d4ec"
        >
          <div class="col-3">ประเภทตำแหน่ง</div>
          <div class="col-3">ระดับตำแหน่ง</div>
          <div class="col-3">สมรรถนะหลัก</div>
          <div class="col-3">สมรรถนะประจำกลุ่มงาน</div>
        </div>
        <div class="row text-center">
          <div class="col-3 flex justify-center items-center">บริหาร</div>
          <div class="col-6">
            <div class="row">
              <div class="col-6">สูง</div>
              <div class="col-6">5</div>
            </div>
            <div class="row">
              <div class="col-6">ต้น</div>
              <div class="col-6">4</div>
            </div>
          </div>
          <div class="col-3" style="background-color: #bcbcc4"></div>
        </div>
        <div class="row text-center">
          <div class="col-3 flex justify-center items-center">อำนวยการ</div>
          <div class="col-6">
            <div class="row">
              <div class="col-6">สูง</div>
              <div class="col-6">4</div>
            </div>
            <div class="row">
              <div class="col-6">ต้น</div>
              <div class="col-6">3</div>
            </div>
          </div>
          <div class="col-3" style="background-color: #bcbcc4"></div>
        </div>
        <div class="row text-center">
          <div class="col-3 flex justify-center items-center">วิชาการ</div>
          <div class="col-9">
            <div class="row">
              <div class="col-4">ทรงคุณวุฒิ</div>
              <div class="col-4">5</div>
              <div class="col-4">5</div>
            </div>
            <div class="row">
              <div class="col-4">เชี่ยวชาญ</div>
              <div class="col-4">4</div>
              <div class="col-4">4</div>
            </div>
            <div class="row">
              <div class="col-4">ชำนาญการพิเศษ</div>
              <div class="col-4">3</div>
              <div class="col-4">4</div>
            </div>
            <div class="row">
              <div class="col-4">ชำนาญการ</div>
              <div class="col-4">2</div>
              <div class="col-4">3</div>
            </div>
            <div class="row">
              <div class="col-4">ปฏิบัติการ</div>
              <div class="col-4">1</div>
              <div class="col-4">2</div>
            </div>
          </div>
        </div>
        <div class="row text-center">
          <div class="col-3 flex justify-center items-center">ทั่วไป</div>
          <div class="col-9">
            <div class="row">
              <div class="col-4">ทักษะพิเศษ</div>
              <div class="col-4">4</div>
              <div class="col-4">4</div>
            </div>
            <div class="row">
              <div class="col-4">อาวุโส</div>
              <div class="col-4">3</div>
              <div class="col-4">3</div>
            </div>
            <div class="row">
              <div class="col-4">ชำนาญงาน</div>
              <div class="col-4">2</div>
              <div class="col-4">2</div>
            </div>
            <div class="row">
              <div class="col-4">ปฏิบัติงาน</div>
              <div class="col-4">1</div>
              <div class="col-4">1</div>
            </div>
          </div>
        </div>
      </div>
    </q-card>

    <q-card flat bordered>
      <q-card-section>
        <div class="text-h6 text-bold">
          องค์ประกอบการประเมิน และแนวทางการประเมินของผู้รับการประเมินแต่ละกลุ่ม
        </div>
      </q-card-section>

      <q-separator inset />

      <div style="border: 1px solid black">
        <div class="row text-center" style="background-color: #e0e4f4">
          <div class="col-3 text-bold flex justify-center items-center">
            ผู้รับการประเมิน
          </div>

          <div class="col-9">
            <div class="row text-bold flex justify-center">
              องค์ประกอบการประเมิน
            </div>
            <div class="row">
              <div class="col-6 text-bold">ผลสัมฤทธิ์ของงาน</div>

              <div class="col-6">
                <div class="row text-bold flex justify-center">
                  พฤติกรรมการปฏิบัติราชการ
                </div>
                <div class="row">
                  <div class="col-6">สมรรถนะ</div>
                  <div class="col-6">การพัฒนา</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-3 q-pa-sm">
            <div class="text-bold">กลุ่มที่ 1</div>
            <div>
              ผู้ดำรงตำแหน่ง ดังนี้<br />
              - ปลัดกรุงเทพมหานคร<br />
              - รองปลัดกรุงเทพมหานคร<br />
              - ผู้อำนวยการสำนัก<br />
              - หัวหน้าสำนักงาน ก.ก.<br />
              - หัวหน้าสำนักงานเลขานุการผู้ว่าราชการกรุงเทพมหานคร<br />
              - เลขานุการสภากรุงเทพมหานคร<br />
              - ผู้อำนวยการเขต<br />
              - หัวหน้าส่วนราชการในสังกัดสำนักปลัดกรุงเทพมหานคร<br />
            </div>
          </div>
          <div class="col-9 column">
            <div class="row col-grow">
              <div class="col-6 q-pa-sm">
                น้ำหนักคะแนน
                <div class="text-bold">ร้อยละ 80</div>
                - มิติที่ 1 ภารกิจตามนโยบายและยุทธศาสตร์ของ กทม.<br />
                - มิติที่ 2 วาระเร่งด่วนที่ได้รับมอบหมายพิเศษ (ถ้ามี)<br />
              </div>
              <div class="col-3 q-pa-sm">
                น้ำหนักคะแนน
                <div class="text-bold">ร้อยละ 20</div>
                - สมรรถนะหลัก<br />
                - สมรรถนะประจำผู้บริหารกรุงเทพมหานคร<br />
              </div>
              <div class="col-3 q-pa-sm"></div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-3 q-pa-sm">
            <div class="text-bold">กลุ่มที่ 2</div>
            <div>
              ผู้ดำรงตำแหน่ง ดังนี้<br />

              <div class="flex items-start">
                <div class="q-mr-md" style="min-width: 120px">ประเภทบริหาร</div>
                <div>ระดับต้น - สูง</div>
              </div>

              <div class="flex items-start">
                <div class="q-mr-md" style="min-width: 120px">
                  ประเภทอำนวยการ
                </div>
                <div>ระดับต้น - สูง</div>
              </div>

              <div class="flex items-start">
                <div class="q-mr-md" style="min-width: 120px">
                  ประเภทวิชาการ
                </div>
                <div class="col">
                  <div>ระดับปฏิบัติการ - ทรงคุณวุฒิ</div>
                  <div class="underlined">ที่ดำรงตำแหน่งทางการบริหาร*</div>
                </div>
              </div>

              <div class="flex items-start">
                <div class="q-mr-md" style="min-width: 120px">ประเภททั่วไป</div>
                <div class="col">
                  <div>ระดับอาวุโส</div>
                  <div class="underlined">ที่ดำรงตำแหน่งทางการบริหาร*</div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-9 column">
            <div class="row col-grow">
              <div class="col-6 q-pa-sm">
                น้ำหนักคะแนน
                <div class="text-bold">ร้อยละ 80</div>
                - งานตามแผนปฏิบัติราชการประจำปี<br />
                - งานตามหน้าที่ความรับผิดชอบหลัก<br />
                - งานอื่นๆ ที่ได้รับมอบหมาย<br />
              </div>
              <div class="col-3 q-pa-sm">
                น้ำหนักคะแนน
                <div class="text-bold">ร้อยละ 20</div>
                - สมรรถนะหลัก<br />
                - สมรรถนะประจำผู้บริหารกรุงเทพมหานคร<br />
              </div>
              <div class="col-3 q-pa-sm"></div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-3 q-pa-sm">
            <div class="text-bold">กลุ่มที่ 3</div>
            <div>
              ผู้ดำรงตำแหน่ง ดังนี้<br />

              <div class="flex items-start">
                <div class="q-mr-md" style="min-width: 120px">
                  ประเภทวิชาการ
                </div>
                <div>ระดับปฏิบัติการ - ทรงคุณวุฒิ</div>
              </div>

              <div class="flex items-start">
                <div class="q-mr-md" style="min-width: 120px">ประเภททั่วไป</div>
                <div>ระดับปฏิบัติงาน - อาวุโส</div>
              </div>
            </div>
          </div>
          <div class="col-9 column">
            <div class="row col-grow">
              <div class="col-6 q-pa-sm">
                น้ำหนักคะแนน
                <div class="text-bold">ร้อยละ 70</div>
                - งานตามแผนปฏิบัติราชการประจำปี<br />
                - งานตามหน้าที่ความรับผิดชอบหลัก<br />
                - งานอื่นๆ ที่ได้รับมอบหมาย<br />
              </div>
              <div class="col-3 q-pa-sm">
                น้ำหนักคะแนน
                <div class="text-bold">ร้อยละ 20</div>
                - สมรรถนะหลัก<br />
                - สมรรถนะประจำกลุ่มงาน<br />
              </div>
              <div class="col-3 q-pa-sm">
                น้ำหนักคะแนน
                <div class="text-bold">ร้อยละ 10</div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-3 q-pa-sm">
            <div class="text-bold">กลุ่มทดลองปฏิบัติราชการ</div>
            <div>ทุกตำแหน่ง</div>
          </div>
          <div class="col-9 column">
            <div class="row col-grow">
              <div class="col-6 q-pa-sm">
                น้ำหนักคะแนน
                <div class="text-bold">ร้อยละ 50</div>
                - งานตามแผนปฏิบัติราชการประจำปี<br />
                - งานตามหน้าที่ความรับผิดชอบหลัก<br />
                - งานอื่นๆ ที่ได้รับมอบหมาย<br />
              </div>
              <div class="col-3 q-pa-sm">
                น้ำหนักคะแนน
                <div class="text-bold">ร้อยละ 40</div>
                - สมรรถนะหลัก<br />
                - สมรรถนะประจำกลุ่มงาน<br />
              </div>
              <div class="col-3 q-pa-sm">
                น้ำหนักคะแนน
                <div class="text-bold">ร้อยละ 10</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </q-card>
  </div>
</template>

<style scoped lang="scss">
.display-table {
  & .row:not(:last-child) {
    border-bottom: 1px solid black;
  }

  & [class^="col-"]:not(:last-child) {
    border-right: 1px solid black;
  }
}

.underlined {
  text-decoration: underline;
}
</style>
