$(function () {
    /* SHOPS组件 BEGIN */
    $('.provinces-list li.expandable').on("click", function () {
        provinceClick($(this));
    });

    $('.display-below').on("click", ".cities-line li", function () {
        cityClick($(this));
    });

    // 追加城市列表
    function appendCities(brandId, data, element) {
        var htmlStr = "";
        for (var i = 0; i < data.length; i++) {
            htmlStr += "<li><ul class='cities-line'>";
            for (var j = 0; j < data[i].length; j++) {
                htmlStr += "<li data-id='" + brandId + "' data-code='" + data[i][j].id + "'>" + data[i][j].area_name + "</li>";
            }
            htmlStr += "</ul></li>";
        }
        element.find(".cities-list").html(htmlStr);
    }

    // 追加店铺列表
    function appendShops(data, element) {
        var htmlStr = "";
        for (var i = 0; i < data.length; i++) {
            htmlStr += ('<li><dl><dt><i></i>' + data[i]['shop_name'] + '</dt><dd>')
                + (data[i]['shop_address'] ? 'A: <span>' + data[i]['shop_address'] + '</span>' : '')
                + (data[i]['shop_tel'] ? ' | T: <span>' + data[i]["shop_tel"] + '</span>' : '')
                + '</dd></dl></li>';
        }
        element.find(".shops-list").html(htmlStr);
        !element.hasClass("actived") && element.addClass("actived");
        //隐藏shops-list滚动条
        $('.shops-list-container').mCustomScrollbar({
            autoHideScrollbar: true,
            theme: "minimal",
            advanced: {updateOnContentResize: true}
        });
    }

    function provinceClick(current_element) {
        var element = current_element.closest(".provinces-container").next();
        if (current_element.hasClass("actived")) {
            //关闭所有展开,移除全部actived
            $(".shops-content .actived").removeClass("actived");
        } else {
            $(".provinces-list li.expandable").removeClass("actived");
            $(".shops-container").removeClass("actived");
            if (!element.hasClass("actived")) {
                $(".display-below").removeClass("actived");
                element.addClass("actived");
            }
            $.ajax({
                type: "GET",
                url: url_get_cities,
                data: {"brandId": brand_id, "areaCode": current_element.data('code'), "areaLevel": area_level},
                dataType: "json",
                success: function (data) {
                    appendCities(brand_id, data, element);
                },
                error: function (err) {
                }
            });
            current_element.addClass("actived");
        }
    }

    function cityClick(current_element) {
        var element = current_element.closest(".cities-container").next();
        if (current_element.hasClass("actived")) {
            $(".display-below .actived").removeClass("actived");
        } else {
            $('.shops-list-container').mCustomScrollbar('destroy');
            $(".cities-line li").removeClass("actived");
            current_element.addClass("actived");
            $.ajax({
                type: "GET",
                url: url_get_shops,
                data: {"brandId": brand_id, "cityCode": current_element.data('code')},
                dataType: "json",
                success: function (data) {
                    appendShops(data, element);
                },
                error: function (err) {
                }
            });
        }
    }

    // 搜索事件
    var searchObj = $(".shops .search-box input");
    searchObj.on("keyup", function (event) {
        if (event.which === 13 || event.keyCode === 13) {
            var keyword = searchObj.val();
            $.ajax({
                type: "GET",
                url: url_query_area,
                data: {"brandId": brand_id, "keyword": keyword, "rootLevel": area_level},
                dataType: "JSON",
                success: function (res) {
                    if (res.error) {
                        $(".shops-content .actived").removeClass("actived");
                        $(".shops .no-result").show();
                    } else {
                        $(".shops .no-result").hide();
                    }
                    var ele = $(".provinces-list li.expandable[data-code='" + res.provinceId + "']");
                    // 更改省份选中状态
                    $(".provinces-list li.expandable").removeClass('actived');
                    ele.addClass('actived');
                    // 获取城市
                    if (res.cities.length > 0) {
                        var cityEle = ele.closest('.provinces-container').next();
                        searchAppendCities(res, cityEle);
                    }
                    // 获取店铺
                    if (res.shops.length > 0) {
                        var shopEle = ele.closest('.provinces-container').next().find(".shops-list");
                        searchAppendShops(res.shops, shopEle);
                    }
                },
                error: function (err) {}
            });
        }
    });

    // search追加城市列表
    function searchAppendCities(res, element) {
        $(".shops-container").removeClass('actived');
        var htmlStr = "";
        var data = res.cities;
        for (var i = 0; i < data.length; i++) {
            htmlStr += "<li><ul class='cities-line'>";
            for (var j = 0; j < data[i].length; j++) {
                var active = res.cityId == data[i][j].id ? "class='actived'" : "";
                htmlStr += "<li data-code='" + data[i][j].id + "'" + active + ">" + data[i][j].area_name + "</li>";
            }
            htmlStr += "</ul></li>";
        }
        element.find(".cities-list").html(htmlStr);
        element.addClass('actived');
    }

    // search追加店铺列表
    function searchAppendShops(data, element) {
        var htmlStr = "";
        for (var i = 0; i < data.length; i++) {
            htmlStr += ('<li><dl><dt><i></i>' + data[i]['shop_name'] + '</dt><dd>')
                + (data[i]['shop_address'] ? 'A: <span>' + data[i]['shop_address'] + '</span>' : '')
                + (data[i]['shop_tel'] ? ' | T: <span>' + data[i]["shop_tel"] + '</span>' : '')
                + '</dd></dl></li>';
        }
        element.html(htmlStr);
        $(".shops-container").addClass('actived');
        //隐藏shops-list滚动条
        $('.shops-list-container').mCustomScrollbar({
            autoHideScrollbar: true,
            theme: "minimal",
            advanced: {updateOnContentResize: true}
        });
    }


    /* SHOPS组件 END */

    /* MAP组件 BEGIN */
    (function ($) {
        var isMapAnimationPlaying = false;
        $('.map-service').on('click mousewheel DOMMouseScroll', function (event) {
            if(isMapAnimationPlaying){
                return false;
            }
            if (event.deltaY < 0 && $(".animate-in").length) {
                isMapAnimationPlaying = true;
                $(".animate-in").removeClass("animate-in");
                var options = {
                    duration: 1000,
                    easing: 'linear'
                };
                $(".brand-grow-text").addClass('animate-out');
                $(".shops-number").addClass('animate-out');
                !$(".provinces-text").is(":animated") && $(".provinces-text").animate({
                    left: '100%',
                }, options);
                $(".provinces-number").addClass('animate-out');
                !$(".provinces-text span").is(":animated") && $(".provinces-text span").animate({
                    opacity: 0,
                }, options);
                !$(".x-symbol").is(":animated") && $(".x-symbol").animate({
                    opacity: 0,
                }, options);
                !$(".shops-text").is(":animated") && $(".shops-text").animate({
                    opacity: 0,
                }, options);
                !$(".start-screen .china-map").is(":animated") && $(".start-screen .china-map").animate({
                    opacity: 1,
                }, 1000, 'linear', function () {
                    $(".start-screen").removeClass('actived') && $(".map-container").addClass('actived');
                    isMapAnimationPlaying = false;
                });
                return false;
            } else if (event.deltaY > 0 && $(".animate-out").length) {
                initializationAnimation(1);
                return false;
            }
        });
        var animation_1_options = {
            duration: 1000,
            easing: "linear",
            done: animation_2
        };
        var animation_2_options = {
            duration: 1000,
            easing: "linear",
            complete: animation_3
        };
        var animation_3_options = {
            duration: 1000,
            easing: "linear",
            complete: function () {
                //动画播完
                isMapAnimationPlaying = false;
            }
        };

        function animation_1() {
            $(".brand-grow-text").addClass('animate-in');
            !$(".provinces-text").is(":animated") && $(".provinces-text").animate({
                left: '50%',
            }, animation_1_options);
        }

        function animation_2() {
            if (shops_number_offline != null) {
                $(".shops-number").css('display', 'block');
                var shops_number_counter = new CountUp('shops-number-counter', 0, shops_number_offline, 0, 1);
                !shops_number_counter.error && shops_number_counter.start();
            }
            if (provinces_number != null) {
                $(".provinces-number").css('display', 'block');
                var provinces_number_counter = new CountUp('provinces-number-counter', 0, provinces_number, 0, 1);
                !provinces_number_counter.error && provinces_number_counter.start();
            }
            !$(".x-symbol").is(":animated") && $(".x-symbol").animate({
                opacity: 1,
            }, animation_2_options);
        }

        function animation_3() {
            !$(".provinces-text span").is(":animated") && $(".provinces-text span").animate({
                opacity: 1,
            }, animation_3_options);
            !$(".shops-text").is(":animated") && $(".shops-text").animate({
                opacity: 1,
            }, animation_3_options)
        }

        function initializationAnimation(state) {
            isMapAnimationPlaying = true;
            //state状态值:0为默认值，为初始时播放动画，1为动画播放完毕，滚轮上滑切换回开始动画
            state = state || 0;
            if (shops_number_offline != null) {
                $(".shops-number").css('display', 'none');
                $("#shops-number-counter").text(0);
            }
            if (provinces_number != null) {
                $(".provinces-number").css('display', 'none');
                $("#provinces-number-counter").text(0);
            }
            $(".animate-out").removeClass("animate-out");
            $(".map-container").removeClass('actived') && $(".start-screen").addClass('actived');
            if (state == 1) {
                !$(".start-screen .china-map").is(":animated") && $(".start-screen .china-map").animate({
                    opacity: 0.3,
                }, 1000, 'linear');
            }
            animation_1();
        }

        function resumeState() {
            isMapAnimationPlaying = true;
            if (shops_number_offline != null) {
                $(".shops-number").css('display', 'none');
                $("#shops-number-counter").text(0);
            }
            if (provinces_number != null) {
                $(".provinces-number").css('display', 'none');
                $("#provinces-number-counter").text(0);
            }
            $(".animate-in").removeClass('animate-in');
            $(".animate-out").removeClass('animate-out');
            $(".map-container").removeClass('actived') && $(".start-screen").addClass('actived');
            $(".provinces-text").stop(true);
            $(".provinces-text").css('left', '100%');
            $(".provinces-text span").stop(true);
            $(".provinces-text span").css('opacity', 0);
            $(".x-symbol").stop(true);
            $(".x-symbol").css('opacity', 0);
            $(".shops-text").stop(true);
            $(".shops-text").css('opacity', 0);
            $(".start-screen .china-map").stop(true);
            $(".start-screen .china-map").css('opacity', .3);
            isMapAnimationPlaying = false;
        }

        $(".brand-carousel").on('afterChange', function (event, slick, currentSlide) {
            if (currentSlide == 2) {
                initializationAnimation();
            }
        });
        $('.brand-carousel').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
            if (currentSlide == 2) {
                resumeState();
            }
        });
    })(jQuery);

    /* MAP组件 END */
})