<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 py-3 text-center">
            {{ equipment?.id ? '修改設備' : '新增設備' }}
        </div>
      </div>

      <div class="space-y-4 py-3 whitespace-nowrap">
        <div class="flex fexl-row items-center mx-6 gap-2">
          <label class="block text-base font-bold text-slate-700 mb-1 w-20 text-right flex-shrink-0"
            >設備編號</label
          >
          <input
            v-model="form.code"
            type="text"
            class="text-sm flex-1 w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
            placeholder="請輸入設備編號"
          />
        </div>
        
        <div class="flex flex-row items-center mx-6 gap-2">
          <label class="block text-base font-bold text-slate-700 mb-1 w-20 text-right flex-shrink-0"
            >設備名稱</label
          >
          <input
            v-model="form.name"
            type="text"
            class="text-sm flex-1 w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
            placeholder="請輸入設備名稱"
          />
        </div>

        <div class="flex flex-row whitespace-nowrap items-center mx-6 gap-2">
          <label class="block text-base font-bold text-slate-700 mb-1 w-20 text-right flex-shrink-0"
            >法定名稱</label
          >
          <select
            v-model="form.eq_cat_id"
            class="text-sm flex-1 w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
          >
            <option disabled value="">請選擇</option>
            <option v-for="cat in categories" :key="cat.id" :value="cat.id">
              {{ cat.name }}
            </option>
          </select>
        </div>

        <div class="flex flex-row whitespace-nowrap items-center mx-6 gap-2">
          <label class="block text-base font-bold text-slate-700 w-20 text-right flex-shrink-0"
            >廠區</label
          >
          <select
            v-model="form.factory_id"
            class="text-sm flex-1 w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
          >
            <option disabled value="">請選擇</option>
            <option v-for="factory in factories" :key="factory.id" :value="factory.id">
              {{ factory.name }}
            </option>
          </select>
        </div>

        <div class="flex flex-row whitespace-nowrap items-center mx-6 gap-2">
          <label class="block text-base font-bold text-slate-700 mb-1 w-20 text-right flex-shrink-0"
            >部門</label
          >
          <input
            v-model="form.department"
            type="text"
            class="text-sm flex-1 w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
            placeholder="請輸入設備名稱"
          />
        </div>

        <div class="flex flex-row whitespace-nowrap items-start mx-6 gap-2">
          <label class="block text-base font-bold text-slate-700 mb-1 w-20 text-right flex-shrink-0"
            >設備位置</label
          >
          <textarea
            v-model="form.remark"
            class="text-sm flex-1 w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
            rows="3"
            placeholder="請輸入具體位置或備註"
          ></textarea>
        </div>
      </div>

      <div class="flex justify-center gap-2 p-3 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 { ref, watch, reactive, onMounted } from 'vue'
import { api } from "@/global/axios";
import { useSwal } from '@/global/swal'

const props = defineProps({
  show: Boolean,
  equipment: Object
})
const emit = defineEmits(['update:show', 'saved'])

const categories = ref([])
const factories = ref([])
const form = reactive({
  code: '',
  eq_cat_id: '',
  factory_id: '',
  name: '',
  department: '',
  remark: ''
})

watch(() => props.equipment, (val) => {
  if (val) Object.assign(form, val)
  else Object.assign(form, { code: '', eq_cat_id: '', factory_id:'', name: '', department:'', remark: '' })
})

onMounted(async () => {
  try {
    const cate = await api.get('/api/equipment-categories')
    categories.value = cate.data.data
    const factory = await api.get('/api/factory')
    factories.value = factory.data.data
  } catch (e) {
    console.error('載入設備類別失敗', e)
  }
})

const save = async () => {
  if (!form.code.trim() || !form.name.trim() || !form.eq_cat_id || !form.factory_id) {
    await useSwal.error('請確認「設備編號」、「設備名稱」、「設備類別」與「廠區」皆已填寫', '資料未填寫完整')
    return
  }

  try {
    if (props.equipment?.id) {
      await api.put(`/api/equipments/${props.equipment.id}`, form)
      await useSwal.success('設備修改成功')
    } else {
      await api.post('/api/equipments', form)
      await useSwal.success('設備新增成功')
    }
    
    emit('saved')
    emit('update:show', false)
  } catch (e) {
    await useSwal.error('請稍後再試，或聯絡管理員', '儲存失敗')
  }
}
</script>
