<template>
  <div class="q-pa-md">
    <q-uploader
      style="max-width: 400px"
      :url="uploadUrl"
      :label="title"
      :headers="headers"
      accept=".xlsx"
      v-on:rejected="onRejected"
      v-on:uploaded="onUploadFinished"
      v-on:failed="onFailed"
      field-name="files"
    ></q-uploader>
  </div>
</template>
<script setup lang="ts">
import { useQuasar } from 'quasar';
import { useAuthStore } from 'src/stores/useAuthStore';
import { ref } from 'vue';

const $q = useQuasar();
const authStore = useAuthStore();
const emit = defineEmits(['uploaded']);

interface Props {
  title?: string;
  uploadUrl?: string;
}

const headers = ref([
  { name: 'Authorization', value: 'Bearer ' + authStore.token },
]);

const props = withDefaults(defineProps<Props>(), {
  title: '設計書から導入する(Excel)',
  uploadUrl: `${process.env.KAB_BACKEND_URL}api/v1/createappfromexcel?format=1`,
});

/**
 * ファイルアップロードを拒否する時の処理
 * @param rejectedEntries
 */
function onRejected(rejectedEntries: any) {
  // Notify plugin needs to be installed
  // https://quasar.dev/quasar-plugins/notify#Installation
  $q.notify({
    type: 'negative',
    message: 'Excelファイルを選択してください。',
  });
}

/**
 * ファイルアップロード成功時の処理
 */
function onUploadFinished({ xhr }: { xhr: XMLHttpRequest }) {
  let msg = 'ファイルのアップロードが完了しました。';
  if (xhr && xhr.response) {
    msg = `${msg} (${xhr.responseText})`;
  }
  $q.notify({
    type: 'positive',
    caption: '通知',
    message: msg,
  });
  setTimeout(() => {
    emit('uploaded', xhr.responseText);
  }, 2000);
}

/**
 * 例外発生時、responseからエラー情報を取得する
 * @param xhr
 */
function getResponseError(xhr: XMLHttpRequest) {
  try {
    const resp = JSON.parse(xhr.responseText);
    return 'detail' in resp ? resp.detail : '';
  } catch (err) {
    return xhr.responseText;
  }
}

/**
 *
 * @param info ファイルアップロード失敗時の処理
 */
function onFailed({
  files,
  xhr,
}: {
  files: readonly any[];
  xhr: XMLHttpRequest;
}) {
  let msg = 'ファイルアップロードが失敗しました。';
  if (xhr && xhr.status) {
    const detail = getResponseError(xhr);
    msg = `${msg} (${xhr.status}:${detail})`;
  }
  $q.notify({
    type: 'negative',
    message: msg,
  });
}
</script>
<style lang="scss"></style>
