<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { QTableProps } from "quasar";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

const mixin = useCounterMixin();
const { success, messageError, hideLoader, dialogConfirm, showLoader } = mixin;
const fileUpload = ref<any>(null);
const reason = ref<string>("");
const documentTitle = ref<string>("");
const $q = useQuasar();
const filterKeyword = ref<string>("");
const filterDoc = ref<any>(null);

const visibleColumnsReference = ref<String[]>([
  "no",
  "fileName",
  "annotation",
  "file",
]);
const colums2 = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    field: "no",
    sortable: true,
  },
  {
    name: "fileName",
    align: "left",
    label: "ชื่อเอกสาร",
    field: "fileName",
    sortable: true,
  },
  {
    name: "annotation",
    align: "left",
    label: "หมายเหตุ",
    field: "annotation",
    sortable: true,
  },
  {
    name: "file",
    align: "left",
    label: "ไฟล์เอกสาร",
    field: "file",
    sortable: true,
  },
]);
const rows2 = ref<any>([]);

interface TypeData {
  fileName: string;
  reason: string;
  pathName: string;
}
const props = defineProps({
  roundId: {
    type: String,
  },
});

const getRequest = async () => {
  showLoader();
  await http
    .get(config.API.requestDocNote(props.roundId as string))
    .then((res: any) => {
      const data = res.data.result;
      rows2.value = [];
      data.map((item: TypeData) => {
        rows2.value.push({
          fileName: item.fileName,
          annotation: item.reason,
          file: item.pathName,
        });
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const putRequest = async () => {
  showLoader();
  const dataAppend = new FormData();
  dataAppend.append("Name", documentTitle.value);
  dataAppend.append("Reason", reason.value);
  dataAppend.append("File", fileUpload.value);
  await http
    .put(config.API.requestDocNote(props.roundId as string), dataAppend)
    .then(() => {
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      documentTitle.value = "";
      reason.value = "";
      fileUpload.value = null;
      getRequest();
      hideLoader();
    });
};
onMounted(async () => {
  await getRequest();
});
const resetFilterRef = () => {
  filterKeyword.value = "";
  filterDoc.value.focus();
};
const pagination = ref({
  sortBy: "filename",
  descending: true,
  page: 1,
  rowsPerPage: 10,
});
const save = () => {
  dialogConfirm($q, () => putRequest());
};
</script>
<template>
  <Transition>
    <div class="rounded-borders q-pa-md q-mb-md">
      <div class="row col-12">
        <q-card bordered class="col-12 q-pa-md q-mb-sm">
          <div class="row col-12 q-col-gutter-x-sm">
            <div class="col-xs-6 col-md-3">
              <q-file
                class="bg-white"
                outlined
                dense
                v-model="fileUpload"
                label="ไฟล์เอกสาร"
                hide-bottom-space
                lazy-rules
                accept=".pdf"
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" color="primary" />
                </template>
              </q-file>
            </div>
            <div class="col-xs-6 col-md-3">
              <q-input
                class="bg-white"
                outlined
                dense
                lazy-rules
                v-model="documentTitle"
                :label="`${'ชื่อเอกสาร'}`"
                hide-bottom-space
              />
            </div>
            <div class="col-xs-12 col-md-5">
              <q-input
                class="bg-white"
                outlined
                dense
                lazy-rules
                v-model="reason"
                :label="`${'หมายเหตุ'}`"
                hide-bottom-space
              />
            </div>
            <div class="col-xs-12 col-sm-1 flex justify-end">
              <q-btn
                dense
                class="full-width"
                label="บันทึก"
                @click="save"
                color="public"
              >
                <q-tooltip>บันทึก</q-tooltip></q-btn
              >
            </div>
          </div>
        </q-card>
        <div class="row col-12">
          <q-space />
          <q-input
            class="col-xs-12 col-sm-3 col-md-2"
            standout
            dense
            v-model="filterKeyword"
            ref="filterDoc"
            outlined
            debounce="300"
            placeholder="ค้นหา"
          >
            <template v-slot:append>
              <q-icon v-if="filterKeyword == ''" name="search" />
              <q-icon
                v-if="filterKeyword !== ''"
                name="clear"
                class="cursor-pointer"
                @click="resetFilterRef"
              />
            </template>
          </q-input>

          <q-select
            v-model="visibleColumnsReference"
            multiple
            outlined
            dense
            options-dense
            :display-value="$q.lang.table.columns"
            emit-value
            map-options
            :options="colums2"
            option-value="name"
            options-cover
            style="min-width: 150px"
            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
          />
        </div>
        <div class="col-12 q-pt-sm">
          <d-table
            :columns="colums2"
            :rows="rows2"
            :filter="filterKeyword"
            row-key="fileName"
            :visible-columns="visibleColumnsReference"
            v-model:pagination="pagination"
          >
            <template v-slot:header="props">
              <q-tr :props="props">
                <q-th v-for="col in props.cols" :key="col.name" :props="props">
                  <span class="text-weight-medium">{{ col.label }}</span>
                </q-th>
              </q-tr>
            </template>

            <template v-slot:body="props">
              <q-tr :props="props" class="cursor-pointer">
                <q-td key="no" :props="props">
                  {{ props.rowIndex + 1 }}
                </q-td>
                <q-td key="fileName" :props="props">
                  {{ props.row.fileName }}
                </q-td>
                <q-td key="annotation" :props="props">
                  {{
                    props.row.annotation !== null ? props.row.annotation : "-"
                  }}
                </q-td>
                <q-td auto-width>
                  <q-btn
                    type="a"
                    :href="props.row.file"
                    target="_blank"
                    dense
                    size="14px"
                    flat
                    round
                    color="deep-orange-6"
                    icon="picture_as_pdf"
                  >
                    <q-tooltip>ดาว์โหลด PDF</q-tooltip>
                  </q-btn>
                </q-td>
              </q-tr>
            </template>
          </d-table>
        </div>
        <div class="col-xs-12 col-md-9"></div>
        <div class="col-xs-12 col-md-3 flexsave"></div>
      </div>
    </div>
  </Transition>
</template>

<style scoped></style>
