<style scoped>
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  .animate-fade-in {
    animation: fade-in 0.2s ease-out;
  }
</style>
<template>
  <div 
    v-if="show"
    class="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm flex items-center justify-center"
  >
    <div class="bg-white rounded-xl shadow-xl w-full max-w-xl animate-fade-in">
    <!-- 標題 -->
      <div class=" bg-slate-600 rounded-t-xl text-white">
        <div class="text-2xl font-semibold py-3 text-center">
            匯入
        </div>
      </div>

      <div class="space-y-4 p-6">
        <!-- 說明 -->
        <div class="flex flex-col font-bold text-xl ">
            <div class="">範例檔：<a class=" text-blue-600" :href="`${ASSET_URL}/files/banksExample.xlsx`" download>項目範例.xlsx</a></div>
            <div class="py-2 border-b-2 border-blue-900">說明：只有當每一行資料無誤時，才會進行建立作業</div>
        </div>

        <!-- 匯入 -->
        <div class="px-4 py-2 ">
            <input type="file" ref="fileInput" @change="onFileSelect" accept=".xls,.csv,.xlsx" class="hidden" />

            <div class="flex items-center space-x-4">
                <span v-if="!fileName" class="font-bold text-lg">未選擇任何檔案</span>
                <span v-if="fileName"  class="font-bold text-lg border border-black rounded py-1 pl-2 pr-8">{{ fileName }}</span>
                <button @click="chooseFile" class="border rounded font-serif text-sm bg-blue-900 py-1 px-4 text-white">
                    選擇檔案
                </button>
            </div>
        </div>
        
        <hr class="shadow border"> 
        <!-- 按鈕 -->
        <div class="flex justify-center gap-4 mt-6 font-semibold">
            <button
            @click="() => { emit('update:show', false); emit('saved') }"
            class="w-15 h-10 px-4 py-2 text-base bg-red-600 hover:bg-red-500 text-white rounded"
            >
            取消
            </button>
            <button label="上傳" @click="upload" 
            class="w-15 h-10 px-4 py-2 text-base bg-emerald-500 hover:bg-emerald-400 text-white rounded" >
            上傳
            </button>
        </div>      
      </div>
    </div>
  </div>
</template>
  
<script setup>
import { ref, onMounted, computed, reactive } from 'vue'
import { api } from "@/global/axios";
import { useRouter } from 'vue-router'
import { useSwal } from '@/global/swal'

const ASSET_URL = import.meta.env.VITE_ASSET_URL
const router = useRouter()
const props = defineProps({
  show: Boolean,
  bank: Object
})
const emit = defineEmits(['update:show', 'saved'])

const fileInput = ref(null)
const selectedFile = ref(null)
const fileName = ref('')

function chooseFile() {
  fileInput.value.click()
}

function onFileSelect(event) {
  const file = event.target.files[0]
  if (file) {
    selectedFile.value = file
    fileName.value = file.name
  }
}

async function upload() {
  if (!selectedFile.value) return

  const formData = new FormData()
  formData.append('BankFile', selectedFile.value)
  formData.append("eq_cat_id" , router.currentRoute.value.params.id)

  try {
    const response = await api.post('/api/equipmentBank/import', formData)
    await useSwal.success('匯入成功')
    emit('update:show', false)
    emit('saved')
  } catch (error) {
    let message = '匯入失敗';
    // 檢查後端是否有傳回錯誤陣列
    console.log(error)

    if (error.response?.data?.errors) {
      const errorList = error.response.data.errors
      message = '匯入失敗：\n' + errorList.join('\n')
    }

    alert(message)
    emit('update:show', false)
  }
}



</script>
  