<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-md animate-fade-in">
    <!-- 標題 -->
      <div class=" bg-slate-600 rounded-t-xl text-white">
        <div class="text-2xl font-semibold p-4 text-center">
          手動新增
        </div>
      </div>

      <div class="space-y-4 p-6">
        <!-- 名稱 -->
        <div class="flex text-nowrap items-center gap-4">
          <label class="block text-base font-bold text-gray-700 mb-1">名稱</label>
          <input v-model="bank.name"
          class="text-sm w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" />
        </div>
        <!-- 選取設備 -->
        <div class="flex text-nowrap items-center gap-4">
          <label class="block text-base font-bold text-gray-700 mb-1">設備名稱</label>
            <select 
              v-model="equipment.id"
              class="text-sm w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-blue-400">
            <option disabled value="">請選擇</option>
            <option v-for="eq in equipments" :value="eq.id">
                {{ eq.name }}
            </option>
          </select>
        </div>
      </div>

        <div class="flex justify-center gap-2 p-4 border-t-4 shadow font-semibold">
          <button
            @click="emit('update:show', false)"
            class="w-20 h-10 px-4 py-2 text-base bg-red-600 hover:bg-red-500 text-white rounded"
          >
            取消
          </button>
          <button
            @click="save"
            class="w-20 h-10 px-4 py-2 text-base bg-blue-800 hover:bg-blue-700 text-white rounded"
          >
            儲存
          </button>
        </div> 
    </div>
  </div>
  </template>
  
  <script setup>
  // import FileUpload from 'primevue/fileupload'; 後續版本合併後，若有新增該套件即可使用
  import { ref, onMounted, computed, reactive } from 'vue'
  import { api } from "@/global/axios";
  import { useSwal } from '@/global/swal'
  
  const props = defineProps({
    show: Boolean,
    bank: Object
  })
  const emit = defineEmits(['update:show', 'saved'])

  const equipments = ref([])
  const equipment = reactive({
    id:'',
    name: '',
  })

  const bank = reactive({
    id: '',
    name: '',
  })
  // 設備 
  const loadEquipment = async () =>{
    const res = await api.get("/api/equipments")
    equipments.value = res.data.data
  }

  // 建置檢核表單
  const save = async () => {
    await api.post("/api/bankList/manual" , {id: equipment.id , bank_name: bank.name})
    await useSwal.success('檢核表單新增成功')
    
    emit('saved')
    emit('update:show', false)
  }

  onMounted( () => {
      loadEquipment()
    }
  )

  </script>
  