<script setup lang="ts">
import { onMounted, reactive, ref } 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 {
  FormData,
  FormAcademic,
} from "@/modules/15_development/interface/request/Other";

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

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

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

const projectId = ref<string>(route.params.id.toLocaleString()); //id route
const checkRoutePermission = ref<boolean>(
  route.name == "developmentDetailPage"
); //check ชื่อ route

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

/****** ข้อมูลด้านวิชาการ  *****/
const modalAcademic = ref<boolean>(false);
const isEdit = ref<boolean>(false);
const academicId = ref<string>("");
const formAcademic = reactive<FormAcademic>({
  topicAcademic: "",
  addressAcademic: "",
  provinceActualId: "",
});
const provinceOp = ref<DataOption[]>([]);
const provinceOpMain = ref<DataOption[]>([]);

/** ข้อมูล Table */
const rows = ref<any[]>([]); // ข้อมูลรายการ
const columns = ref<QTableProps["columns"]>([
  {
    name: "topicAcademic",
    align: "left",
    label: "หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน",
    sortable: true,
    field: "topicAcademic",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px ;",
  },
  {
    name: "addressAcademic",
    align: "left",
    label: "สถานที่ฝึกอบรม ศึกษาดูงาน",
    sortable: true,
    field: "addressAcademic",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px; ",
  },

  {
    name: "provinceActualId",
    align: "left",
    label: "จังหวัด",
    sortable: true,
    field: (v) => {
      const province = provinceOpMain.value.find(
        (e) => e.id === v.provinceActualId
      );
      return province ? province.name : null;
    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px ;  ",
  },
]);

const projectOp = ref<DataOption[]>([
  {
    id: "OFFER",
    name: "โครงการที่เสนอขอ TN",
  },
  {
    id: "NOOFFER",
    name: "โครงการที่ไม่เสนอขอ TN",
  },
]);
const formData = reactive<FormData>({
  isBudget: false,
  isNoPass: false,
  isOutBudget: false,
  isPassAllocate: false,
  isPassNoAllocate: false,
  project: "",
  obstacle: "",
  suggestion: "",
});

/** ดึงข้อมูล จังหวัด */
function getProvince() {
  http
    .get(config.API.province)
    .then((res) => {
      const data = res.data.result;

      provinceOp.value = data.map((item: DataOption) => ({
        id: item.id,
        name: item.name,
      }));
      provinceOpMain.value = provinceOp.value;
    })
    .catch((e) => {
      messageError($q, e);
    });
}

/** ดึงข้อมูล */
function fetchData() {
  showLoader();
  http
    .get(config.API.developmentMainTab("tab5", projectId.value))
    .then((res) => {
      const data = res.data.result;
      rows.value = data.developmentOthers;
      formData.isBudget = data.isBudget;
      formData.isNoPass = data.isNoPass;
      formData.isOutBudget = data.isOutBudget;
      formData.isPassAllocate = data.isPassAllocate;
      formData.isPassNoAllocate = data.isPassNoAllocate;
      formData.project = data.project === null ? "" : data.project;
      formData.obstacle = data.obstacle;
      formData.suggestion = data.suggestion;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
      isChangeData.value = false;
    });
}

/**
 * Fuction Filter จังหวัด
 * @param val ค่าตัวพิมพ์ค้นหา
 * @param update ทุกครั้งที่พิมพ์ค่า
 */
const filterSelector = (val: string, update: Function) => {
  update(() => {
    provinceOp.value = provinceOpMain.value.filter(
      (v: DataOption) => v.name.indexOf(val) > -1
    );
  });
};

/** บันทึกข้อมูล */
function onSubmit() {
  if (formData.project === "NOOFFER") {
    formData.isNoPass = false;
    formData.isPassAllocate = false;
    formData.isPassNoAllocate = false;
  } else {
    formData.isBudget = false;
    formData.isOutBudget = false;
  }

  http
    .put(config.API.developmentMainTab("tab5", projectId.value), formData)
    .then(() => {
      !modalAcademic.value && success($q, "บันทึกข้อมูลแล้ว");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
      isChangeData.value = false;
    });
}

function onClickAddAcademic(status: boolean = false, data: any | null = null) {
  modalAcademic.value = true;
  isChangeData.value && onSubmit();
  isEdit.value = status;
  if (data && status) {
    academicId.value = data.id;
    formAcademic.topicAcademic = data.topicAcademic;
    formAcademic.addressAcademic = data.addressAcademic;
    formAcademic.provinceActualId = data.provinceActualId;
  }
}

function onSubmitAcademic() {
  const path = isEdit.value ? "tab5_1_edit" : "tab5_1_add";
  const id = isEdit.value ? academicId.value : projectId.value;
  dialogConfirm($q, () => {
    showLoader();
    http
      .put(config.API.developmentMainTab(path, id), formAcademic)
      .then(() => {
        fetchData();
        onCloseDialog();
        success($q, "เพิ่มข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
        hideLoader();
      });
  });
}

function onDeleteAcademic(id: string) {
  dialogRemove($q, () => {
    showLoader();
    http
      .delete(config.API.developmentMainTab("tab5_1", id))
      .then(() => {
        fetchData();
        success($q, "ลบข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
        hideLoader();
      });
  });
}

function onCloseDialog() {
  modalAcademic.value = false;
  formAcademic.topicAcademic = "";
  formAcademic.addressAcademic = "";
  formAcademic.provinceActualId = "";
}

/** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
onMounted(() => {
  fetchData();
  getProvince();
});

/**
 * เรียก function ไปใช่หน้าหลัก
 */
defineExpose({
  onSubmit,
});
</script>
<template>
  <q-form greedy @submit.prevent @validation-success="onSubmit">
    <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="onClickAddAcademic()"
          >
            <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"
                    dense
                    flat
                    round
                    color="edit"
                    icon="edit"
                    @click.pervent="onClickAddAcademic(true, props.row)"
                  >
                    <q-tooltip>แก้ไข้อมูล</q-tooltip>
                  </q-btn>
                  <q-btn
                    v-if="!checkRoutePermission"
                    dense
                    flat
                    round
                    color="red"
                    icon="delete"
                    @click.pervent="onDeleteAcademic(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>

      <!--CARD ประเภทของผลการพิจารณาความเหมาะสมโครงการ -->
      <q-card bordered style="border: 1px solid #d6dee1" class="q-mt-md">
        <div
          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
        >
          ประเภทของผลการพิจารณาความเหมาะสมโครงการ
        </div>
        <div class="col-12"><q-separator /></div>

        <div class="row q-pa-md q-col-gutter-sm">
          <div class="col-12 col-sm-6 col-md-4">
            <q-select
              :readonly="checkRoutePermission"
              dense
              outlined
              label="ประเภทโครงการ"
              v-model="formData.project"
              :options="projectOp"
              option-label="name"
              option-value="id"
              hide-bottom-space
              map-options
              emit-value
              class="inputgreen"
              @update:model-value="props.onCheckChangeData()"
            />
          </div>
          <div v-if="formData.project !== ''" class="col-12">
            <div class="row" v-if="formData.project == 'OFFER'">
              <div class="col-12">
                <q-checkbox
                  :disable="checkRoutePermission"
                  v-model="formData.isPassAllocate"
                  label="ผ่านการพิจาณา ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
                  @update:model-value="props.onCheckChangeData()"
                />
              </div>
              <div class="col-12">
                <q-checkbox
                  :disable="checkRoutePermission"
                  v-model="formData.isPassNoAllocate"
                  label="ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
                  @update:model-value="props.onCheckChangeData()"
                />
              </div>

              <div class="col-12">
                <q-checkbox
                  :disable="checkRoutePermission"
                  v-model="formData.isNoPass"
                  label="ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
                  @update:model-value="props.onCheckChangeData()"
                />
              </div>
            </div>
            <div class="row" v-else>
              <div class="col-12">
                <q-checkbox
                  :disable="checkRoutePermission"
                  v-model="formData.isBudget"
                  label="แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
                  @update:model-value="props.onCheckChangeData()"
                />
              </div>
              <div class="col-12">
                <q-checkbox
                  :disable="checkRoutePermission"
                  v-model="formData.isOutBudget"
                  label="แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
                  @update:model-value="props.onCheckChangeData()"
                />
              </div>
            </div>
          </div>
        </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="formData.obstacle"
                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="formData.suggestion"
                label="ข้อเสนอแนะ"
                type="textarea"
                @update:model-value="props.onCheckChangeData()"
              />
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>

    <q-separator />
    <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="() => props.prevStep()"
      >
      </q-btn>
      <q-btn
        rounded
        label="บันทึก"
        id="onSubmit"
        type="submit"
        color="public"
        class="q-ml-xs"
        style="width: 120px"
      >
      </q-btn>
    </div>
  </q-form>

  <q-dialog v-model="modalAcademic" persistent>
    <q-card style="width: 700px; max-width: 80vw">
      <q-form greedy @submit.prevent @validation-success="onSubmitAcademic">
        <DialogHeader
          :tittle="isEdit ? 'แก้ไขข้อมูลด้านวิชาการ' : 'เพิ่มข้อมูลด้านวิชาการ'"
          :close="onCloseDialog"
        />
        <q-separator />

        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <q-input
                outlined
                dense
                :readonly="checkRoutePermission"
                class="inputgreen"
                v-model="formAcademic.topicAcademic"
                label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
                hide-bottom-space
                lazy-rules
                :rules="[
                  (val:string) =>
                    !!val || `${'กรุณากรอกหัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน'}`,
      
                ]"
              />
            </div>
            <div class="col-8">
              <q-input
                outlined
                dense
                :readonly="checkRoutePermission"
                class="inputgreen"
                v-model="formAcademic.addressAcademic"
                label="สถานที่ฝึกอบรม ศึกษาดูงาน"
                hide-bottom-space
                lazy-rules
                :rules="[
                  (val:string) =>
                    !!val || `${'กรุณากรอกสถานที่ฝึกอบรม ศึกษาดูงาน'}`,
      
                ]"
              />
            </div>
            <div class="col-4">
              <q-select
                outlined
                dense
                v-model="formAcademic.provinceActualId"
                label="จังหวัด"
                :readonly="checkRoutePermission"
                :options="provinceOp"
                option-label="name"
                option-value="id"
                emit-value
                map-options
                hide-bottom-space
                class="inputgreen"
                lazy-rules
                :rules="[
                  (val:string) =>
                    !!val || `${'กรุณาเลือกจังหวัด'}`,
      
                ]"
                use-input
                @filter="
        (inputValue:string, doneFn:Function) =>
          filterSelector(inputValue, doneFn, )
      "
                ><template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      ไม่พบข้อมูล
                    </q-item-section>
                  </q-item>
                </template></q-select
              >
            </div>
          </div>
        </q-card-section>

        <q-separator />
        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn label="บันทึก" type="submit" color="public"> </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
