<template>
    <div class="container border border-primairy p-3 m-3 bg-light">
        <div class="">
            <div v-for="item in stocks" :key="item.id">
                <div class="border border-primairybg-light p-3 m-3 w-50 h-25"
                    v-bind:style="{ backgroundColor: item.color}">
                    <p>{{item.name}} (price: {{item.price}})</p>
                    <input type="text" class="form-control w-25 d-inline" placeholder="Quantity">
                    <button type="button" class="m-3 btn btn-primary" v-on:click="buy(item)">Buy</button>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
    import VueRouter from 'vue-router'

    import {
        routes
    } from '../routes';

    import {
        store
    } from '../store/store';

    import {
        eventBus
    } from '../main.js';

    export default {
        data() {
            return {
                stocks: [],
                color: '',
                renderComponent: true,
            };
        },
        created() {
            this.stocks = store.getters.stocks;
        },
        methods: {
            buy(item) {
              store.dispatch('buy', item)
            },
        }
    }
</script>