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

import config from "@/app.config";
import http from "@/plugins/http";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/14_KPI/store";

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

import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const mixin = useCounterMixin();
const store = useKpiDataStore();
const {
  showLoader,
  hideLoader,
  messageError,
  dialogConfirm,
  dialogMessageNotify,
  success,
  date2Thai,
} = mixin;

const modal = defineModel<boolean>("modal", { required: true });
const checkDetail = defineModel<boolean>("checkDetail", { required: true });
const numpage = defineModel<number>("numpage", { required: true });
const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
  required: true,
});

const search = ref<string>("");
const listCheckID = ref<string | null>(null);
const listTarget = ref<any>([]);

const formFilter = reactive<any>({
  isAll: false,
  keyword: "",
  node: 0,
  nodeId: "",
  period: "",
  year: null,
  page: 1,
  pageSize: 20,
});

const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
const maxPage = ref<number>(1);

const formDetail = reactive<any>({
  orgRevisionId: "",
  id: "",
  year: null,
  round: "",
  kpiPeriodId: "",
  includingName: "",
  including: "",
  target: "",
  unit: "",
  weight: null,
  achievement1: "",
  achievement2: "",
  achievement3: "",
  achievement4: "",
  achievement5: "",
  meaning: "",
  formula: "",
  node: null,
  nodeId: "",
  nodeName: "",
  strategy: null,
  strategyId: "",
  strategyName: "",
  documentInfoEvidence: "",
  startDate: null,
  endDate: null,
});

/** Option  รอบการประเมิน*/
const roundOp = ref<DataOption[]>([
  { id: "APR", name: "รอบที่ 1 เมษายน" },
  { id: "OCT", name: "รอบที่ 2 ตุลาคม" },
]);

const title = computed(() => {
  let name = "";
  if (numpage.value === 1) {
    name = isStatusEdit.value
      ? "แก้ไขตัวชี้วัดตามแผนปฏิบัติราชการประจําปี"
      : "เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี";
  } else if (numpage.value === 2) {
    name = isStatusEdit.value
      ? "แก้ไขตัวชี้วัดตามหน้าที่ความรับผิดชอบ"
      : "เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ";
  } else if (numpage.value === 3) {
    name = isStatusEdit.value
      ? "แก้ไขตัวชี้วัดงานอื่นๆ ที่ได้รับมอบหมาย"
      : "เพิ่มตัวชี้วัดงานอื่นๆ ที่ได้รับมอบหมาย";
  }
  return name;
});

/** ดึงข้อมูล งานตามแผนปฏิบัติราชการประจำปี */
function fetchListPlan() {
  formFilter.nodeId = store.dataProfile.nodeId;
  formFilter.node = store.dataProfile.node;
  formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
  formFilter.keyword = formFilter.keyword.trim();
  // const kpiPeriodId = store.dataEvaluation.kpiPeriodId;

  showLoader();
  http
    .post(config.API.kpiPlan + `/search-kpi-plan`, formFilter)
    .then((res) => {
      listTarget.value = res.data.result.data;
      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
      totalList.value = res.data.result.total;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ดึงข้อมูล งานตามแผนปฏิบัติราชการประจำปีตาม id */
function fetchListPlanByid(id: string) {
  showLoader();
  http
    .get(config.API.kpiAchievement("planned") + `/${id}`)
    .then((res) => {
      const data = res.data.result;
      formDetail.target = data.target;
      formDetail.unit = data.unit;
      formDetail.weight = data.weight;
      formDetail.meaning = data.meaning;
      formDetail.formula = data.formula;
      formDetail.achievement1 = data.achievement1;
      formDetail.achievement2 = data.achievement2;
      formDetail.achievement3 = data.achievement3;
      formDetail.achievement4 = data.achievement4;
      formDetail.achievement5 = data.achievement5;
      formDetail.documentInfoEvidence = data.documentInfoEvidence;

      formDetail.startDate = data.startDate;
      formDetail.endDate = data.endDate;

      listCheckID.value = data.kpiPlanId;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ดึงข้อมูล งานตามหน้าที่ความรับผิดชอบหลัก */
function fetchListRole() {
  formFilter.nodeId = store.dataProfile.nodeId;
  formFilter.node = store.dataProfile.node;
  formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
  formFilter.position = store.dataProfile.position;
  formFilter.keyword = formFilter.keyword.trim();
  showLoader();

  http
    .post(config.API.kpiRole + `/search-kpi-role`, formFilter)
    .then((res) => {
      listTarget.value = res.data.result.data;
      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
      totalList.value = res.data.result.total;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ดึงข้อมูล งานตามหน้าที่ความรับผิดชอบหลักตาม id */
function fetchRoleByid(id: string) {
  showLoader();
  http
    .get(config.API.kpiAchievement("role") + `/${id}`)
    .then((res) => {
      const data = res.data.result;
      formDetail.target = data.target;
      formDetail.unit = data.unit;
      formDetail.weight = data.weight;
      formDetail.meaning = data.meaning;
      formDetail.formula = data.formula;
      formDetail.achievement1 = data.achievement1;
      formDetail.achievement2 = data.achievement2;
      formDetail.achievement3 = data.achievement3;
      formDetail.achievement4 = data.achievement4;
      formDetail.achievement5 = data.achievement5;
      formDetail.documentInfoEvidence = data.documentInfoEvidence;
      formDetail.startDate = data.startDate;
      formDetail.endDate = data.endDate;

      listCheckID.value = data.kpiRoleId;
      // clickList(data.kpiRoleId, true);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ดึงข้อมูล งานอื่นๆ ที่ได้รับมอบหมาย */
function fetchListSpecial() {
  formFilter.nodeId = store.dataProfile.nodeId;
  formFilter.node = store.dataProfile.node;
  formFilter.year = formFilter?.year ? formFilter.year.toString() : "";

  showLoader();

  const body = {
    keyword: formFilter.keyword.trim(),
    period: formFilter.period,
    year: formFilter.year,
    pageSize: formFilter.pageSize,
    page: formFilter.page,
  };

  showLoader();
  http
    .post(config.API.kpiSpecial + `/search-kpi-special`, body)
    .then((res) => {
      listTarget.value = res.data.result.data;
      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
      totalList.value = res.data.result.total;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ดึงข้อมูล งานอื่นๆ ที่ได้รับมอบหมายตาม id */
function fetchspecialByid(id: string) {
  showLoader();
  http
    .get(config.API.kpiAchievement("special") + `/${id}`)
    .then((res) => {
      const data = res.data.result;
      formDetail.including = data.including;
      formDetail.includingName = data.includingName;
      formDetail.target = data.target;
      formDetail.unit = data.unit;
      formDetail.achievement1 = data.achievement1;
      formDetail.achievement2 = data.achievement2;
      formDetail.achievement3 = data.achievement3;
      formDetail.achievement4 = data.achievement4;
      formDetail.achievement5 = data.achievement5;
      formDetail.weight = data.weight;
      formDetail.formula = data.formula;
      formDetail.meaning = data.meaning;
      formDetail.documentInfoEvidence = data.documentInfoEvidence;
      formDetail.startDate = data.startDate;
      formDetail.endDate = data.endDate;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ดึงรายละเอียดตัวชี้วัด
 * @param id ตัวชี้วัด
 * @param isData เเยก plan/role
 */
function clickList(id: string, isData: boolean = false) {
  if (!checkDetail.value) {
    showLoader();
    const url =
      numpage.value === 1
        ? config.API.kpiPlan + `/edit`
        : numpage.value === 2
        ? config.API.kpiRole + `/edit`
        : config.API.kpiSpecial + `/edit`;
    http
      .get(`${url}/${id}`)
      .then((res) => {
        listCheckID.value = id;
        const data = res.data.result;
        if (!isData) {
          formDetail.target = data.target;
          formDetail.unit = data.unit;
          formDetail.weight = data.weight;
          formDetail.meaning = data.meaning;
          formDetail.formula = data.formula;
          formDetail.achievement1 = data.achievement1;
          formDetail.achievement2 = data.achievement2;
          formDetail.achievement3 = data.achievement3;
          formDetail.achievement4 = data.achievement4;
          formDetail.achievement5 = data.achievement5;
        }
        formDetail.orgRevisionId = data.corgRevisionId;
        formDetail.id = data.id;
        formDetail.year = data.year;
        formDetail.round = data.round;
        formDetail.kpiPeriodId = data.kpiPeriodId;
        formDetail.includingName = data.includingName;
        formDetail.including = data.including;
        formDetail.node = data.node;
        formDetail.nodeId = data.nodeId;
        formDetail.nodeName = data.nodeName;
        formDetail.strategy = data.strategy;
        formDetail.strategyId = data.strategyId;
        formDetail.strategyName = data.strategyName;
        formDetail.documentInfoEvidence = data.documentInfoEvidence;
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  }
}

/** ปิด dialog */
function closeDialog() {
  modal.value = false;
  search.value = "";
  listCheckID.value = null;
  formDetail.orgRevisionId = "";
  formDetail.id = "";
  formDetail.year = "";
  formDetail.round = "";
  formDetail.kpiPeriodId = "";
  formDetail.includingName = "";
  formDetail.including = "";
  formDetail.target = "";
  formDetail.unit = "";
  formDetail.weight = "";
  formDetail.achievement1 = "";
  formDetail.achievement2 = "";
  formDetail.achievement3 = "";
  formDetail.achievement4 = "";
  formDetail.achievement5 = "";
  formDetail.meaning = "";
  formDetail.formula = "";
  formDetail.node = "";
  formDetail.nodeId = "";
  formDetail.strategy = "";
  formDetail.strategyId = "";
  formDetail.documentInfoEvidence = "";
  formDetail.startDate = null;
  formDetail.endDate = null;

  formFilter.isAll = false;
  formFilter.keyword = "";
  formFilter.node = 0;
  formFilter.nodeId = "";
  formFilter.period = "";
  formFilter.year = null;
  formFilter.page = 1;
  formFilter.pageSize = 20;

  isStatusEdit.value = false;
  checkDetail.value = false;
}

/** บันทึกข้อมูล */
function onSubmit() {
  if (!listCheckID.value && numpage.value !== 3) {
    dialogMessageNotify($q, "กรุณาเลือกตัวชี้วัด");
  } else {
    dialogConfirm($q, async () => {
      showLoader();

      const formBody = {
        target: formDetail.target,
        unit: formDetail.unit,
        weight: Number(formDetail.weight),
        meaning: formDetail.meaning,
        formula: formDetail.formula,
        kpiUserEvaluationId: store.dataEvaluation.id,
        kpiPlanId: numpage.value === 1 ? listCheckID.value : undefined,
        kpiRoleId: numpage.value === 2 ? listCheckID.value : undefined,
        achievement1: formDetail.achievement1,
        achievement2: formDetail.achievement2,
        achievement3: formDetail.achievement3,
        achievement4: formDetail.achievement4,
        achievement5: formDetail.achievement5,
        documentInfoEvidence: formDetail.documentInfoEvidence,
        startDate: formDetail.startDate ? formDetail.startDate : undefined,
        endDate: formDetail.endDate ? formDetail.endDate : undefined,
        including: numpage.value === 3 ? formDetail.including : undefined,
        includingName:
          numpage.value === 3 ? formDetail.includingName : undefined,
        period:
          numpage.value === 3 ? store.dataEvaluation.durationKPI : undefined,
        year:
          numpage.value === 3
            ? store.dataEvaluation.year.toString()
            : undefined,
      };
      try {
        const urlPlanned = isStatusEdit.value
          ? config.API.kpiAchievement("planned") + `/${kpiUserPlannedId.value}`
          : config.API.kpiAchievement("planned");

        const urlRole = isStatusEdit.value
          ? config.API.kpiAchievement("role") + `/${kpiUserPlannedId.value}`
          : config.API.kpiAchievement("role");

        const urlSpecial = isStatusEdit.value
          ? config.API.kpiAchievement("special") + `/${kpiUserPlannedId.value}`
          : config.API.kpiAchievement("special");

        const url =
          numpage.value === 1
            ? urlPlanned
            : numpage.value === 2
            ? urlRole
            : urlSpecial;
        const method = isStatusEdit.value ? "put" : "post";
        await http[method](url, formBody);
        closeDialog();
        success($q, "บันทึกข้อมูลสำเร็จ");
      } catch (err) {
        messageError($q, err);
      } finally {
        hideLoader();
      }
    });
  }
}

/** ดึงข้อมูลตัวชีวัด */
function fetchNewList() {
  formFilter.page = 1;
  numpage.value === 1
    ? fetchListPlan()
    : numpage.value === 2
    ? fetchListRole()
    : fetchListSpecial();
}

watch(
  () => modal.value,
  () => {
    if (modal.value) {
      if (numpage.value === 1) {
        fetchListPlan();
        isStatusEdit.value && fetchListPlanByid(kpiUserPlannedId.value);
        checkDetail.value && fetchListPlanByid(kpiUserPlannedId.value);
      } else if (numpage.value === 2) {
        fetchListRole();
        isStatusEdit.value && fetchRoleByid(kpiUserPlannedId.value);
        checkDetail.value && fetchRoleByid(kpiUserPlannedId.value);
      } else if (numpage.value === 3) {
        fetchListSpecial();
        isStatusEdit.value && fetchspecialByid(kpiUserPlannedId.value);
        checkDetail.value && fetchspecialByid(kpiUserPlannedId.value);
      }
    }
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 100%">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader
          :tittle="
            checkDetail
              ? `รายละเอียดตัวชี้วัดตามแผนปฏิบัติราชการประจําปี`
              : `${title}`
          "
          :close="closeDialog"
        />
        <q-separator />

        <q-card-section class="q-pa-none scroll" style="max-height: 75vh">
          <div class="col-12 row">
            <div class="bg-grey-1 q-pa-md col-xs-12 col-md-3 row lineRight">
              <div class="col-12 fit">
                <div class="row col-12" v-if="numpage !== 3">
                  <q-checkbox
                    :disable="checkDetail"
                    v-model="formFilter.isAll"
                    label="แสดงตัวชี้วัดภายใต้หน่วยงาน/ส่วนราชการทุกระดับ"
                    @update:model-value="fetchNewList()"
                  />
                </div>
                <div class="row q-col-gutter-sm col-12">
                  <div class="col-5">
                    <datepicker
                      :readonly="checkDetail"
                      menu-class-name="modalfix"
                      v-model="formFilter.year"
                      :locale="'th'"
                      autoApply
                      year-picker
                      :enableTimePicker="false"
                      @update:model-value="fetchNewList()"
                    >
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input
                          dense
                          :readonly="checkDetail"
                          outlined
                          :model-value="
                            formFilter.year === null || formFilter.year === ''
                              ? null
                              : Number(formFilter.year) + 543
                          "
                          :label="`${'ปีงบประมาณ'}`"
                        >
                          <template v-slot:prepend>
                            <q-icon
                              name="event"
                              class="cursor-pointer"
                              style="color: var(--q-primary)"
                            >
                            </q-icon>
                          </template>
                          <template v-slot:append>
                            <q-icon
                              v-if="formFilter.year"
                              name="cancel"
                              class="cursor-pointer"
                              @click.stop.prevent="
                                (formFilter.year = null), fetchNewList()
                              "
                            />
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div class="col-7">
                    <q-select
                      dense
                      :readonly="checkDetail"
                      outlined
                      v-model="formFilter.period"
                      :options="roundOp"
                      option-label="name"
                      option-value="id"
                      emit-value
                      map-options
                      input-class="text-red"
                      label="รอบการประเมิน"
                      clearable
                      @update:model-value="fetchNewList()"
                    />
                  </div>
                </div>

                <div class="col-12 q-mt-sm">
                  <q-input
                    v-model="formFilter.keyword"
                    outlined
                    :readonly="checkDetail"
                    dense
                    label="ค้นหา"
                    @keydown.enter.prevent="fetchNewList()"
                  >
                    <template v-slot:append>
                      <q-icon name="search" />
                    </template>
                  </q-input>
                </div>

                <q-card bordered flat class="q-mt-sm no-shadow bg-white col-12">
                  <div class="row q-px-md q-py-sm items-center bg-grey-1">
                    <div class="col-5">ลำดับ/รหัสตัวชี้วัด</div>
                    <div class="col-7">ชื่อตัวชี้วัด</div>
                  </div>
                  <q-separator />

                  <q-card-section class="q-pa-none">
                    <q-list separator>
                      <q-item
                        dense
                        v-for="(item, index) in listTarget"
                        :key="index"
                        clickable
                        v-ripple
                        :active="listCheckID === item.id"
                        active-class="my-menu-link"
                        @click="clickList(item.id)"
                        :style="checkDetail ? 'pointer-events: none;' : ''"
                      >
                        <q-item-section class="q-pa-none">
                          <div class="row items-center full-width">
                            <div class="col-5">
                              {{ item.including }}
                            </div>
                            <div class="col-7">
                              {{ item.includingName }}
                            </div>
                          </div>
                        </q-item-section>
                      </q-item>
                    </q-list>
                    <q-separator />
                    <div
                      class="q-pa-lg flex justify-end"
                      v-if="totalList !== 0"
                    >
                      ทั้งหมด {{ totalList }} รายการ
                      <q-pagination
                        v-model="formFilter.page"
                        active-color="primary"
                        color="dark"
                        :max="Number(maxPage)"
                        size="sm"
                        boundary-links
                        direction-links
                        :max-pages="5"
                        @update:model-value="
                          numpage === 1
                            ? fetchListPlan()
                            : numpage === 2
                            ? fetchListRole()
                            : fetchListSpecial()
                        "
                      ></q-pagination>
                    </div>
                  </q-card-section>
                </q-card>
              </div>
            </div>

            <div class="col-xs-12 col-md-9">
              <div class="row q-pa-md q-col-gutter-sm">
                <div class="col-12">
                  <span class="text-body2 text-weight-medium"
                    >รายละเอียดตัวชี้วัด</span
                  >
                </div>
                <div class="col-xs-12 col-6">
                  <q-card bordered class="full-height q-pa-sm">
                    <div class="q-pa-sm q-col-gutter-lg">
                      <div class="col-12 row" v-if="numpage !== 3">
                        <div class="col-4 text-grey-6">หน่วยงาน/ส่วนราชการ</div>
                        <div class="col-8">{{ formDetail.nodeName }}</div>
                      </div>
                      <div class="col-12 row" v-if="numpage === 1">
                        <div class="col-4 text-grey-6">ยุทธศาสตร์/แผน</div>
                        <div class="col-8">{{ formDetail.strategyName }}</div>
                      </div>

                      <div class="col-12 row">
                        <div class="col-4 text-grey-6">ลำดับ/รหัสตัวชี้วัด</div>
                        <div class="col-8">
                          <q-input
                            v-if="numpage === 3"
                            outlined
                            :readonly="checkDetail"
                            v-model="formDetail.including"
                            bg-color="white"
                            dense
                            class="inputgreen"
                            :rules="[
                              (val:string) =>
                                !!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`,
                            ]"
                            lazy-rules
                            hide-bottom-space
                          />

                          <div v-else>{{ formDetail.including }}</div>
                        </div>
                      </div>
                      <div class="col-12 row">
                        <div class="col-4 text-grey-6">ชื่อตัวชี้วัด</div>
                        <div class="col-8">
                          <q-input
                            v-if="numpage === 3"
                            outlined
                            :readonly="checkDetail"
                            v-model="formDetail.includingName"
                            bg-color="white"
                            dense
                            class="inputgreen"
                            :rules="[
                              (val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,
                            ]"
                            lazy-rules
                            hide-bottom-space
                          />
                          <div v-else>{{ formDetail.includingName }}</div>
                        </div>
                      </div>
                      <div class="col-12 row">
                        <div class="col-4 text-grey-6">ค่าเป้าหมาย</div>
                        <div class="col-8">
                          <q-input
                            outlined
                            :readonly="checkDetail"
                            v-model="formDetail.target"
                            bg-color="white"
                            dense
                            class="inputgreen"
                            :rules="[
                              (val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
                            ]"
                            hide-bottom-space
                            lazy-rules
                          />
                        </div>
                      </div>
                      <div class="col-12 row">
                        <div class="col-4 text-grey-6">หน่วยนับ</div>
                        <div class="col-8">
                          <q-input
                            outlined
                            v-model="formDetail.unit"
                            bg-color="white"
                            dense
                            :readonly="checkDetail"
                            class="inputgreen"
                            :rules="[
                              (val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,
                            ]"
                            lazy-rules
                            hide-bottom-space
                            reverse-fill-mask
                          />
                        </div>
                      </div>
                      <div class="col-12 row">
                        <div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
                        <div class="col-8">
                          <q-input
                            :readonly="checkDetail"
                            outlined
                            v-model="formDetail.weight"
                            bg-color="white"
                            dense
                            class="inputgreen"
                            :rules="[
                              (val:string) =>
                                !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,
                            ]"
                            hide-bottom-space
                            lazy-rules
                            mask="###"
                          />
                        </div>
                      </div>
                    </div>
                  </q-card>
                </div>
                <div class="col-12">
                  <q-card bordered>
                    <div
                      class="col-12 bg-grey-2 row items-center text-weight-medium"
                    >
                      <div class="col-6 text-center">ระดับคะแนน</div>
                      <div class="col-6 text-center">ผลสำเร็จของงาน</div>
                    </div>
                    <q-separator />
                    <div class="row col-12 items-center q-pa-sm">
                      <div class="col-6 text-center text-body2">5</div>
                      <div class="col-6">
                        <q-input
                          :readonly="checkDetail"
                          v-model="formDetail.achievement5"
                          outlined
                          dense
                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
                          hide-bottom-space
                          class="inputgreen"
                          lazy-rules
                        />
                      </div>
                    </div>
                    <q-separator />
                    <div class="row col-12 items-center q-pa-sm">
                      <div class="col-6 text-center text-body2">4</div>
                      <div class="col-6 text-center text-primary">
                        <q-input
                          :readonly="checkDetail"
                          v-model="formDetail.achievement4"
                          outlined
                          dense
                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
                          hide-bottom-space
                          class="inputgreen"
                          lazy-rules
                        />
                      </div>
                    </div>
                    <q-separator />
                    <div class="row col-12 items-center q-pa-sm">
                      <div class="col-6 text-center text-body2">3</div>
                      <div class="col-6 text-center text-primary">
                        <q-input
                          :readonly="checkDetail"
                          v-model="formDetail.achievement3"
                          outlined
                          dense
                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
                          hide-bottom-space
                          class="inputgreen"
                          lazy-rules
                        />
                      </div>
                    </div>
                    <q-separator />
                    <div class="row col-12 items-center q-pa-sm">
                      <div class="col-6 text-center text-body2">2</div>
                      <div class="col-6 text-center text-primary">
                        <q-input
                          :readonly="checkDetail"
                          v-model="formDetail.achievement2"
                          outlined
                          dense
                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
                          hide-bottom-space
                          class="inputgreen"
                          lazy-rules
                        />
                      </div>
                    </div>
                    <q-separator />
                    <div class="row col-12 items-center q-pa-sm">
                      <div class="col-6 text-center text-body2">1</div>
                      <div class="col-6 text-center text-primary">
                        <q-input
                          :readonly="checkDetail"
                          v-model="formDetail.achievement1"
                          outlined
                          dense
                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
                          hide-bottom-space
                          class="inputgreen"
                          lazy-rules
                        />
                      </div>
                    </div>
                  </q-card>
                </div>
                <div class="col-12">
                  <q-input
                    v-model="formDetail.meaning"
                    label="นิยามหรือความหมายของตัวชี้วัด"
                    type="textarea"
                    outlined
                    :readonly="checkDetail"
                    dense
                    :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
                    hide-bottom-space
                    class="inputgreen"
                    lazy-rules
                  />
                </div>

                <div class="col-12">
                  <q-input
                    v-model="formDetail.formula"
                    label="สูตรคำนวณ"
                    type="textarea"
                    :readonly="checkDetail"
                    outlined
                    dense
                    :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
                    hide-bottom-space
                    class="inputgreen"
                    lazy-rules
                  />
                </div>

                <div class="col-12">
                  <q-input
                    v-model="formDetail.documentInfoEvidence"
                    label="ข้อมูลเอกสารหลักฐาน"
                    type="textarea"
                    outlined
                    dense
                    :readonly="checkDetail"
                    :rules="[(val:string) => !!val || `${'กรุณากรอกข้อมูลเอกสารหลักฐาน'}`,]"
                    hide-bottom-space
                    class="inputgreen"
                    lazy-rules
                  />
                </div>
                <div class="col-3">
                  <datepicker
                    v-model="formDetail.startDate"
                    :locale="'th'"
                    :readonly="checkDetail"
                    autoApply
                    :enableTimePicker="false"
                    week-start="0"
                    @update:model-value="formDetail.endDate = null"
                  >
                    <template #year="{ year }">{{ year + 543 }}</template>
                    <template #year-overlay-value="{ value }">{{
                      parseInt(value + 543)
                    }}</template>
                    <template #trigger>
                      <q-input
                        :readonly="checkDetail"
                        dense
                        outlined
                        class="inputgreen"
                        :model-value="
                          formDetail.startDate
                            ? date2Thai(formDetail.startDate)
                            : null
                        "
                        :label="`${'ช่วงเวลาเริ่มต้น'}`"
                        hide-bottom-space
                      >
                        <template v-slot:prepend>
                          <q-icon
                            name="event"
                            class="cursor-pointer"
                            style="color: var(--q-primary)"
                          >
                          </q-icon>
                        </template>
                        <template v-slot:append>
                          <q-icon
                            v-if="formDetail.startDate !== null"
                            name="cancel"
                            class="cursor-pointer"
                            @click="formDetail.startDate = null"
                          />
                        </template>
                      </q-input>
                    </template>
                  </datepicker>
                </div>
                <div class="col-3">
                  <datepicker
                    v-model="formDetail.endDate"
                    :locale="'th'"
                    :readonly="checkDetail"
                    autoApply
                    :enableTimePicker="false"
                    week-start="0"
                    :min-date="formDetail.startDate"
                  >
                    <template #year="{ year }">{{ year + 543 }}</template>
                    <template #year-overlay-value="{ value }">{{
                      parseInt(value + 543)
                    }}</template>
                    <template #trigger>
                      <q-input
                        dense
                        :readonly="checkDetail"
                        outlined
                        class="inputgreen"
                        :model-value="
                          formDetail.endDate
                            ? date2Thai(formDetail.endDate)
                            : null
                        "
                        :label="`${'ช่วงเวลาสิ้นสุด'}`"
                        hide-bottom-space
                      >
                        <template v-slot:prepend>
                          <q-icon
                            name="event"
                            class="cursor-pointer"
                            style="color: var(--q-primary)"
                          >
                          </q-icon>
                        </template>
                        <template v-slot:append>
                          <q-icon
                            v-if="formDetail.endDate !== null"
                            name="cancel"
                            class="cursor-pointer"
                            @click="formDetail.endDate = null"
                          />
                        </template>
                      </q-input>
                    </template>
                  </datepicker>
                </div>
              </div>
            </div>
          </div>
        </q-card-section>
        <q-separator v-if="!checkDetail" />

        <q-card-actions
          v-if="!checkDetail"
          align="right"
          class="bg-white text-teal"
        >
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.my-menu-link {
  background: #ebf9f7 !important;
  color: #1bb19ab8 !important;
  border: 0;
}
.no-shadow {
  box-shadow: none !important;
}
.lineRight {
  border-right: 1px solid #ededed !important;
}
.lineTop {
  border-top: 1px solid #ededed !important;
}
.card-box {
  border: 1px solid #ededed !important;
  border-radius: 8px;
}
</style>
