new Vue({
  el: "#app",
  data: {
    days: "-",
    hours: "-",
    minutes: "-",
    seconds: "-",
    target: 10000000,
    left: -1
  },
  computed: {
    number: function () {
      return this.target.toLocaleString();
    }
  },
  created: function () {
    const connex = new Connex({
      node: "https://mainnet.veblocks.net/",
      network: "main"
    });
    const ticker = connex.thor.ticker();
    void (async () => {
      for (;;) {
        if(!!connex.thor.status.head.number && (this.target > connex.thor.status.head.number)){
          this.left = (this.target - connex.thor.status.head.number) * 10;
          this.updateCountdown();
        }else{
          this.left = 0
        }
        await ticker.next();
      }
    })();
  },
  methods: {
    updateCountdown: function () {
      const MINUTE = 60
      const HOUR = 60 * MINUTE
      const DAY = 24 * HOUR
      
      if (this.left == -1 || this.left == 0) {
        this.days = "-";
        this.hours = "-";
        this.minutes = "-"; 
        this.seconds = "-";
      } else {
        this.days = Math.floor(this.left/DAY).toString();
        this.hours = Math.floor((this.left % DAY)/HOUR).toString();
        this.minutes =  Math.floor((this.left % HOUR)/MINUTE).toString();
        this.seconds =  Math.floor(this.left % MINUTE).toString();
      }
    }
  }
});