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

import Main from "@/modules/01_masterdata/components/competency/Forms/Main.vue";

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

import type { DataOption } from "@/modules/01_masterdata/interface/index/Main";

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

const checkRoute = ref<boolean>(route.name == "KPICompetencyDetailByid");

const competencyTypeOp = ref<DataOption[]>([
  {
    id: "HEAD",
    name: "สมรรถนะหลัก",
  },
  {
    id: "GROUP",
    name: "สมรรถนะประจำกลุ่มงาน",
  },
  {
    id: "EXECUTIVE",
    name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
  },
  {
    id: "DIRECTOR",
    name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
  },
  {
    id: "INSPECTOR",
    name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
  },
]);
</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">{{
      checkRoute ? "รายละเอียดสมรรถนะ" : "เพิ่ม/แก้ไขสมรรถนะ"
    }}</span>
  </div>
  <q-card>
    <q-card-section>
      <div class="row">
        <div class="col-12">
          <q-select
            :readonly="checkRoute"
            v-model="store.competencyTypeVal"
            outlined
            label="เลือกประเภทสมรรถนะ"
            dense
            option-label="name"
            option-value="id"
            :options="competencyTypeOp"
            emit-value
            map-options
            :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทสมรรถนะ'}`,]"
            hide-bottom-space
            class="inputgreen"
          />
        </div>
      </div>
    </q-card-section>
    <Main />
  </q-card>
</template>
