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

import type { FileLists } from "@/modules/11_discipline/interface/index/Main";

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

const $q = useQuasar();

const mixin = useCounterMixin();
const { showLoader, hideLoader, success, messageError } = mixin;

const fileRef = ref<Object | null>(null);
const file = ref<any>();

/** รับ props มาจากหน้าหลัก */
const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    default: "อัปโหลด",
  },
  label: {
    type: String,
    default: "ไฟล์เอกสาร",
  },
  files: {
    type: Array as () => FileLists[],
    default: [],
  },
  uploadType: {
    type: String,
    required: true,
    default: "support",
  },
  type: {
    type: String,
    required: true,
  },
  fetchData: {
    type: Function,
    default: () => "",
  },
});

/**
 * อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา
 */
async function uploadFile() {
  console.log("test");

  const Data = new FormData();
  Data.append("file", file.value);
  showLoader();
  await http
    .put(config.API.disciplineDoc(props.type, props.id), Data)
    .then(() => {
      file.value = null;
      success($q, "บันทึกข้อมูลสำเร็จ");
      props.fetchData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}
async function removeFile(id: string) {
  showLoader();
  await http
    .delete(config.API.disciplineByIdDoc(props.type, props.id, id))
    .then(() => {
      success($q, "ลบข้อมูลสำเร็จ");
      props.fetchData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}

/**
 * เปิดลิงค์ไฟล์
 * @param link รับมาเป็น https ลิงค์
 */
function downloadFile(link: string) {
  window.open(link, "_blank");
}
</script>

<template>
  <q-card flat class="q-pa-md q-mt-sm">
    <div class="col-12 row q-col-gutter-md">
      <div class="row col-12">
        <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
          <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
            {{ title }}
          </div>
          <div class="col-12"><q-separator /></div>
          <div class="col-xs-12 q-pa-sm row">
            <q-file
              class="col-11 q-mt-sm"
              outlined
              dense
              ref="fileRef"
              for="#files"
              v-model="file"
              :label="label"
              hide-bottom-space
              lazy-rules
              accept=".pdf,.xlsx,.doc"
            >
              <template v-slot:prepend>
                <q-icon name="attach_file" />
              </template>
            </q-file>
            <div class="col-1 self-center">
              <q-btn
                size="14px"
                flat
                round
                dense
                color="add"
                class="q-ml-sm q-mt-sm"
                icon="mdi-upload"
                @click="uploadFile()"
                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
              >
            </div>
          </div>

          <div class="col-xs-12 q-pa-sm row" v-if="props.files">
            <q-list
              v-if="props.files.length > 0"
              bordered
              separator
              class="full-width"
            >
              <q-item
                v-for="(f, index) in props.files"
                :key="index"
                clickable
                v-ripple
              >
                <q-item-section>{{ f.fileName }}</q-item-section>
                <q-item-section avatar>
                  <div class="row">
                    <div>
                      <q-btn
                        dense
                        flat
                        round
                        size="12px"
                        color="blue"
                        icon="mdi-download-outline"
                        @click="downloadFile(f.pathName)"
                      >
                        <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
                      </q-btn>
                    </div>
                    <div>
                      <q-btn
                        dense
                        flat
                        round
                        size="12px"
                        color="red"
                        icon="mdi-delete-outline"
                        @click="removeFile(f.id)"
                        ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
                      >
                    </div>
                  </div>
                </q-item-section>
              </q-item>
            </q-list>
          </div>
        </q-card>
      </div>
    </div>
  </q-card>
</template>
