var AutoLoad = require('autoload')
var _ = require('underscore')

class pageGameRank {
    constructor() {
        this.ajaxUrl
        this.mode
        this.pageNum = 3

        this.rankTpl = __inline('../../tpl/gameRank.tmpl')
        this.forwardRankTpl = __inline('../../tpl/forwardTpl.tmpl')
        this.$rankWrap = $('.game-chart-tbl tbody')

        this.init()
    }

    init() {
        this.mode = $('.rank-nav li.active').attr('data-mode')
        this.ajaxUrl = `http://ku.newgame.duowan.com/index.php?&r=api/ajaxGameRank&type=jsonp`

        this.autoload = new AutoLoad('.page-gamerank', this.getData.bind(this))
    }
    getData() {
        var self = this
        $.ajax({
            url: self.ajaxUrl,
            data: { mode: this.mode, page: this.pageNum },
            dataType: 'jsonp',
            success: function (data) {
                if (data.data.list instanceof Array) {
                    self.renderData(data.data.list)
                    self.pageNum++
                } else {
                    self.autoload.end()
                }
                self.autoload.done()
            },
            err: function (err) {
                console.log(err)
            }
        })
    }

    renderData(list) {
        var tpl = this.mode == 'forward' ? this.forwardRankTpl : this.rankTpl

        var $append = $(tpl({
            rankList: list,
            start: (this.pageNum - 1) * 20 + 1
        }))
        this.$rankWrap.append($append)
    }
}

$(() => {
    new pageGameRank
})