<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";

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

const formData = reactive({
  competencyType: "",
  competencyName: "",
  definition: "",
  levels: [
    {
      level: "1",
      description: "",
    },
  ],

  evaluation: "",
});

function ocClickAdd() {
  if (formData.levels.length !== 6) {
    const levelName = formData.levels.length + 1;
    const data = {
      level: levelName.toString(),
      description: "",
    };
    formData.levels.push(data);
  }
}

function onSubmit() {
  dialogConfirm($q, () => {
    const body = {
      competencyType: store.competencyTypeVal,
      competencyName: formData.competencyName,
      definition: formData.definition,
      levels: formData.levels,
      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
          v-model="formData.competencyName"
          dense
          outlined
          label="ชื่อสมรรถนะ"
          :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`,]"
          hide-bottom-space
        />
      </div>
      <div class="col-12">
        <q-input
          v-model="formData.definition"
          label="คำจำกัดความ"
          dense
          type="textarea"
          outlined
          :rules="[(val:string) => !!val || `${'กรุณากรอกคำจำกัดความ'}`,]"
          hide-bottom-space
        />
      </div>
      <div class="col-12">
        <q-card flat bordered>
          <q-card-section class="bg-grey-4">
            <div
              class="row items-center text-dark text-body2 text-weight-medium"
            >
              <div class="col-3">
                <div class="row items-center">
                  <div class="col-1">
                    <q-btn
                      dense
                      flat
                      round
                      color="primary"
                      icon="add"
                      @click="ocClickAdd"
                    >
                      <q-tooltip>เพิ่ม</q-tooltip></q-btn
                    >
                  </div>
                  <div class="col-11 text-center">
                    <span>ระดับ</span>
                  </div>
                </div>
              </div>
              <div class="col-4">
                <span>คำอธิบายระดับ</span>
              </div>
            </div>
          </q-card-section>
          <q-card-section>
            <div
              class="row q-pa-sm"
              v-for="(items, index) in formData.levels"
              key="index"
            >
              <div
                class="col-3 text-center self-center text-body1 text-weight-medium"
              >
                <span>{{ items.level }}</span>
              </div>
              <div class="col-9">
                <q-field
                  class="q_field_p_none"
                  ref="fieldRef"
                  v-model="formData.levels[index].description"
                  label-slot
                  borderless
                  :rules="[(val:string) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
                  hide-bottom-space
                >
                  <template #control>
                    <q-editor
                      class="full-width"
                      v-model="formData.levels[index].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>
              </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>

<style scoped></style>
