const value = {
  startAt: 0,  // 計測開始日時
  progressTime: 0,  // 経過ミリ秒
  items: [
    {
      delay: 5 * 1000, // 5秒
      rest: 0,
      isTimeoutDone: false,
      support: '5秒'
    },
    {
      delay: 60 * 1000, // 1分
      rest: 0,
      isTimeoutDone: false,
      support: '1分'
    },
    {
      delay: 2147483647,  // 32bit上限
      rest: 0,
      isTimeoutDone: false,
      support: '32ビットの最大値'
    },
    {
      delay: 2147483648,  // 32bit超える
      rest: 0,
      isTimeoutDone: false,
      support: '32ビットを超える値'
    }
  ]
};


const app = new Vue({
  el: '#app',
  data: value,
  
  mounted: function() {
    // 計測開始
    this.startAt = new Date().getTime();
    
    this.progress();

    setInterval(() => {
      this.progress();
    }, 1000);
    
    // setTimeoutを設定する
    this.items.forEach(function (value, index) {
      setTimeout(function () {
        value.isTimeoutDone = true;
      }, value.delay);
    });
  },
                    
  methods: {
    progress: function() {
      const progressTime = new Date().getTime() - this.startAt;
      this.progressTime = progressTime;
      
      // 計算し直す
      this.items.forEach(function (value, index) {
        value.rest = Math.max(value.delay - progressTime, 0); // 0を下回らないように
      });
    }
  },
  
  filters: {
    /**
     * 3桁ごとにカンマ
     *
     * @param num {number} 数値
     * @return {string} 3桁区切り
     */
    separate: function (num) {
      return String(num).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
    },
    
    /**
     * ミリ秒をフォーマットする
     *
     * @param msec {number} ミリ秒
     * @return {number} フォーマットした秒
     */
    formatMsec: function(msec) {
      // 小数点を省略
      return Math.round(msec / 1000);
    },
    
    /**
     * タイムスタンプをフォーマットする
     *
     * @param timestamp {number} タイムスタンプ
     * @param startAt {number} 基準時間
     * @param format {string} フォーマット
     * @return {string} フォーマットしたタイムスタンプ
     */
    formatTimestamp: function (timestamp, startAt, format = '') {
      return moment(startAt, 'x').add(timestamp, 'ms').format(format);
    }
  }
});