var app = new Vue({
    el: '#live-trades',
    data: {
            tradesToShow:4,

            traders:[],
            currentTrades:[],
            currentTrade:{img:""},
            indicatorChanged:0,
            showApp:0
        },
    mounted: function () {
            var self = this;
            axios
            .get('./trades/data/users.json')
            .then(function (response) {
                self.traders = response.data;
                self.addFirstTrades();

                setInterval(function(){
                    self.gotNewTrade();
                },getRandomInt(5000, 12000));
                self.showApp=1;
            })

        },
    watch: {
        /*currentLimit: function (val) {
        }*/
    },
    filters: {
        commaSeparateNum: function (value) {
                return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
    },
    methods: {
        addFirstTrades:function(){
            for (i = 0; i < this.tradesToShow; i++) { 
                var tempnum = getRandomInt(0, this.traders.length-1);

                let tradeToAdd = {
                    id: Math.random().toString(16).slice(2),
                    lastwon: getRandomInt(52, 425),
                    balance: this.traders[tempnum].balance + getRandomInt(52, 425),
                    img: this.traders[tempnum].img,
                    name: this.traders[tempnum].name
                };
                this.currentTrades.push(tradeToAdd);
            }
        },
        gotNewTrade:function(){
            var tempnum = getRandomInt(0, this.traders.length-1);
            let addbalance = getRandomInt(52, 425);
            var oldbalance = this.traders[tempnum].balance;

            let tradeToAdd = {
                id: this.traders[tempnum].id,
                lastwon: addbalance,
                balance: oldbalance,
                img: this.traders[tempnum].img,
                name: this.traders[tempnum].name
            };

            
            tradeToAdd.id = 'id_' + Math.random().toString(16).slice(2);
            this.traders[tempnum].lastwon = addbalance;
            this.traders[tempnum].balance += addbalance;
            var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',');
            this.currentTrades.shift();
            this.currentTrades.push(tradeToAdd);
            


            setTimeout(function(){
                $("#" + tradeToAdd.id + ' .balance-info .bal').animateNumber({ number: tradeToAdd.balance, numberStep: comma_separator_number_step},'slow');
                $("#" + tradeToAdd.id).show();
            },500)
        }
    }
  })

  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }