<template>
  <div id="inventoryContainer">
    <h2>食品管理表</h2>
    <el-table :data="inventoryStore.inventoryListGetter" border style="width: 100%; height: 100%;">
      <el-table-column prop="id" label="序号" width="200" />
      <el-table-column prop="dishName" label="食品名称" width="300" />

      <el-table-column prop="price" label="价格">
        <template #default="scope">
          <el-input v-model="scope.row.price" style="width: 80px;"></el-input> 元
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="库存">
        <template #default="scope">
          剩余 <el-input v-model="scope.row.quantity" style="width: 80px;"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="quantity" label="确认修改" width="120">
        <template #default="scope">
          <el-button type="primary" @click="inventoryStore.updateInventoryList(scope.row)">确认修改</el-button>
        </template>
      </el-table-column>

    </el-table>


  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, } from "vue"
import { useInventoryStore } from "../store/inventoryStore"
const inventoryStore = useInventoryStore()
onBeforeMount(async () => {
  await inventoryStore.getInventoryList()
})

</script>

<style scoped>
#inventoryContainer {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 90vw;
}
</style>