// var vConsole = new VConsole();
const browser = checkVersion();
let typeTab = 1;
let info = {};
$(function() {
    _hmt.push(['_trackEvent', 'client', 'click', 'bingbang']);
    const getId = () => {
        if (browser.app) {
            if (browser.ios) {
                var allcookies = document.cookie;
                var $uid = allcookies.match(/\d+/);
                info.uid = $uid[0]
                window.webkit.messageHandlers.getTicket.postMessage(null);
                // window.webkit.messageHandlers.getUid.postMessage(null);
            } else if (browser.android) {
                if (androidJsObj && typeof androidJsObj === 'object') {
                    info.uid = parseInt(window.androidJsObj.getUid());
                    info.ticket = window.androidJsObj.getTicket();
                }
            }
        }
    }
    const render = (data) => {
        let rank = data.rankList
        let me = data.userInfo
        let obj = {
            score: 0,
            user: {
                avatar: './images/header.png',
                nick: '虚席以待',
                erbanNo: '虚席以待'
            }
        }
        let threeArr = rank.slice(0, 3)
        let otherArr = rank.slice(3, 10)
        if (threeArr.length < 3) {
            threeArr.push(...new Array(3 - threeArr.length).fill(obj))
        }
        if (otherArr.length < 7) {
            otherArr.push(...new Array(7 - otherArr.length).fill(obj))
        }
        let threeStr = threeArr.map((item, index) => {
                return ` <li>
      <img class="head" src="./images/${index}.png" alt="">
      <img class="avatar" src="${item.user.avatar}" alt="">
      <p class="nick">${item.user.nick.length > 6 ? item.user.nick.slice(0, 6) + '...' : item.user.nick}</p>
      <p class="num">${item.score}</p>
    </li>`
            }).join('')
            //
        let otherStr = otherArr.map((item, index) => {
            return `<li>
      <p class="ranking">${index + 4}</p>
      <img src="${item.user.avatar}" alt="">
      <div class="user">
        <p class="nick">${item.user.nick.length > 6 ? item.user.nick.slice(0, 6) + '...' : item.user.nick}</p>
        <p class="id">ID:${item.user.erbanNo}</p>
      </div>
      <p class="num">${item.score}</p>
    </li>`
        }).join('')
        $('.rank-three ul').html(threeStr)
        $('.rank-other ul').html(otherStr)
        $('.user-me').html(`<p class="ranking">${me.rank && me.rank <= 10 ? me.rank : '未上榜'}</p>
    <img src="${me.user.avatar}" alt="">
    <p class="id">ID:${me.user.erbanNo}</p>
    <div class="num">
      <span>${typeTab == 2 ? '送出' : '收到'}</span>
      <span>${me.score}</span>
    </div>`)
    }
    const getData = (type = 1) => {
        $.ajax({
            // url: 'http://beta.api.pekolive.com/summerActivity/ranking',
            url: '/summerActivity/ranking',
            data: { type },
            headers: {
                pub_ticket: info.ticket,
                pub_uid: info.uid
            },
            success(res) {
                // console.log(res)
                if (res.code === 200) {
                    console.log(res.data)
                    render(res.data)
                }
            }
        })
    }
    $('.rank-tab .tab').on('click', function() {
        $(this).addClass('active').siblings().removeClass('active')
        let index = $(this).index()
        typeTab = index + 1
        getData(index + 1)
    })
    getId()
    setTimeout(() => {
        getData()

    }, 50)
})

function getMessage(key, value) {
    info[key] = value;
}