<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import config from "@/app.config";
import http from "@/plugins/http";

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

import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";

const $q = useQuasar();
const mixin = useCounterMixin();
const store = useKpiDataStore();

const { showLoader, hideLoader, messageError, dialogConfirm } = mixin;

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

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

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

function fetchIndicators() {
  const nodeId = store.dataProfile.nodeId;
  const node = store.dataProfile.node;
  const kpiPeriodId = store.dataEvaluation.kpiPeriodId;

  showLoader();
  http
    .get(
      config.API.kpiPlan +
        `?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&nodeId=${nodeId}&node=${node}&keyword=${""}`
    )
    .then((res) => {
      listTarget.value = res.data.result.data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function clickList(index: number, id: string) {
  showLoader();
  http
    .get(config.API.kpiPlan + `/${id}`)
    .then((res) => {
      listCheck.value = index;
      const data = res.data.result;
      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.target = data.target;
      formDetail.unit = data.unit;
      formDetail.weight = data.weight;
      formDetail.achievement1 = data.achievement1;
      formDetail.achievement2 = data.achievement2;
      formDetail.achievement3 = data.achievement3;
      formDetail.achievement4 = data.achievement4;
      formDetail.achievement5 = data.achievement5;
      formDetail.meaning = data.meaning;
      formDetail.formula = data.formula;
      formDetail.node = data.node;
      formDetail.nodeId = data.nodeId;
      formDetail.strategy = data.strategy;
      formDetail.strategyId = data.strategyId;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ปิด dialog */
function closeDialog() {
  modal.value = false;
  search.value = "";
  listCheck.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 = "";
}

/** เรียกใช้ class */
function getclass() {
  return "inputgreen";
}

function onSubmit() {
  dialogConfirm($q, () => {});
}

watch(
  () => modal.value,
  () => {
    if (modal.value) {
      fetchIndicators();
    }
  }
);
</script>
<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 70%">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader
          :tittle="
            numpage == 1
              ? 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
              : 'เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
          "
          :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-sm-4 col-md-3 row lineRight"
            >
              <div class="col-12 fit">
                <div class="col-12">
                  <q-input
                    v-model="search"
                    outlined
                    dense
                    label="ค้นหา"
                    :class="getclass()"
                  >
                    <template v-slot:append>
                      <q-icon v-if="search == ''" name="search" />
                      <q-icon
                        v-if="search !== ''"
                        name="clear"
                        class="cursor-pointer"
                        @click="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-4">
                      <span>รหัสตัวชี้วัด</span>
                    </div>
                    <div class="col-4">
                      <span>ชื่อตัวชี้วัด</span>
                    </div>
                  </div>
                  <q-separator />

                  <q-card-section class="q-pa-none">
                    <q-list separator dense>
                      <q-item
                        v-for="(item, index) in listTarget"
                        :key="index"
                        clickable
                        v-ripple
                        :active="listCheck === index"
                        active-class="my-menu-link"
                        @click="clickList(index, item.id)"
                      >
                        <q-item-section class="q-pa-none">
                          <div class="row items-center" style="height: 20px">
                            <div class="col-4">
                              <span>{{ item.including }}</span>
                            </div>
                            <div class="col-4">
                              <span>{{ item.includingName }}</span>
                            </div>
                          </div>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-card-section>
                </q-card>
              </div>
            </div>

            <div class="col-xs-12 col-sm-8 col-md-9 row">
              <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-8">
                  <q-card bordered class="full-height q-pa-sm">
                    <div class="q-pa-sm q-col-gutter-lg">
                      <div class="col-12 row">
                        <div class="col-4 text-grey-6">หน่วยงาน/ส่วนราชการ</div>
                        <div class="col-8">{{ formDetail.nodeId }}</div>
                      </div>
                      <div class="col-12 row">
                        <div class="col-4 text-grey-6">ยุทธศาสตร์ / แผน</div>
                        <div class="col-8">{{ formDetail.strategyId }}</div>
                      </div>

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

        <q-card-actions 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;
}
.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>
