<script>
import FormEdit from './FormEdit.vue';
import FormCreate from './FormCreate.vue';

const urlAPI = "http://localhost:8000/api/products/";

export default {
  components: {
    FormEdit, FormCreate
  },
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    loadData() {
      fetch(urlAPI)
        .then((response) => response.json())
        .then((data) => { this.tableData = data });
    },

    handleDelete(index, row) {
      console.log('To delete /products/' + row.id, index);
      fetch(urlAPI + row.id, { method: 'DELETE' })
        .then((response) => response.json())
        .then((data) => {
          const foundPos = this.tableData.findIndex(entry => entry.id == row.id);
          if (foundPos >= 0) {
            this.tableData.splice(foundPos, 1);
          }
        });
    },

    handleEdit(index, row) {
      console.log('To edit /products/' + row.id)
      this.$refs.formEdit.showDialog(row);
    },

    handleFormEditCancel() {
      console.log('handle form edit cancel');
    },

    handleFormEditConfirm(rec) {
      console.log('handle form edit confirm', rec);
      // to submit a fetch to update products/rec.id
      fetch(urlAPI + rec.id, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(rec)
      })
        .then((response) => response.json())
        .then((data) => {
          // update this.tableData
          const foundPos = this.tableData.findIndex(entry => entry.id == data.id);
          this.tableData[foundPos] = data;
        });
    },

    handleCreate() {
      //console.log('To edit /products/'+row.id)
      this.$refs.formCreate.showDialog();
    },

    handleFormCreateConfirm(rec) {
      console.log('handle form create confirm', rec);
      // to submit a fetch to update products/rec.id
      fetch(urlAPI, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(rec)
      })
        .then((response) => response.json())
        .then((data) => {
          // update this.tableData
          this.tableData.push(data);
        });
    }
  }
}
</script>

<template>

  <el-button @click="loadData">Load data</el-button>
  <el-button @click="handleCreate">Add new product</el-button>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="id" width="80" sortable />
    <el-table-column prop="productName" label="Product name" width="300" sortable />
    <el-table-column prop="category" label="Category" width="140" sortable />
    <el-table-column prop="unitPrice" label="Unit price" width="120" sortable />
    <el-table-column prop="unitsInStock" label="In-stock" width="120" sortable />
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button type="primary" size="mini" plain @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button type="danger" size="mini" plain @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>

  </el-table>

  <form-edit ref="formEdit" @cancel="handleFormEditCancel" @confirm="handleFormEditConfirm">
  </form-edit>

  <!-- @cancel is ignored  -->
  <form-create ref="formCreate" @confirm="handleFormCreateConfirm">
  </form-create>

</template>

<style>
</style>

can you add a row that show price times in stock?