var apiName = 'api/Game/';
var width = $(document).width();
var featured = [];
var offerListBox = $('#offerListBox');
var servers = [];

var pathname = window.location.pathname;
pathname = pathname.substr(1).toLocaleLowerCase().match('fortnite');

var filters = {
    IsFeatured: 0,
    Pager: _filters.Pager,
    FilterParams: {
        SortField: GetQueryString('SortField') || '',
        //SortField: GetQueryString('SortField') || (pathname ? 'fdefault' : 'most-reviews'),
        keyword: GetQueryString('keyword') || '',
        Serverid: GetQueryString('Serverid') || '',
        Quantity: '',
        Itemid: '',
        Freeinsurance: GetQueryString('Freeinsurance') || '',
        Isdelivery: parseInt(GetQueryString('Isdelivery')) || 0
    }
};


$('#mySelectCtrl select').change(function (e) {
    filters.FilterParams.SortField = $(this).val();

    if ($(this).val() == '1') {
        var _FilterParams = {
            SortField: '',
            //SortField: 'most-reviews',
            keyword: GetQueryString('keyword') || '',
            Serverid: GetQueryString('Serverid') || '',
            Quantity: '',
            Itemid: '',
            Isdelivery: 0,
            Freeinsurance: 1
        }
        filters.FilterParams = _FilterParams;
    };
    filters.Pager.PageIndex = 1;
    window.location = queryConfig(filters);
});



$('.input-group-btn').click(function (e) {

    if (width > 768) {

        filters.FilterParams.keyword = $('.filter-search').val();
    } else {

        var search = $('.filter-search-xs').val();
        filters.FilterParams.keyword = search;
    }

    filters.Pager.PageIndex = 1;
    window.location = queryConfig(filters);
});



function template(offers) {
    if (!offers) return;
    var $table = $('#offers');

    movetemplate(offers);
    $.each(offers, function (i, v) {
        var $tr = $('<tr class="table-col-time font-size-0"></tr>');
        var detailUrl = v.Title.replace(/[^\w\s]{1,}/g, "").replace(/\s/g, "-");
        var detail = toLower(v.OfferId + 'a!' + detailUrl.substring(0, 50));


        var hot = $('<td  class="table-icon">&nbsp;</td>');
        var Title = $('<td  class="table-title"><a href="' + detail + '" target="_blank" ><span class="txt-hot">' + v.Title + '</span></a></td>');

        var Isdelivery = '';
        if (v.Isdelivery) {
            Isdelivery = $('<td class="table-time"><img src="' + pastatic + '/images/icon-flash.png"><span class="txt-gray">Instant</span></td>');
        } else {
            Isdelivery = $('<td class="table-time"><img src="' + pastatic + '/images/icon-time.png" alt="icon-time"><span class="txt-gray">' + v.DeliverySpeed.en + '</span></td>');
        }

        var Rating = $('<td   class="table-rate"></td>');
        var Price = $('<td  class="table-price">' + currencyTypeLogo + '' + v.Price[currencyType].UnitPrice.toFixed(2) + '</td>');
        var Details = $('<td  class="table-btnbox"><a href="' + detail + '" target="_blank" class="btn btn-normal-bg btn-shadow">DETAILS</a><a href="' + paURL + 'checkout/checkoutv2-account/?offerid=' + v.OfferId + '&Quantity=1" class="btn btn-success btn-shadow btn-buy-now">BUY NOW</a></td>');
        if (v.Seller.TotalReviews == 0) {
            var ratingOuter = $('<a href="javascript:;" class="comment-stars">' +
               '<span class="vote-number">New Seller</span>' + '</a>');
            ratingOuter.appendTo(Rating);
        } else {
            var ratingOuter = $('<a href="javascript:;" class="comment-stars">' +
                '<span class="vote-star"><i></i></span>' +
                '<span class="vote-number">' + v.Seller.TotalReviews + '</span>' + '</a>');
            ratingStars(ratingOuter, v.Seller.Rating);
            ratingOuter.appendTo(Rating);
        }
        hot.appendTo($tr);
        Title.appendTo($tr);
        Isdelivery.appendTo($tr);
        Rating.appendTo($tr);
        Price.appendTo($tr);
        Details.appendTo($tr);
        $tr.appendTo($table);
    });
    $table.appendTo(offerListBox);
}

function hot() {
    filters.IsFeatured = 1;
    featured = init(filters).Offers;

    if (featured && featured.length > 0) {
        var $table = $('#offers');
        movehot(featured);
        $.each(featured, function (i, v) {

            var detailUrl = v.Title.replace(/[^\w\s]{1,}/g, "").replace(/\s/g, "-");

            var detail = toLower(v.OfferId + 'a!' + detailUrl.substring(0, 50));


            var $tr = $('<tr class="table-col-time font-size-0 hot-table-row"></tr>');
            var hot = $('<td class="table-icon table-icon-hot">&nbsp;</td>');
            var Title = $('<td class="table-title"><a href="' + detail + '" target="_blank" ><span class="txt-hot">' + v.Title + '</span></a></td>');

            var Isdelivery = '';

            if (v.Isdelivery) {
                Isdelivery = $('<td class="table-time"><img src="' + pastatic + '/images/icon-flash.png"><span class="txt-gray">Instant</span></td>');
            } else {
                Isdelivery = $('<td class="table-time"><img src="' + pastatic + '/images/icon-time.png" alt="icon-time"><span class="txt-gray">' + v.DeliverySpeed.en + '</span></td>');
            }
            var Rating = $('<td class="table-rate">' + '</td>');
            var Price = $('<td class="table-price">' + currencyTypeLogo + '' + v.Price[currencyType].UnitPrice.toFixed(2) + '</td>');

            var detail = v.OfferId + 'a!' + v.Title.substring(0, 50);


            var Details = $('<td class="table-btnbox"><a href="' + detail + '" target="_blank" class="btn btn-normal-bg btn-shadow">DETAILS</a><a href="' + paURL + 'checkout/checkoutv2-account/?offerid=' + v.OfferId + '&Quantity=1" class="btn btn-success btn-shadow btn-buy-now">BUY NOW</a></td>');

            if (v.Seller.TotalReviews == 0) {
                var ratingOuter = $('<a href="javascript:;" class="comment-stars">' +
                   '<span class="vote-number">New Seller</span>' + '</a>');
                ratingOuter.appendTo(Rating);
            } else {
                var ratingOuter = $('<a href="javascript:;" class="comment-stars">' +
                    '<span class="vote-star"><i></i></span>' +
                    '<span class="vote-number">' + v.Seller.TotalReviews + '</span>' + '</a>');
                ratingStars(ratingOuter, v.Seller.Rating);
                ratingOuter.appendTo(Rating);
            }

            hot.appendTo($tr);
            Title.appendTo($tr);
            Isdelivery.appendTo($tr);
            Rating.appendTo($tr);
            Price.appendTo($tr);
            Details.appendTo($tr);
            $tr.appendTo($table); //此处appendTo有坑，可以用prependTo
        });
        $table.appendTo(offerListBox);
    }
}

function movehot(offers) {


    if (offers && offers.length > 0) {
        var $div = $('#moveFeatured');

        $.each(offers, function (i, v) {

            var detailUrl = v.Title.replace(/[^\w\s]{1,}/g, "").replace(/\s/g, "-");

            var detail = toLower(v.OfferId + 'a!' + detailUrl.substring(0, 50));


            var $tr = $('<div class="row"></div>');
            var hot = $('<div class="col-xs-12 hot"><img src="' + pastatic + '/images/icon-hot.png" alt="icon-hot"> <a href="' + detail + '" target="_blank" ><span class="txt-hot">' + v.Title + '</span></a></div>');
            var Isdelivery = '';
            var $dsDiv = $('<div class="col-xs-12"></div>');
            if (v.Isdelivery) {
                Isdelivery = $('<div class="col-xs-6"><img src="' + pastatic + '/images/icon-flash.png"><span class="txt-gray">Instant</span> </div>');
            } else {
                Isdelivery = $('<div class="col-xs-6"><img src="' + pastatic + '/images/icon-time.png" alt="icon-time"><span class="txt-gray">' + v.DeliverySpeed.en + '</span> </div>');
            }
            Isdelivery.appendTo($dsDiv);
            if (v.Seller.TotalReviews == 0) {
                var ratingOuter = $(' <div  class="col-xs-6 right"><span>New Seller</span></div>');
                ratingOuter.appendTo($dsDiv);
            } else {
                var ratingOuter = $(' <div  class="col-xs-6 right"><span class="vote-star"><i></i></span><span>' + v.Seller.TotalReviews + '</span></div>');
                ratingStars(ratingOuter, v.Seller.Rating);
                ratingOuter.appendTo($dsDiv);
            }

            var Details = $('<div class="col-xs-12"><div class="col-xs-6"><p class="pt-10">' + currencyTypeLogo + ' ' + v.Price[currencyType].UnitPrice.toFixed(2) + '</p></div><div class="col-xs-6 right"><a  href="' + paURL + 'checkout/checkoutv2-account/?offerid=' + v.OfferId + '&Quantity=1"><button class="btn btn-success btn-buy-now">BUY NOW</button></a></div></div>');
            var $blockToDetail = $('<a class="offer-flow" href="' + detail + '" target="_blank" ></a>');
            hot.appendTo($tr);
            $dsDiv.appendTo($tr);
            Details.appendTo($tr);
            $tr.appendTo($blockToDetail);
            $blockToDetail.appendTo($div);
        });
        $div.appendTo(offerListBox);
    }
}

function movetemplate(offers) {

    $('#moveOffer').empty(); //清空上一次的结果
    if (offers && offers.length > 0) {
        var $div = $('#moveOffer');

        $.each(offers, function (i, v) {

            var detailUrl = v.Title.replace(/[^\w\s]{1,}/g, "").replace(/\s/g, "-");

            var detail = toLower(v.OfferId + 'a!' + detailUrl.substring(0, 50));

            var $tr = $('<div class="row"></div>');
            var hot = $('<div class="col-xs-12 hot"> <a href="' + detail + '" target="_blank" ><span class="txt-hot">' + v.Title + '</span></a></div>');
            var Isdelivery = '';
            var $dsDiv = $('<div class="col-xs-12"></div>');
            if (v.Isdelivery) {
                Isdelivery = $('<div class="col-xs-6"><img src="' + pastatic + '/images/icon-flash.png"><span class="txt-gray">Instant</span> </div>');
            } else {
                Isdelivery = $('<div class="col-xs-6"><img src="' + pastatic + '/images/icon-time.png" alt="icon-time"><span class="txt-gray">' + v.DeliverySpeed.en + '</span> </div>');
            }
            Isdelivery.appendTo($dsDiv);
            if (v.Seller.TotalReviews == 0) {
                var ratingOuter = $(' <div  class="col-xs-6 right"><span>New Seller</span></div>');
                ratingOuter.appendTo($dsDiv);
            } else {
                var ratingOuter = $(' <div  class="col-xs-6 right"><span class="vote-star"><i></i></span><span>' + v.Seller.TotalReviews + '</span></div>');
                ratingStars(ratingOuter, v.Seller.Rating);
                ratingOuter.appendTo($dsDiv);
            }
            var Details = $('<div class="col-xs-12"><div class="col-xs-6"><p class="pt-10">' + currencyTypeLogo + ' ' + v.Price[currencyType].UnitPrice.toFixed(2) + '</p></div><div class="col-xs-6 right"><a  href="' + paURL + 'checkout/checkoutv2-account/?offerid=' + v.OfferId + '&Quantity=1"><button class="btn btn-success btn-buy-now">BUY NOW</button></a></div></div>');
            var $blockToDetail = $('<a class="offer-flow" href="' + detail + '" target="_blank" ></a>');
            hot.appendTo($tr);
            $dsDiv.appendTo($tr);
            Details.appendTo($tr);
            $tr.appendTo($blockToDetail);
            $blockToDetail.appendTo($div);
        });
        $div.appendTo(offerListBox);
    }
}
function initUserlogData() {
    filters.IsFeatured = 0;

    function loadData() {
        var account = init(filters);
        if (account) {
            $('#offers').find('tr:not(".hot-table-row")').remove();//清空上一次的结果
            //数据渲染
            template(account.Offers);
        }
    }
    loadData();
}


//获取下拉列表
function getFilters() {
    var url = api + apiName + gameSeoName + '/Info/?DisplayFileds=Servers';

    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            initFilters(data);
        }, error: function (reason) {
            console.log(reason);
        }
    })
};

function mySelect(configs) {
    var _config = configs || {};
    var container = _config.container;
    if (!container) return false;
    var cb = _config.changeCallback || function () { };
    container.appendChild(renderSelect(_config.data, _config.className));
    var select = container.children[0].children[0].children[0];
    /// addChangeEvent(select, container);

    //function addChangeEvent(oTar, contWrapper) {
    //    oTar.onchange = function () {
    //        var nextSlectStr = this.selectedOptions[0].getAttribute("options");
    //        var nextSlectObj = nextSlectStr && JSON.parse(nextSlectStr);
    //        var tmp = null;
    //        var next = this.parentNode.parentNode;
    //        var oPar = this.parentNode.parentNode.parentNode;
    //        while (next.nextElementSibling) {
    //            oPar.removeChild(next.nextElementSibling);
    //        }
    //        var newSelectDom = renderSelect(nextSlectObj, _config.className);
    //        newSelectDom && (tmp = document.createDocumentFragment(), tmp.appendChild(newSelectDom), contWrapper.appendChild(tmp), addChangeEvent(newSelectDom.children[0].children[0], contWrapper), tmp = null);
    //        typeof cb == "function" && cb.call(this, this);
    //    }
    //}


}
function renderSelect(data, className) {
    var selectStr = '';
    if (data && data.SubCategorys.length < 1 || !data) return null;
    var wrapper = document.createElement("div");
    wrapper.className = "filter-group clearfix " + className;
    selectStr += "<label>\n<select class =\"select select-outer-default-xs pa-form-control pa-form-control-select\" name='select" + data.Id + "'>\n" + renderOption(data.SubCategorys, className) + "\n</select>\n</label>";

    wrapper.innerHTML = selectStr;

    return wrapper;
}
function renderOption(data, className) {
    var _data = data;
    if (!_data) return '';

    var placeholder = '';

    placeholder = (className == 'filter-sub-servers') ? placeholder = 'Select faction' : placeholder = 'Select item';

    var optionStr = '<option value="0" options>' + placeholder + '</option>';
    for (let i = 0, curItem; curitem = _data[i++];) {
        optionStr += "\n<option value=\"" + curitem.Id + "\" options='" + (curitem.SubCategorys && curitem.SubCategorys.length > 0 && JSON.stringify(curitem) || "") + "'>" + curitem.Name.LangCode.en + "</option>\n";
    };
    return optionStr;
}
var allServers = [];
var categorys = [];
var serverSelect = {};
if (GetQueryString('Serverid')) {
    servers.push(GetQueryString('Serverid'));
}
function initFilters(data) {
    var Categorys = data.Result;
    Categorys = JSON.parse(JSON.stringify(Categorys).replace(/'/g, "&#39;"));

    if (Categorys.length <= 1) {
        return;
    }
    serverSelect.SubCategorys = Categorys;

    mySelect({
        container: g("select-server"),
        data: serverSelect,
        className: 'filter-sub-servers',
        changeCallback: function (e) {
            if (this.value) filters.FilterParams.Serverid = this.value;
        }
    });


    $('#select-server select:first option:first').text('Select server');


    mySelect({
        container: g("select-server-xs"),
        data: serverSelect,
        className: 'filter-sub-servers',
        changeCallback: function (e) {
            if (this.value) filters.FilterParams.Serverid = this.value;
        }
    });


    $('#select-server-xs select:first option:first').text('Select server');

    if (servers) {
        initVal('.filter-sub-servers', servers);
        initVal('#select-server-xs .filter-sub-servers', servers);
    }
    addChangeEvent(g("select-server").children[0].children[0].children[0]);
    addChangeEvent(g("select-server-xs").children[0].children[0].children[0]);
}
function addChangeEvent(oTar) {
    oTar.onchange = function () {

        filters.FilterParams.Serverid = $(this).val();
        filters.Pager.PageIndex = 1;
        window.location = queryConfig(filters);
    }
}
function initVal(wrapperClass, data) {
    data.forEach(function (item, index) {
        $(wrapperClass).find("select").eq(index).val(item).triggerHandler("change");
    })
}

function g(id) {
    return document.getElementById(id);
}

$(function () {
    if (GetQueryString('Isdelivery') == 1) {
        $('#paCheckbox,#paCheckbox2').prop('checked', true);
    }

    if (GetQueryString('SortField')) {
        $("#mySelectCtrl select").find("option[value=" + GetQueryString('SortField') + "]").prop("selected", true);
    }

    if (GetQueryString('keyword')) {
        $('.filter-search').val(GetQueryString('keyword'));
    }
    getFilters();
    //hot();
    //initUserlogData();
    $("div.btn-keywords").click(function () {

        filters.FilterParams.keyword = $(this).attr("data-value");
        filters.Pager.PageIndex = 1;
        window.location = queryConfig(filters);
    });
});

function InstantChange(paCheckbox) {

    if ($('#' + paCheckbox).prop('checked')) {
        filters.FilterParams.Isdelivery = 1;
    } else {
        filters.FilterParams.Isdelivery = 0;
    }
    filters.Pager.PageIndex = 1;
    window.location = queryConfig(filters);
}