<script setup lang="ts">
import { ref } 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,
  dialogRemove,
  downloadRenameFileByLink,
} = 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: () => "",
  },
  returnCount: {
    type: Function,
    default: () => "",
  },
  isReadonly: {
    type: Boolean,
  },
});

/**
 * อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา
 */
async function uploadFile() {
  if (props.type === "relevant") {
    props.returnCount(2);
  } else if (props.type === "summaryEvidence") {
    props.returnCount(3);
  } else if (props.type === "recordAccuser") {
    props.returnCount(4);
  } else if (props.type === "witnesses") {
    props.returnCount(5);
  } else if (props.type === "other") {
    props.returnCount(6);
  }
  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;
      props.fetchData();
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}

/**
 * pop up ลบไฟล์
 * @param id id ของไฟล์ที่จะลบ
 */
function popupRemove(id: string) {
  dialogRemove($q, () => removeFile(id));
}

/**
 * ฟังชั่นลบไฟล์
 * @param id id ของไฟล์
 */
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>
  <div>
    <q-card bordered style="border: 1px solid #d6dee1">
      <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
        {{ title }}
      </div>
      <div class="col-12"><q-separator /></div>
      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
        <div v-if="!isReadonly" class="col-12">
          <q-file
            outlined
            dense
            ref="fileRef"
            for="#files"
            v-model="file"
            :label="label"
            hide-bottom-space
            lazy-rules
            accept=".pdf,.xlsx,.docx,.png,.jpg"
          >
            <template v-slot:prepend>
              <q-icon name="attach_file" />
            </template>
            <template v-slot:after>
              <q-btn
                v-if="file"
                size="14px"
                flat
                round
                dense
                color="add"
                icon="mdi-upload"
                @click="uploadFile()"
                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
              >
            </template>
          </q-file>
        </div>

        <div v-if="props.files.length > 0" class="col-xs-12 row">
          <q-list bordered separator class="full-width rounded-borders">
            <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
                      color="blue"
                      icon="mdi-download"
                      @click="downloadRenameFileByLink(f.pathName, f.fileName)"
                    >
                      <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
                    </q-btn>
                  </div>
                  <div>
                    <q-btn
                      v-if="!isReadonly"
                      dense
                      flat
                      round
                      color="red"
                      icon="mdi-delete"
                      @click="popupRemove(f.id)"
                      ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
                    >
                  </div>
                </div>
              </q-item-section>
            </q-item>
          </q-list>
        </div>

        <div class="col-12" v-if="props.files.length == 0">
          <q-card class="q-py-sm q-px-md" bordered> ไม่มีรายการเอกสาร </q-card>
        </div>
      </div>
    </q-card>
  </div>
</template>
