let rank_list = [];

$(document).ready(() => {
    fnLoadRanking(1, true);
});

// 랭킹 셀렉트 제어
$('.btn_sel_ranking').on('click', function () {
    $('.sel_ranking').toggle();
    $('.icon_arrow').toggleClass('up');
});

function fnLoadRanking(rank_type, first = false) {
    $.ajax({
        dataType: "json",
        type: "post",
        data: {
            "gid": gid,
            "rank_type": rank_type,
            "first": first,
        },
        url: "/rank_list",
        success: function (data) {
            strHtml = '';
            if (data.rank_type == 3) {
                $('.r_date').text('');
            } else {
                $('.r_date').text(data.start_date + '~' + data.end_date);
            }
            $('.sel_ranking li').removeClass('on');
            $('#rank_type_'+data.rank_type).addClass('on');
            $('.btn_sel_ranking').html($('#rank_type_'+data.rank_type).text()+'<i class="icon_arrow"></i>');

            if (!first) {
                $('.sel_ranking').toggle();
                $('.icon_arrow').toggleClass('up');
            }

            rank_list = data.rank_list;
            if (data.rank_list.length > 1) {
                // 2등이 먼저 와라..
                [data.rank_list[0], data.rank_list[1]] = [data.rank_list[1], data.rank_list[0]];

                for (let i = 0; i < 3; i++) {
                    strHtml += '<li>';
                    if (data.rank_list.length > i) {
                        strHtml += '<div class="profile ' + (i === 1 ? '_big' : '_middle') + '">';
                        strHtml += '<div class="thm">';
                        strHtml += '<img src="' + data.rank_list[i].img + '" alt="프로필 이미지" onerror="this.onerror = null; this.src=\'https://ssl.pstatic.net/static/pwe/address/img_profile.png\'"/>';
                        strHtml += '</div>';
                        strHtml += '<i class="icon_ranking">' + data.rank_list[i].ranking + '</i>';
                        if (data.rank_list[i].level !== null) {
                            strHtml += '<i class="icon_lv lv_'+data.rank_list[i].level+'">'+data.rank_list[i].level+'</i>';
                        }
                        if (data.rank_list[i].is_mine == 1) {
                            strHtml += '<i class="icon_my">my</i>';
                        }
                        strHtml += '</div>';
                        strHtml += '<div class="nick">';
                        strHtml +=      '<b>'+data.rank_list[i].nick+'</b>';
                        if (data.rank_list[i].group !== null) {
                            strHtml +=      '<span class="group">['+data.rank_list[i].group+']</span>';
                        }
                        strHtml += '</div>';
                        strHtml += '<div class="score">' + parseInt(data.rank_list[i].score).toLocaleString() + '</div>';
                    }
                    strHtml += '</li>';
                }
            } else if (data.rank_list.length === 1) {
                // 1등밖에 없으니까 1등 표시.
                strHtml += '<li></li>';
                strHtml += '<li>';
                strHtml +=      '<div class="profile _big">';
                strHtml +=          '<div class="thm">';
                strHtml +=              '<img src="'+data.rank_list[0].img+'" alt="프로필 이미지" onerror="this.onerror = null; this.src=\'https://ssl.pstatic.net/static/pwe/address/img_profile.png\'"/>';
                strHtml +=          '</div>';
                strHtml +=          '<i class="icon_ranking">'+data.rank_list[0].ranking+'</i>';
                if (data.rank_list[0].level !== null) {
                    strHtml +=          '<i class="icon_lv lv_'+data.rank_list[0].level+'">'+data.rank_list[0].level+'</i>';
                }
                if (data.rank_list[0].is_mine == 1) {
                    strHtml +=          '<i class="icon_my">my</i>';
                }
                strHtml +=      '</div>';
                strHtml +=      '<div class="nick">';
                strHtml +=          '<b>'+data.rank_list[0].nick+'</b>';
                if (data.rank_list[0].group !== null) {
                    strHtml +=      '<span class="group">['+data.rank_list[0].group+']</span>';
                }
                strHtml +=      '</div>';
                strHtml +=      '<div class="score">'+parseInt(data.rank_list[0].score).toLocaleString()+'</div>';
                strHtml += '</li>';
                strHtml += '<li></li>';
            } else {
                if (!mobile) {
                    $('.ranking_wrap').addClass('no_result');
                }
                strHtml += '<div class="text">'+first_ranking+'</div>';
            }
            $('.award_list').html(strHtml);

            // 4~ 10등 표시.
            strHtml = '';
            for (let i = 3; i < 10; i++) {
                if (data.rank_list.length > i) {
                    strHtml += '<li id="data_rank_'+i+'">';
                    strHtml +=      '<div class="ranking">'+data.rank_list[i].ranking+'</div>';
                    strHtml +=      '<div class="nick">';
                    strHtml +=          '<div class="nick_box">';
                    strHtml +=              '<div class="nick_inner">';
                    strHtml +=                  '<span class="name">'+data.rank_list[i].nick+'</span>';
                    if (data.rank_list[i].group !== null) {
                        // 모바일 글자 길면 두줄로 나눠서 출력
                        if (mobile && data.rank_list[i].nick.length + data.rank_list[i].group.length >= 16) {
                                strHtml +=      '<br/>';
                        }
                        strHtml +=              '<span class="group">['+data.rank_list[i].group+']</span>';
                    }
                    strHtml +=              '</div>';
                    // PC 글자 길면 화살표 추가
                    if (data.rank_list[i].group !== null && !mobile && data.rank_list[i].nick.length + data.rank_list[i].group.length >= 20) {
                        strHtml +=      '<button type="button" class="btn_nick_next" onclick="fnSetFullName('+i+', $(this))"><i></i></button>';
                    }
                    if (data.rank_list[i].is_mine == 1) {
                        strHtml +=          '<i class="icon_my">my</i>';
                    }
                    strHtml +=          '</div>';
                    strHtml +=      '</div>';
                    strHtml +=      '<div class="score">'+parseInt(data.rank_list[i].score).toLocaleString()+'</div>';
                    strHtml += '</li>';
                }
            }

            $('.txt_list').html(strHtml);

            // 내 랭킹 표시

            if (data.my_rank != null) {
                $('.my_list .ranking').text(data.my_rank.ranking);
                $('.my_list .name').text(data.my_rank.nick);
                $('.my_list .group').text('['+data.my_rank.group+']');
                $('.my_list .score').text(Number(data.my_rank.point).toLocaleString());
                $('.my_list').show();
                $('.ranking_wrap .no_result').hide();
            } else {
                $('.my_list').hide();
                $('.ranking_wrap .no_result').show();

            }
        }
    });
}
function fnSetFullName(i, obj) {
    full_name = rank_list[i]['nick'];
    full_group = rank_list[i]['group'];

    obj_name = $('#data_rank_'+i+' .nick_inner .name');
    obj_group = $('#data_rank_'+i+' .nick_inner .group');
    if ($(obj).hasClass('btn_nick_next')) {
        obj_name.text(obj_name.text().slice(full_group.length - 15));
        $(obj).removeClass('btn_nick_next').addClass('btn_nick_prev');
    } else {
        obj_name.text(full_name);
        $(obj).addClass('btn_nick_next').removeClass('btn_nick_prev');
    }
}