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

import http from "@/plugins/http";
import config from "@/app.config";
import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ

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

const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;

const sendStep = ref<number>(1);
const fileUpload = ref<any>(null);
const document = ref<string>("");
/**
 * function อัปโหลดไฟล์เจ้าหน้าที่
 * @param event file
 */
async function uploadFile(event: any) {
  dialogConfirm(
    $q,
    async () => {
      const selectedFile = event;
      const formdata = new FormData();
      formdata.append("Document", selectedFile);
      // await http
      //   .put(config.API.uploadfileOnlyInsignia(requestId.value), formdata)
      //   .then(async () => {
      //     await fecthInsigniaByOc(
      //       round.value,
      //       DataStore.agency,
      //       "officer",
      //       tab.value
      //     );
      //     success($q, "อัปโหลดไฟล์สำเร็จ");
      //     fileUpload.value = null;
      //   })
      //   .catch((err) => {
      //     messageError($q, err);
      //   }),
    },
    "ยืนยันการอัปโหลดไฟล์",
    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
  );
}

function sendToDirector() {}
</script>

<template>
  <div class="row col-12 q-pa-md">
    <q-toolbar class="text-primary">
      <div>
        <q-file
          v-if="sendStep == 1"
          bg-color="white"
          clearable
          outlined
          dense
          v-model="fileUpload"
          accept=".pdf"
          label="อัปโหลดไฟล์"
        >
          <template v-slot:prepend>
            <q-icon color="light-blue" name="attach_file" />
            <q-tooltip>อัปโหลดไฟล์</q-tooltip>
          </template>
        </q-file>

        <q-btn
          flat
          color="light-blue"
          icon="upload"
          @click="uploadFile(fileUpload)"
          v-if="fileUpload !== null"
        />
        <div v-if="document">
          <q-btn
            dense
            color="primary"
            icon-right="mdi-download"
            label="ดาวน์โหลดไฟล์"
            outline
            :href="document"
            target="_blank"
          >
            <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
          >
        </div>
      </div>
      <q-toolbar-title>
        <!-- Toolbar -->
      </q-toolbar-title>
      <div>
        <!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
        <q-btn
          v-if="sendStep == 1"
          unelevated
          color="public"
          label="ส่งเอกสารให้ ผอ. ตรวจสอบ"
          @click="sendToDirector()"
        />

        <!-- ผอ. หน่วยงานทำการยืนยันและส่งให้ สกจ. -->
        <q-btn
          v-if="sendStep == 2"
          unelevated
          color="public"
          label="ยืนยันและส่งเอกสารให้ สกจ."
          @click="sendToDirector()"
        />

        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา ไม่มีปรับโควต้า -->
        <q-btn
          v-if="sendStep == 3"
          unelevated
          color="public"
          label="ยืนยันการตรวจสอบ"
          @click="sendToDirector()"
        />

        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา มีปรับโควต้า -->
        <q-btn
          v-if="sendStep == 4"
          unelevated
          color="public"
          label="ส่งคำแนะนำให้ ผอ. ตรวจสอบ"
          @click="sendToDirector()"
        />

        <!-- ผอ.หน่วยงานส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน -->
        <q-btn
          v-if="sendStep == 5"
          unelevated
          color="public"
          label="ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน"
          @click="sendToDirector()"
        />
      </div>
    </q-toolbar>
  </div>
</template>

<style lang="scss" scoped></style>
