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

/** importComponents*/
import BasicInfo from "@/modules/15_development/components/BasicInfo.vue"; // ข้อมูลเบื้องต้น
import Target from "@/modules/15_development/components/Target.vue"; // เป้าหมาย
import ProjectDetail from "@/modules/15_development/components/ProjectDetail.vue"; // ลักษณะโครงการ
import FollowResult from "@/modules/15_development/components/FollowResult.vue"; // การติดตามประเมินผล
import Other from "@/modules/15_development/components/Other.vue"; // อื่นๆ
import Record from "@/modules/15_development/components/Record.vue"; // บันทึกผล

/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";

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

const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
const projectId = ref<string>(route.params.id.toLocaleString());
const tab = ref<string>("BasicInfo");
const status = ref<string>("ONGOING");

/**
 * function fetch สถานะ Project
 * @param id projectId
 */
function getStatus(id: string) {
  showLoader();
  http
    .get(config.API.developmentMainStatus(id))
    .then((res) => {
      status.value = res.data.result.status;
      store.projectStatus = res.data.result.status;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** function ยืนยันการเสร็จสิ้นโครงการ*/
function onFinish(id: string) {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      http
        .get(config.API.developmentMainFinish(id))
        .then(() => {
          getStatus(id);
          success($q, "บันทึกข้อมูลสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการเสร็จสิ้นโครงการ",
    "ต้องการยืนยันการเสร็จสิ้นโครงการนี้ใช่หรือไม่?"
  );
}

/** hooklifecycle*/
onMounted(() => {
  projectId.value && getStatus(projectId.value);
});
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      flat
      round
      dense
      class="q-mr-sm"
      icon="mdi-arrow-left"
      color="primary"
      @click="router.push('/development')"
    />
    {{ `${title}โครงการ/หลักสูตรการฝึกอบรม` }}
    <q-space />
    <q-btn
      v-if="status === 'ONGOING'"
      unelevated
      label="เสร็จสิ้นโครงการ"
      color="green"
      @click="onFinish(projectId)"
    >
      <q-tooltip>เสร็จสิ้นโครงการ</q-tooltip>
    </q-btn>
    <q-badge v-else outline color="primary" class="q-px-sm q-py-xs"
      >เสร็จสิ้นโครงการ</q-badge
    >
  </div>

  <q-card flat bordered class="col-12">
    <q-tabs
      v-model="tab"
      dense
      align="left"
      inline-label
      class="rounded-borders"
      indicator-color="primary"
      active-bg-color="teal-1"
      active-class="text-primary"
    >
      <q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
      <q-tab name="Target" label="เป้าหมาย" />
      <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
      <q-tab name="FollowResult" label="การติดตามประเมินผล" />
      <q-tab name="Other" label="อื่นๆ" />
      <q-tab name="Record" label="บันทึกผล" />
    </q-tabs>
    <q-separator />
    <div class="q-pa-sm" style="padding: 0px">
      <q-tab-panels v-model="tab" animated>
        <q-tab-panel style="padding: 0px" name="BasicInfo">
          <BasicInfo />
        </q-tab-panel>
        <q-tab-panel name="Target"> <Target /></q-tab-panel>
        <q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
        <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
        <q-tab-panel name="Other"> <Other /> </q-tab-panel>
        <q-tab-panel name="Record"> <Record /> </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-card>
</template>

<style scoped></style>
