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

/**
 * importType
 */
import type { QTableProps } from "quasar";
import type { DataOption } from "@/modules/15_development/interface/index/Main";
import type { FormIndicators } from "@/modules/15_development/interface/request/FollowResult";
import type { DevelopmentEvaluations } from "@/modules/15_development/interface/response/FollowResult";

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

/**
 * importStore
 */
import { useCounterMixin } from "@/stores/mixin";

/**
 * use
 */
const $q = useQuasar();
const route = useRoute();
const {
  showLoader,
  hideLoader,
  dialogConfirm,
  dialogRemove,
  messageError,
  success,
} = useCounterMixin();

/**
 * props
 */
const status = defineModel<string>("status", { required: true });
const isChangeData = defineModel<boolean>("isChangeData", { required: true });
const props = defineProps({
  prevStep: { type: Function, required: true },
  nextStep: { type: Function, required: true },
  onCheckChangeData: { type: Function, required: true },
});

const projectId = ref<string>(route.params.id.toLocaleString());
const checkRoutePermission = ref<boolean>(
  route.name == "developmentDetailPage"
);
const step = ref<string>("");

/***** ตัวชี้วัดความสำเร็จ ******/
const modalDialog = ref<boolean>(false); //popup ตัวชี้วัด
const isEdit = ref<boolean>(false); // check edit
const indicatorId = ref<string>(""); //id ตัวชี้วัด
const typeAction = ref<string>(""); //แยกประเภท ผลการดำเนินการ /แก้ไขตัวชี้วัด /เพิ่มตัวชี้วัด
const formIndicators = reactive<FormIndicators>({
  indicators: "", //ตัวชี้วัด
  target: null, //เป้าหมาย
  metricType: "", //ประเภทตัวชี้วัด
  calculation: "", //วิธีการคำนวณ/เครื่องมือ
  measuRement: "", //ระยะเวลาวัดผล
  results: "", //ผลการดำเนิดการ
  obstacles: "",
  suggestions: "",
});
/** ข้อมูล Table */
const rows = ref<DevelopmentEvaluations[]>([]); // ข้อมูลรายการ
const progressTracking = ref<string>(""); //การติดตามความก้าวหน้า
const projectEvaluation = ref<string>(""); // การประเมินผลโครงการ

const columns = ref<QTableProps["columns"]>([
  {
    name: "indicators",
    align: "left",
    label: "ชื่อตัวชี้วัด",
    sortable: true,
    field: "indicators",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px ;",
  },
  {
    name: "target",
    align: "left",
    label: "ค่าเป้าหมาย",
    sortable: true,
    field: "target",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; ",
  },

  {
    name: "metricType",
    align: "left",
    label: "ประเภทตัวชี้วัด",
    sortable: true,
    field: "metricType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px ;  ",
  },
  {
    name: "calculation",
    align: "left",
    label: "วิธีการคำนวณ/เครื่องมือในการใช้วัด",
    sortable: true,
    field: "calculation",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px ; ",
  },
  {
    name: "measuRement",
    align: "left",
    label: "ระยะเวลา",
    sortable: true,
    field: "measuRement",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px ; ",
  },
  {
    name: "results",
    align: "left",
    label: "ผลการดำเนินการ",
    sortable: true,
    field: "results",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px ; ",
  },
]);
// ประเภทตัวชี้วัด
const metricTypeOp = ref<DataOption[]>([
  {
    id: "1",
    name: "ตัวชี้วัดความสำเร็จระดับผลผลิต (เป้าหมาย)",
  },
  {
    id: "2",
    name: "ตัวชี้วัดความสำเร็จระดับผลลัพธ์ (วัตถุประสงค์)",
  },
  {
    id: "3",
    name: "ตัวชี้วัดความสำเร็จระดับผลกระทบ (ประโยชน์ที่คาดว่าจะได้รับ)",
  },
]);

/**
 * ดึงข้อมูลการติดตามผลและการประเมิน
 */
function fetchData() {
  showLoader();
  http
    .get(config.API.developmentMainTab("tab4", projectId.value))
    .then((res) => {
      const data = res.data.result;
      rows.value = data.developmentEvaluations;
      progressTracking.value = data.progressTracking;
      projectEvaluation.value = data.projectEvaluation;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
      isChangeData.value = false;
    });
}

/**
 * บันทึก การติดตามความก้าวหน้า,การประเมินผลโครงการ
 */
function onSubmit() {
  showLoader();
  http
    .put(config.API.developmentMainTab("tab4", projectId.value), {
      progressTracking: progressTracking.value,
      projectEvaluation: projectEvaluation.value,
    })
    .then(() => {
      !modalDialog.value && success($q, "บันทึกข้อมูลแล้ว");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
      isChangeData.value = false;
    });
}

/**
 * เปิด dialog add/edit
 * @param statusEdit true/false
 * @param data data => EDIT
 */
function onClickAddIndicator(
  statusEdit: boolean = false,
  data: DevelopmentEvaluations | null = null,
  type: string = ""
) {
  modalDialog.value = true;
  isChangeData.value && onSubmit();
  isEdit.value = statusEdit;
  typeAction.value = type;
  if (statusEdit) {
    if (data) {
      indicatorId.value = data.id;
      formIndicators.indicators = data.indicators;
      formIndicators.target = data.target;
      formIndicators.metricType = data.metricType;
      formIndicators.calculation = data.calculation;
      formIndicators.measuRement = data.measuRement;
      formIndicators.results = data.results;
      formIndicators.obstacles = data.obstacles;
      formIndicators.suggestions = data.suggestions;
    }
  }
}

/**
 * บันทึกตัวชี้วัดความสำเร็จ
 */
function onSubmitIndicators() {
  formIndicators.target = formIndicators.target
    ? Number(formIndicators.target)
    : formIndicators.target;

  const id = isEdit.value ? indicatorId.value : projectId.value;
  const path = isEdit.value ? "tab4_1_edit" : "tab4_1_add";
  dialogConfirm($q, () => {
    showLoader();
    http
      .put(config.API.developmentMainTab(path, id), {
        ...formIndicators,
        results: status.value === "FINISH" ? formIndicators.results : undefined,
      })
      .then(() => {
        success($q, "บันทึกข้อมูลสำเร็จ");
        fetchData();
        closeDialog();
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ลบตัวชี้วัดความสำเร็จ
 */
function onClickDeleteIndicator(id: string) {
  dialogRemove($q, () => {
    showLoader();
    http
      .delete(config.API.developmentMainTab("tab4_1", id))
      .then(() => {
        fetchData();
        success($q, "ลบข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * close Dialog and Clear
 */
function closeDialog() {
  modalDialog.value = false;
  formIndicators.indicators = "";
  formIndicators.target = null;
  formIndicators.metricType = "";
  formIndicators.calculation = "";
  formIndicators.measuRement = "";
  formIndicators.results = "";
  formIndicators.obstacles = "";
  formIndicators.suggestions = "";
}

/**
 * function ไปยัง Tab ค่อไป
 */
function onNextTab() {
  step.value == "next" ? props.nextStep() : props.prevStep();
}

/** fetchData in page  */
onMounted(() => {
  fetchData();
});

/**
 * เรียก function ไปใช่หน้าหลัก
 */
defineExpose({
  onSubmit,
});
</script>

<template>
  <q-form greedy @submit.prevent @validation-success="onNextTab">
    <div class="q-pa-sm q-my-sm">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div
          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
        >
          ตัวชี้วัดความสำเร็จ
          <q-btn
            v-if="!checkRoutePermission"
            dense
            flat
            round
            color="primary"
            icon="add"
            @click="onClickAddIndicator()"
          >
            <q-tooltip>เพิ่มตัวชี้วัดความสำเร็จ</q-tooltip>
          </q-btn>
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="col-12 q-pa-md">
          <d-table
            for="table"
            ref="table"
            :columns="columns"
            :rows="rows"
            row-key="id"
            flat
            bordered
            dense
            class="custom-header-table"
            :rows-per-page-options="[10, 25, 50, 100]"
          >
            <template v-slot:header="props">
              <q-tr :props="props">
                <q-th auto-width />
                <q-th v-for="col in props.cols" :key="col.name" :props="props">
                  <span class="text-weight-medium">{{ col.label }}</span>
                </q-th>
              </q-tr>
            </template>
            <template v-slot:body="props">
              <q-tr :props="props">
                <q-td>
                  <q-btn
                    v-if="!checkRoutePermission && status === 'FINISH'"
                    dense
                    flat
                    round
                    color="public"
                    icon="mdi-content-save-edit-outline"
                    @click="onClickAddIndicator(true, props.row, 'result')"
                  >
                    <q-tooltip>แก้ไขตัวชี้วัดความสำเร็จ</q-tooltip>
                  </q-btn>
                  <q-btn
                    v-if="!checkRoutePermission"
                    dense
                    flat
                    round
                    color="edit"
                    icon="edit"
                    @click="onClickAddIndicator(true, props.row)"
                  >
                    <q-tooltip>แก้ไขตัวชี้วัดความสำเร็จ</q-tooltip>
                  </q-btn>
                  <q-btn
                    v-if="!checkRoutePermission"
                    dense
                    flat
                    round
                    color="red"
                    icon="delete"
                    @click="onClickDeleteIndicator(props.row.id)"
                  >
                    <q-tooltip>ลบ</q-tooltip>
                  </q-btn>
                </q-td>

                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                  <div>
                    {{ col.value ? col.value : "-" }}
                  </div>
                </q-td>
              </q-tr>
            </template>
          </d-table>
        </div>
      </q-card>

      <!-- การติดตามความก้าวหน้า -->
      <q-card bordered class="col-12 q-my-sm q-mt-md">
        <div
          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
        >
          การติดตามความก้าวหน้า
        </div>
        <q-separator />
        <q-card-section>
          <div class="row col-12 q-col-gutter-sm">
            <div class="col-12">
              <q-input
                outlined
                :readonly="checkRoutePermission"
                dense
                class="inputgreen"
                v-model="progressTracking"
                label="การติดตามความก้าวหน้า"
                type="textarea"
                @update:model-value="props.onCheckChangeData()"
              />
            </div>
          </div>
        </q-card-section>
      </q-card>

      <!-- การประเมินผลโครงการ -->
      <q-card bordered class="col-12 q-my-sm q-mt-md">
        <div
          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
        >
          การประเมินผลโครงการ
        </div>
        <q-separator />
        <q-card-section>
          <div class="row col-12 q-col-gutter-sm">
            <div class="col-12">
              <q-input
                outlined
                :readonly="checkRoutePermission"
                dense
                class="inputgreen"
                v-model="projectEvaluation"
                label="การประเมินผลโครงการ"
                type="textarea"
                @update:model-value="props.onCheckChangeData()"
              />
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
    <!--CARD ตัวชี้วัดความสำเร็จ -->
    <q-separator />

    <q-card-actions align="center">
      <div class="text-center q-pa-sm" v-if="!checkRoutePermission">
        <q-btn
          rounded
          label="ก่อนหน้า"
          icon="mdi-chevron-left"
          id="onSubmit"
          type="submit"
          color="public"
          class="q-mr-xs"
          style="width: 120px"
          @click="step = 'prev'"
        >
        </q-btn>
        <q-btn
          rounded
          label="ถัดไป"
          icon-right="mdi-chevron-right"
          id="onSubmit"
          type="submit"
          color="public"
          class="q-ml-xs"
          style="width: 120px"
          @click="step = 'next'"
        >
        </q-btn>
      </div>
    </q-card-actions>
  </q-form>

  <q-dialog v-model="modalDialog" persistent>
    <q-card style="width: 900px; max-width: 80vw">
      <q-form greedy @submit.prevent @validation-success="onSubmitIndicators">
        <DialogHeader
          :tittle="
            isEdit && typeAction === 'result'
              ? 'ผลการดำเนินการ'
              : isEdit
              ? 'แก้ไขตัวชี้วัด'
              : 'เพิ่มตัวชี้วัด'
          "
          :close="closeDialog"
        />
        <q-separator />
        <q-card-section>
          <div
            class="row q-col-gutter-sm"
            v-if="status === 'FINISH' && typeAction === 'result'"
          >
            <div class="col-12">
              <q-input
                dense
                outlined
                class="inputgreen"
                label="ผลการดำเนิดการ"
                v-model="formIndicators.results"
                hide-bottom-space
                lazy-rules
                :rules="[
                  (val:string) =>
                    !!val || `${'กรุณากรอกผลการดำเนิดการ'}`,
      
                ]"
                type="textarea"
              />
            </div>
          </div>

          <div class="row q-col-gutter-sm" v-else>
            <div class="col-12">
              <q-input
                dense
                outlined
                class="inputgreen"
                label="ชื่อตัวชี้วัด"
                v-model="formIndicators.indicators"
                hide-bottom-space
                lazy-rules
                :rules="[
                  (val:string) =>
                    !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,
      
                ]"
              />
            </div>
            <div class="col-6">
              <q-select
                dense
                outlined
                label="ประเภทตัวชี้วัด"
                v-model="formIndicators.metricType"
                :options="metricTypeOp"
                option-label="name"
                option-value="name"
                emit-value
                map-options
                class="inputgreen"
                hide-bottom-space
                lazy-rules
                :rules="[
                  (val:string) =>
                    !!val || `${'กรุณาเลือกประเภทตัวชี้วัด'}`,
      
                ]"
              />
            </div>

            <div class="col-6">
              <q-input
                dense
                outlined
                class="inputgreen"
                label="ค่าเป้าหมาย"
                v-model="formIndicators.target"
                mask="#"
                reverse-fill-mask
                hide-bottom-space
                lazy-rules
                :rules="[
                  (val:string) =>
                    !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
      
                ]"
              />
            </div>
            <div class="col-12">
              <q-input
                outlined
                dense
                class="inputgreen"
                v-model="formIndicators.calculation"
                hide-bottom-space
                label="วิธีการคำนวณ/เครื่องมือ"
                type="textarea"
              />
            </div>
            <div class="col-12">
              <q-input
                outlined
                dense
                class="inputgreen"
                v-model="formIndicators.measuRement"
                hide-bottom-space
                label="ระยะเวลาวัดผล"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn
            unelevated
            label="บันทึก"
            id="onSubmit"
            type="submit"
            color="public"
            class="q-px-md"
          >
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
