<script setup lang="ts">
import { ref, reactive } from "vue";
import type { QTableProps } from "quasar";

import { useCounterMixin } from "@/stores/mixin";
import { useKPIDataStore } from "@/modules/01_masterdata/stores/KPIStore";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
const router = useRouter();

const mixin = useCounterMixin();
const $q = useQuasar();
const mode = ref<string>("table");
const {
  dialogRemove,
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  success,
  date2Thai,
} = mixin;

const store = useKPIDataStore();
const formData = reactive({
  competencyType: "",
  competencyName: "",
  definition: "",
  level1: "",
  level2: "",
  level3: "",
  evaluation: "",
});

function onSubmit() {
  dialogConfirm($q, () => {
    const body = {
      competencyType: store.competencyTypeVal,
      competencyName: formData.competencyName,
      definition: formData.definition,
      levels1: formData.level1,
      levels2: formData.level2,
      levels3: formData.level3,
      evaluation: formData.evaluation,
    };
  });
}
</script>

<template>
  <div class="full-width">
    <q-form @submit.prevent greedy @validation-success="onSubmit()">
      <div class="col-12">
        <q-input
          outlined
          v-model="formData.competencyName"
          dense
          label="ชื่อสมรรถนะ"
          hide-bottom-space
          :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`]"
        />
      </div>
      <q-card-section class="col-12 q-px-none">
        <div>
          <q-field
            class="q_field_p_none"
            ref="fieldRef"
            v-model="formData.definition"
            label-slot
            borderless
            :rules="[(val:string) => !!val || 'กรุณากรอกคำจำกัดความ']"
            hide-bottom-space
          >
            <template #control>
              <q-editor
                class="full-width"
                v-model="formData.definition"
                :dense="$q.screen.lt.md"
                min-height="7rem"
                placeholder="คำจำกัดความ"
                :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>
      </q-card-section>
      <div class="col-12">
        <q-card flat bordered>
          <q-card-section class="bg-grey-4 q-py-sm">
            <div class="row text-dark text-body2 text-weight-medium">
              <div class="col-6 q-pl-xl">ระบบตำแหน่ง</div>
              <div class="col-6">
                คำอธิบายระดับ/พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย
              </div>
            </div>
          </q-card-section>
          <div class="row items-center">
            <q-card-section class="q-pa-none q-pl-xl col-6">
              <span class="text-dark text-subtitle1 text-weight-medium">
                L1 ระดับ หัวหน้าฝ่ายในสังกัด
              </span>
            </q-card-section>
            <q-card-section class="q-pa-none col-6">
              <div class="q-mr-md">
                <q-field
                  ref="fieldRef"
                  v-model="formData.level1"
                  label-slot
                  borderless
                  :rules="[
                    (val:string) =>
                      !!val || 'กรุณาระบุคำอธิบาย L1 ระดับ หัวหน้าฝ่ายในสังกัด',
                  ]"
                  hide-bottom-space
                >
                  <template #control>
                    <q-editor
                      v-model="formData.level1"
                      :dense="$q.screen.lt.md"
                      min-height="5rem"
                      class="full-width"
                      :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>
            </q-card-section>
          </div>
          <div class="row items-center">
            <q-card-section class="q-pa-none q-pl-xl col-6">
              <span class="text-dark text-subtitle1 text-weight-medium">
                L2 ระดับ ผู้ช่วยผู้อำนวยการเขต
              </span>
            </q-card-section>
            <q-card-section class="q-pa-none col-6">
              <div class="q-mr-md">
                <q-field
                  ref="fieldRef"
                  v-model="formData.level2"
                  label-slot
                  borderless
                  :rules="[
                    (val:string) =>
                      !!val ||
                      'กรุณาระบุคำอธิบาย L2 ระดับ ผู้ช่วยผู้อำนวยการเขต',
                  ]"
                  hide-bottom-space
                >
                  <template #control>
                    <q-editor
                      v-model="formData.level2"
                      :dense="$q.screen.lt.md"
                      min-height="5rem"
                      class="full-width"
                      :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>
            </q-card-section>
          </div>
          <div class="row items-center">
            <q-card-section class="q-pa-none q-pl-xl col-6">
              <span class="text-dark text-subtitle1 text-weight-medium">
                L3 ระดับ ผู้อำนวยการเขต
              </span>
            </q-card-section>
            <q-card-section class="q-pa-none col-6">
              <div class="q-mr-md">
                <q-field
                  ref="fieldRef"
                  v-model="formData.level3"
                  label-slot
                  borderless
                  :rules="[
                    (val:string) =>
                      !!val || 'กรุณาระบุคำอธิบาย L3 ระดับ ผู้อำนวยการเขต',
                  ]"
                  hide-bottom-space
                >
                  <template #control>
                    <q-editor
                      v-model="formData.level3"
                      :dense="$q.screen.lt.md"
                      min-height="5rem"
                      class="full-width"
                      :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>
            </q-card-section>
          </div>
        </q-card>
        <div class="col-12 q-mt-md">
          <q-input
            v-model="formData.evaluation"
            label="กำหนดเกณฑ์การประเมิน"
            dense
            type="textarea"
            outlined
          />
        </div>
        <q-separator color="grey-4" />
        <div class="col-12 row justify-end q-mt-md">
          <q-btn
            dense
            unelevated
            label="บันทึก"
            color="public"
            class="q-px-md"
            type="submit"
          >
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </div>
      </div>
    </q-form>
  </div>
</template>
