<template>
  <div class="q-pa-md">
    <q-uploader
        style="max-width: 400px"
        :url="uploadUrl"
        :label="title"
        :headers="headers"
        accept=".csv,.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 { createUploaderComponent, useQuasar } from 'quasar';
import { useAuthStore } from 'src/stores/useAuthStore';
import { ref } from 'vue';
    const $q=useQuasar();
    const authStore = useAuthStore();
    const emit =defineEmits(['uploaded']);
    /**
     * ファイルアップロードを拒否する時の処理
     * @param rejectedEntries
     */
    function onRejected (rejectedEntries:any) {
      // Notify plugin needs to be installed
      // https://quasar.dev/quasar-plugins/notify#Installation
      $q.notify({
        type: 'negative',
        message: `CSVおよび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);
    }

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

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

    const headers = ref([{name:"Authorization",value:'Bearer ' + authStore.token}]);
    const props = withDefaults(defineProps<Props>(), {
      title:"設計書から導入する(csv or excel)",
      uploadUrl: `${process.env.KAB_BACKEND_URL}api/v1/createappfromexcel?format=1`

    });
</script>
<style lang="scss">

</style>
