<template>
    <div>
        <h1>耗材档案管理</h1>
        <form @submit.prevent="addMaterial">
            <input v-model="newmaterial.name"
            type="text" placeholder="耗材名称"
            required />
            <input v-model="newMaterial.quantity" type="number" placeholder="数量"  required/>
            <button type="submit">添加耗材</button>
        </form>
        
    </div>
</template> 

<script>
import { ref } from 'vue';

export default {
  name: 'MaterialRecord',
  setup() {
    const materials = ref([]);
    const newMaterial = ref({ name: '', quantity: 1 });

    const addMaterial = () => {
      if (newMaterial.value.name && newMaterial.value.quantity) {
        materials.value.push({
          id: Date.now(),
          name: newMaterial.value.name,
          quantity: newMaterial.value.quantity,
        });
        newMaterial.value.name = '';
        newMaterial.value.quantity = 1;
      }
    };

    const removeMaterial = (index) => {
      materials.value.splice(index, 1);
    };

    return {
      materials,
      newMaterial,
      addMaterial,
      removeMaterial,
    };
  },
};
</script>

<style scoped>
h1 {
  margin-bottom: 20px;
}

form {
  margin-bottom: 20px;
}

input {
  margin-right: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}
</style>