<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";

import Main from "@/modules/14_KPI/components/competency/Forms/Main.vue";
// import FormMain from "@/modules/14_KPI/components/competency/Forms/01_FormMain.vue";
// import FormGroup from "@/modules/14_KPI/components/competency/Forms/02_FormGroup.vue";
// import FormExecutive from "@/modules/14_KPI/components/competency/Forms/03_FormExecutive.vue";
// import FormExecutivePosition from "@/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue";
// import FormExecutiveLevel from "@/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue";
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";

import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
import type { FormCompetency } from "@/modules/14_KPI/interface/request/Main";

const router = useRouter();
const store = useKPIDataStore();

const formData = reactive<FormCompetency>({
  competencyType: "",
  competencyName: "",
  definition: "",
  level_1: ["", "", "", "", "", ""],
  level_2: "",
  level_3: "",
  level_4: "",
  level_5: "",
  evaluation: "",
});

const competencyTypeOp = ref<DataOption[]>([
  {
    id: "HEAD",
    name: "สมรรถนะหลัก",
  },
  {
    id: "GROUP",
    name: "สมรรถนะประจำกลุ่มงาน",
  },
  {
    id: "EXECUTIVE",
    name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
  },
  {
    id: "DIRECTOR",
    name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
  },
  {
    id: "INSPECTOR",
    name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
  },
]);

const itemsFormCard = ref<any>([
  {
    id: "",
    name: "",
  },
]);

function ocClickAdd() {
  if (itemsFormCard.value.length !== 6) {
    const data = {
      id: "",
      name: "",
    };
    itemsFormCard.value.push(data);
  }
}

/** บันทึก */
function onSubmit() {
  console.log(formData);
}
</script>

<template>
  <div>
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="router.go(-1)"
    />
    <span class="toptitle text-dark">เพิ่ม/แก้ไขสมรรถนะ</span>
  </div>
  <q-card flat bordered>
    <!-- @submit.prevent @validation-success="onSubmit" -->
    <!-- <q-form greedy> -->
    <q-card-section>
      <div class="row q-col-gutter-sm">
        <div class="col-12">
          <q-select
            v-model="store.competencyType"
            outlined
            label="เลือกประเภทสมรรถนะ"
            dense
            option-label="name"
            option-value="id"
            :options="competencyTypeOp"
            emit-value
            map-options
            :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทสมรรถนะ'}`,]"
            hide-bottom-space
          />
        </div>

        <Main />
        <!-- <FormMain v-if="store.competencyType === 'ID1'" />
        <FormGroup v-else-if="store.competencyType === 'ID2'" />
        <FormExecutive v-else-if="store.competencyType === 'ID3'" />
        <FormExecutivePosition v-else-if="store.competencyType === 'ID4'" />
        <FormExecutiveLevel v-else-if="store.competencyType === 'ID5'" /> -->
      </div>
    </q-card-section>
  </q-card>
</template>
