<!-- CheckItemCard.vue -->
<template>
    <!-- icon -->
  <div class="flex mx-2 my-3">
    <div class="py-4 flex-col gap-2 hidden md:table-header-group">
      <button class="w-10 h-10 flex items-center justify-center rounded hover:bg-gray-100">
        <Bars3Icon class="w-7 h-7" />
      </button>
      <button class="w-10 h-10 flex items-center justify-center rounded hover:bg-gray-100" @click="removeItem">
        <TrashIcon class="w-7 h-7" />
      </button>
    </div>
    <!-- 欄位 -->
    <div class="flex flex-col md:grid grid-cols-5 gap-4 w-full px-3 py-4 bg-sky-800 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-white">編號</span>
        <input type="text" class="border rounded px-2 py-1 flex-shrink min-w-0 w-full" v-model="item.code" />
      </div>
      <div class="flex items-center space-x-2 col-span-2">
        <span class="whitespace-nowrap text-white">設備編號與檢查項目</span>
        <input type="text" class="border rounded px-2 py-1 flex-shrink min-w-0 w-full" v-model="item.item"/>
      </div>
      <div class="flex items-center space-x-2 col-span-2">
        <span class="whitespace-nowrap text-white">管理值</span>
        <input type="number" class="border rounded px-1 py-1 flex-shrink min-w-0 w-32"  v-model="item.range" />
        <span>~</span>
        <input type="number" class="border rounded px-1 py-1 flex-shrink min-w-0 w-32"  v-model="item.range2" />
        <span class="whitespace-nowrap text-white">單位</span>
        <input type="text" class="border rounded px-2 py-1 flex-shrink min-w-0 w-full" v-model="item.unit" />
      </div>
      <div class="flex items-center space-x-2 col-span-3">
        <span class="whitespace-nowrap text-white">備註</span>
        <input type="text" class="border rounded px-2 py-1 flex-shrink min-w-0 w-full" v-model="item.remark" />
      </div>
      <div class="flex items-center space-x-2 col-span-2">
        <span class="whitespace-nowrap text-white">風險等級</span>
        <select class="border rounded px-2 py-1 flex-shrink min-w-0 w-full" v-model="item.risk">
          <option disabled value="">請選擇風險等級</option>
          <option v-for="risk in risks" :key="risk.id" :value="risk.id">
            {{ risk.level }}
          </option>
        </select>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Bars3Icon , TrashIcon } from "@heroicons/vue/24/solid";

const props = defineProps({
  item: Object,
  index: Number,
  risks: Array,
})
const emit = defineEmits(['remove'])

const removeItem = () => {
  emit('remove', props.index);
};

</script>
