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

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


    const $q=useQuasar();
//     const allowTypes=['.xlsx','.csv'];

//     function checkFileType(files : File[] ):File[]{
//         return files.filter((file)=>{
//             let filename = file.name.toLowerCase();
//             for(let ext of allowTypes){
//               if(filename.endsWith(ext)){
//                 return true;
//               }
//             }
//             return false;
//         });
//     }

    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 uploadFinished(){
      $q.notify({
        type: 'info',
        caption:"通知",
        message: 'ファイルの読込が完了しました。'
      })
    }

    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>
