<template>
  <div class="q-pa-md">
    <q-uploader
        :on-finish="uploadFinished"
        style="max-width: 400px"
        :url="uploadUrl"
        :label="title"
        accept=".csv,.xlsx"
        :on-rejected="onRejected"
        field-name="file"
    ></q-uploader>
  </div>

</template>
<script setup lang="ts">
 import { createUploaderComponent, useQuasar } from 'quasar';


    const $q=useQuasar();

    /**
     * ファイルアップロードを拒否する時の処理
     * @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
      });
    }

    /**
     *
     * @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 props = withDefaults(defineProps<Props>(), {
  title:"設計書から導入する(csv or excel)",
  uploadUrl:process.env.KAB_BACKEND_URL
});



</script>
<style lang="scss">

</style>
