<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";

import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";

import { checkPermission } from "@/utils/permissions";

const $q = useQuasar();
const dataLevel = ref<any>();
const { showLoader, hideLoader, success } = useCounterMixin();
const fieldLabels = {
  score5: "5",
  score4: "4",
  score3: "3",
  score2: "2",
  score1: "1",
};

const formScore = reactive<any>({
  score5: "",
  score4: "",
  score3: "",
  score2: "",
  score1: "",
});

interface FormScore {
  score5: string;
  score4: string;
  score3: string;
  score2: string;
  score1: string;
  [key: string]: any;
}

function onSubmit() {
  const body = {
    formScore: dataLevel.value.map((item: any) => {
      const { level, ...rest } = item;
      return rest;
    }),
  };

  http
    .put(config.API.kpiEvaluation, body.formScore)
    .then((res) => {
      success($q, "บันทึกสำเร็จ");
    })
    .finally(() => {});
}

function getData() {
  showLoader();
  http
    .get(config.API.kpiEvaluation)
    .then((res) => {
      dataLevel.value = res.data.result.data;
    })
    .finally(() => {
      hideLoader();
    });
}
onMounted(() => {
  getData();
});
</script>

<template>
  <q-card>
    <q-form greedy @submit.prevent @validation-success="onSubmit">
      <q-card-section>
        <q-card flat bordered>
          <q-card-section class="bg-grey-3">
            <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>
          </q-card-section>
          <q-card-section class="q-pa-none">
            <div v-for="(field, index) in dataLevel" :key="field.id">
              <div class="row q-pa-sm">
                <div class="col-8 text-left">
                  <q-field
                    class="q_field_p_none"
                    ref="fieldRef"
                    v-model="field.description"
                    label-slot
                    borderless
                    :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
                    hide-bottom-space
                  >
                    <template #control>
                      <q-editor
                        :readonly="checkPermission($route)?.attrIsUpdate == false"
                        class="full-width"
                        v-model="field.description"
                        :dense="$q.screen.lt.md"
                        min-height="5rem"
                        :toolbar="[
                          [
                            'bold',
                            'italic',
                            'strike',
                            'underline',
                            'subscript',
                            'superscript',
                          ],

                          ['unordered', 'ordered'],
                        ]"
                        :fonts="{
                          arial: 'Arial',
                          arial_black: 'Arial Black',
                          comic_sans: 'Comic Sans MS',
                          courier_new: 'Courier New',
                          impact: 'Impact',
                          lucida_grande: 'Lucida Grande',
                          times_new_roman: 'Times New Roman',
                          verdana: 'Verdana',
                        }"
                      />
                    </template>
                  </q-field>
                  <!-- <q-input
                  v-model="formScore[field]"
                  dense
                  outlined
                  class="inputgreen"
                  label="กรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น'}`,]"
                  hide-bottom-space
                /> -->
                </div>
                <div
                  class="col-4 text-center text-body1 text-weight-bold self-center"
                >
                  {{ field.level }}
                </div>
              </div>
              <div
                class="col-12"
                v-if="index !== Object.keys(fieldLabels).length - 1"
              >
                <q-separator />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right">
        <q-btn v-if="checkPermission($route)?.attrIsUpdate" label="บันทึก" color="secondary" type="submit"
          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
        >
      </q-card-actions>
    </q-form>
  </q-card>
</template>
