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

import { useRouter, useRoute } from "vue-router";
import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import config from "@/app.config";
import http from "@/plugins/http";

import type { DataOption } from "@/modules/10_registry/interface/index/Main";

import Workflow from "@/components/Workflow/Main.vue";

const $q = useQuasar();
const link = ref<string>("");
const store = useRequestEditStore();
const dataStore = useDataStore();
const router = useRouter();
const route = useRoute();
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();

const requestId = ref<string>(route.params.id.toString());

const dataRequest = ref<any>({
  fullname: "",
  createdAt: null,
  topic: "",
  detail: "",
  status: "",
  remark: "",
});
//ข้อมูลรายการสถานะ
const statusOptionMain = ref<DataOption[]>(
  store.optionStatus.filter((e) => e.id !== "")
);
const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ

async function fetchData() {
  showLoader();
  await http
    .get(config.API.requestEditByType(link.value) + `${requestId.value}`)
    .then(async (res) => {
      const data = await res.data.result;
      dataRequest.value = {
        fullname: data.fullname,
        createdAt: data.createdAt,
        topic: data.topic,
        detail: data.detail,
        status: data.status,
        remark: data.remark,
      };

      await onDownloadFile(requestId.value); // เช็คว่ามีไฟล์อัปโหลดหรือไม่
    })
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    })
    .finally(() => {});
}

const checkFile = ref<null | false | "img" | "doc">(null); // เช็คไฟล์อัปโหลด null ค่าเริ่มต้น, false ไม่มีไฟล์, "img" รูปภาพ, "doc" เอกสาร
const urlDownload = ref<string>(""); // url ไฟล์อัปโหลด

/**
 * function หาชื่อไฟล์
 * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
 */
async function onDownloadFile(id: string) {
  await http
    .get(
      config.API.file(
        "ระบบทะเบียนประวัติ",
        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
        id
      )
    )
    .then(async (res) => {
      if (res.data.length !== 0) {
        await downloadUrl(id, res.data[0].fileName);
      } else {
        checkFile.value = false;
        hideLoader();
      }
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();
    });
}

/**
 * function  โหลดไฟล์
 * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
 * @param fileName  ชื่อไฟล์
 */
async function downloadUrl(id: string, fileName: string) {
  await http
    .get(
      config.API.fileByFile(
        "ระบบทะเบียนประวัติ",
        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
        id,
        fileName
      )
    )
    .then((res) => {
      urlDownload.value = res.data.downloadUrl;
      if (dataRequest.value.topic == "ขอแก้ไขรูปภาพประจำตัว") {
        checkFile.value = "img";
      } else {
        checkFile.value = "doc";
      }
      hideLoader();
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();
    })
    .finally(() => {});
}

onMounted(async () => {
  link.value = await dataStore.getProFileType();
  await fetchData();
});
</script>

<template>
  <div class="row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11">
      <div class="toptitle text-white col-12 row items-center">
        <q-btn
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
          @click="router.push('/registry/request-edit')"
        />
        รายละเอียดคำร้องขอแก้ไขทะเบียนประวัติ
      </div>
      <q-card bordered class="q-pa-md">
        <div class="row">
          <!-- รายละเอียดคำร้องขอแก้ไข -->
          <q-card bordered class="row col-12">
            <div class="bg-grey-1 q-pa-sm col-12 row items-center">
              <div class="q-pl-sm text-weight-bold text-dark">
                รายละเอียดคำร้องขอแก้ไข
              </div>
            </div>
            <div class="col-12"><q-separator /></div>
            <q-card-section class="col-12">
              <div class="row q-col-gutter-sm">
                <!-- วันที่ยื่นขอ -->
                <div class="col-md-2 col-xs-12">
                  <datepicker
                    v-model="dataRequest.createdAt"
                    :locale="'th'"
                    autoApply
                    readonly
                    borderless
                    :enableTimePicker="false"
                    week-start="0"
                  >
                    <template #year="{ year }">
                      {{ year + 543 }}
                    </template>
                    <template #year-overlay-value="{ value }">
                      {{ parseInt(value + 543) }}
                    </template>
                    <template #trigger>
                      <q-input
                        outlined
                        readonly
                        dense
                        hide-bottom-space
                        class="full-width"
                        :model-value="
                          dataRequest.createdAt != null
                            ? date2Thai(dataRequest.createdAt)
                            : null
                        "
                        :label="`${'วันที่ยื่นขอ'}`"
                      >
                        <template v-slot:prepend>
                          <q-icon
                            name="event"
                            class="cursor-pointer"
                            style="color: var(--q-primary)"
                          >
                          </q-icon>
                        </template>
                      </q-input>
                    </template>
                  </datepicker>
                </div>

                <!-- เรื่อง -->
                <div class="col-md-10 col-xs-12">
                  <q-input
                    readonly
                    v-model="dataRequest.topic"
                    label="เรื่องที่ต้องการแก้ไข"
                    dense
                    outlined
                  />
                </div>

                <!-- รายละเอียด -->
                <div class="col-12">
                  <q-input
                    readonly
                    v-model="dataRequest.detail"
                    label="รายละเอียด"
                    dense
                    outlined
                    type="textarea"
                  />
                </div>

                <div v-if="checkFile != null && checkFile != false">
                  <div class="text-weight-bold text-dark col-12">
                    {{
                      checkFile == "img" ? "รูปภาพประจำตัว" : "เอกสารหลักฐาน"
                    }}
                  </div>
                  <div class="col-12">
                    <!-- เอกสารหลักฐาน -->
                    <q-btn
                      v-if="checkFile == 'doc'"
                      icon="mdi-download"
                      dense
                      flat
                      label="ดาวน์โหลดเอกสารหลักฐาน"
                      color="blue"
                      :href="urlDownload"
                      target="_blank"
                    />
                    <div
                      v-else-if="checkFile == 'img'"
                      class="q-pa-md q-gutter-sm"
                    >
                      <q-avatar size="120px" color="grey-4">
                        <img
                          :src="urlDownload"
                          class="bg-grey-3"
                          style="object-fit: cover"
                        />
                      </q-avatar>
                    </div>
                  </div>
                </div>
              </div>
            </q-card-section>
          </q-card>

          <!-- สถานะคำร้อง -->
          <q-card bordered class="row col-12 q-mt-sm">
            <div class="bg-grey-1 q-pa-sm col-12 row items-center">
              <div class="q-pl-sm text-weight-bold text-dark">สถานะคำร้อง</div>
            </div>
            <div class="col-12"><q-separator /></div>
            <q-card-section class="col-12">
              <div class="row q-col-gutter-sm">
                <div class="col-xs-12 col-md-12">
                  <q-select
                    readonly
                    v-model="dataRequest.status"
                    label="สถานะ"
                    dense
                    outlined
                    emit-value
                    map-options
                    :options="statusOption"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
                    lazy-rules
                    hide-bottom-space
                    use-input
                    option-label="name"
                    option-value="id"
                  >
                    <template v-slot:no-option>
                      <q-item>
                        <q-item-section class="text-grey">
                          ไม่มีข้อมูล
                        </q-item-section>
                      </q-item>
                    </template>
                  </q-select>
                </div>

                <div class="col-xs-12 col-md-12">
                  <q-input
                    readonly
                    v-model="dataRequest.remark"
                    label="หมายเหตุ"
                    dense
                    outlined
                    type="textarea"
                    hide-bottom-space
                  />
                </div>
              </div>
            </q-card-section>
            <q-separator />
          </q-card>

          <div class="col-12 q-mt-sm">
            <Workflow
              ref="workflowRef"
              :id="requestId"
              :sys-name="
                dataStore.officerType === 'OFFICER'
                  ? 'REGISTRY_PROFILE'
                  : 'REGISTRY_PROFILE_EMP'
              "
            />
          </div>
        </div>
      </q-card>
    </div>
  </div>
</template>

<style scoped></style>
