<template>
  <div id="app">
      <AppHeader></AppHeader>
      <b-container>
          <b-row class="justify-content-center">
                <AddProduct @addProduct="addProduct"></AddProduct>
                <ListProduct :products="productList"></ListProduct>
          </b-row>
      </b-container>
  </div>
</template>

<script>
    import AppHeader from './components/AppHeader.vue'
    import AddProduct from './components/AddProduct.vue'
    import ListProduct from './components/ListProduct.vue'
    import axios from 'axios'


export default {
  name: 'App',
    components : {
      AppHeader,
        AddProduct,
        ListProduct,
    },
    data() {
      return {
          productList:[]
        }
    },
    methods: {
        async getProductList() {
            try {
                let result = await axios.get('http://localhost:3000/products')
                console.log(result.data)
                this.productList = result.data
            } catch (error) {
                console.log('Error', error)
            }

        },
        async addProduct(newProduct) {
            console.log('newProduct', newProduct)
        }
    },
    mounted() {
      this.getProductList()
    }
}
</script>

<style>
#app {

}

.error-message{
    color: red;
}
</style>