<script setup lang="ts">
import { reactive } from "vue";
import { useQuasar } from "quasar";

import { useCounterMixin } from "@/stores/mixin";
import { useKPIDataStore } from "@/modules/01_masterdata/stores/KPIStore";

import type {} from

const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;
const store = useKPIDataStore();

interface DetailLevelType {
  level_01: any;
  level_02: any;
  level_03: any;
  level_04: any;
  level_05: any;
}

interface FormGroup {
  name: string;
  definition: string;
  detailLevel: DetailLevelType[];
  evaluation: string;
}

const fieldLabels = {
  score1: "1",
  score2: "2",
  score3: "3",
  score4: "4",
  score5: "5",
};

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

const formData = reactive<FormGroup>({
  name: "",
  definition: "",
  detailLevel: [],
  evaluation: "",
});

function onSubmit() {
  dialogConfirm($q, () => {
    const body = {
      competencyType: store.competencyTypeVal,
      competencyName: formData.definition,
      definition: formData.definition,
      levels1: formScore.score1,
      levels2: formScore.score2,
      levels3: formScore.score3,
      levels4: formScore.score4,
      levels5: formScore.score5,
      evaluation: formData.evaluation,
    };
  });
}
</script>

<template>
  <q-form greedy @submit.prevent @validation-success="onSubmit" class="col-12">
    <div class="row q-col-gutter-sm">
      <div class="col-12">
        <q-input
          label="ชื่อสมรรถนะ"
          outlined
          v-model="formData.name"
          dense
          :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`,]"
          hide-bottom-space
        />
      </div>
      <div class="col-12">
        <q-input
          label="คำจำกัดความ"
          outlined
          v-model="formData.definition"
          dense
          type="textarea"
          :rules="[(val:string) => !!val || `${'กรุณากรอกคำจำกัดความ'}`,]"
          hide-bottom-space
        />
      </div>
      <div class="col-12">
        <q-card flat bordered>
          <q-card-section class="bg-grey-4 q-pa-sm">
            <div class="row text-dark text-body2 text-weight-medium">
              <div class="text-center col-4">ระดับ</div>
              <div class="col-8">มาตรฐานพฤติกรรม</div>
            </div>
          </q-card-section>
          <q-card-section class="q-pa-none">
            <div
              v-for="(field, index) in Object.keys(fieldLabels)"
              :key="index + 1"
            >
              <div class="row q-pa-sm">
                <div
                  class="col-4 text-center text-body1 text-weight-bold self-center"
                >
                  {{ fieldLabels[field as keyof typeof fieldLabels] }}
                </div>
                <div class="col-8 text-left">
                  <q-field
                    class="q_field_p_none"
                    ref="fieldRef"
                    v-model="formScore[field]"
                    label-slot
                    borderless
                    :rules="[(val:string) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
                    hide-bottom-space
                  >
                    <template #control>
                      <q-editor
                        class="full-width"
                        v-model="formScore[field]"
                        :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>
                </div>
              </div>
              <div
                class="col-12"
                v-if="index !== Object.keys(fieldLabels).length - 1"
              >
                <q-separator />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
      <div class="col-12">
        <q-input
          v-model="formData.evaluation"
          label="กำหนดเกณฑ์การประเมิน"
          dense
          type="textarea"
          outlined
        />
      </div>
      <div class="col-12"><q-separator /></div>
      <div class="col-12 row justify-end">
        <q-btn
          dense
          unelevated
          label="บันทึก"
          color="public"
          class="q-px-md"
          type="submit"
        >
          <q-tooltip>บันทึกข้อมูล</q-tooltip>
        </q-btn>
      </div>
    </div>
  </q-form>
</template>
