<template>
    <!-- 欄位 -->
    <div class="flex flex-col md:grid grid-cols-5 gap-4 w-full px-3 py-4 bg-white border rounded">
      <!-- <button class="w-5 h-5 flex items-center justify-center rounded hover:bg-gray-100 md:hidden" @click="removeItem">
        <TrashIcon class="w-7 h-7" />
      </button> -->
      <div class="flex items-center space-x-2">
        <span class="whitespace-nowrap text-black">編號</span>
        <input type="text" class="border rounded px-2 py-1 flex-shrink min-w-0 w-full" />
      </div>
      <div class="flex items-center space-x-2 col-span-2">
        <span class="whitespace-nowrap text-black">設備編號與檢查項目</span>
        <input type="text" class="border rounded px-2 py-1 flex-shrink min-w-0 w-full" />
      </div>
      <div class="flex items-center space-x-2 col-span-2">
        <span class="whitespace-nowrap text-black">管理值</span>
        <input type="number" class="border rounded px-1 py-1 flex-shrink min-w-0 w-32"  />
        <span>~</span>
        <input type="number" class="border rounded px-1 py-1 flex-shrink min-w-0 w-32"  />
        <span class="whitespace-nowrap text-black">單位</span>
        <input type="text" class="border rounded px-2 py-1 flex-shrink min-w-0 w-full"  />
      </div>
      <div class="flex items-center space-x-2 col-span-3">
        <span class="whitespace-nowrap text-black">備註</span>
        <input type="text" class="border rounded px-2 py-1 flex-shrink min-w-0 w-full" />
      </div>
    </div>
</template>
<script setup>
const props = defineProps({
  item: Object,
  index: Number,
})
</script>