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

import type { ListCriteria } from "@/modules/08_KPI/interface/index/Main";

const modal = defineModel<boolean>("modal", { required: true });
const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", {
  required: true,
});

function close() {
  modal.value = false;
}
</script>

<template>
  <q-dialog persistent v-model="modal">
    <q-card style="min-width: 60%">
      <DialogHeader tittle="เกณฑ์การประเมินสมรรถนะ" :close="close" />
      <q-separator />
      <q-card-section class="">
        <q-card bordered>
          <div class="bg-grey-2 q-pa-sm">
            <div class="row text-dark text-body2 text-weight-medium">
              <div class="text-center col-8">เกณฑ์การประเมิน</div>
              <div class="text-center col-4">ระดับคะแนน</div>
            </div>
          </div>
          <q-separator />
          <div v-for="(item, index) in dataListCriteria" :key="item.id">
            <div :class="`row q-pa-sm ${index % 2 !== 0 && 'bg-grey-2'}`">
              <div class="col-8"><span v-html="item.description"></span></div>
              <div
                class="col-4 text-center self-center text-body1 text-weight-bold"
              >
                <span>{{ item.level }}</span>
              </div>
            </div>
            <q-separator />
          </div>
        </q-card>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>
