require('swiper/swiper-3.4.2.jquery.min.js');
var Util = require('util')

class videoRank {
    constructor() {
        this.$videoTypeNav = $('.video-type-nav .video-type__item')
        this.tplList = __inline('../../tpl/videoRank.tmpl')
        this.init()
    }

    init() {
        $parent = $(".video-type-list")
        this.setVideoTypeNav()
        this.initRankList($parent)
    }

    initRankList($parent) {
        var $active = $parent.find('.active');
        var channel = $active.attr("data-channel");
        var tag = $active.attr("data-tag");
        this.getRank(tag, "week", channel);
    }

    setVideoTypeNav() {
        var self = this
        this.$videoTypeNav.click(function () {
            var _this = $(this)
            var is_gameItml = _this.hasClass('game-item');
            if (_this.hasClass('active')) return

            var index = _this.index()
            _this.addClass('active').siblings().removeClass('active')

            var channel = _this.attr("data-channel");
            var tag = _this.attr("data-tag");
            if (!is_gameItml) {
                self.getRank(tag, "week", channel);
            }

            if (_this.parent().hasClass('child-videotype-list')) {
                return false;
            }
            if (is_gameItml) {

                var $parent = $(".child-videotype-list");
                self.initRankList($parent)

                $(".child-videotype-nav").show().find('ul').css('transform', 'translate3d(0px, 0px, 0px)');
                return;
            } else {
                $(".child-videotype-nav").hide();
            }
        })
        //如果地址中含有chanel和tag
        var channel = Util.getParam('channel')
        var tag = Util.getParam('tag')
        var screenWidth = $(window).width()
        if (channel && tag) {
            var $navItem = $(`[data-channel=${channel}][data-tag=${tag}]`)
            if ($navItem.length) {
                //如果是二级导航 则把游戏标为active
                if ($navItem.parent().hasClass('child-videotype-list')) {
                    var $gameItemWrap = $('.child-videotype-nav')
                    $gameItemWrap.show()
                    $('.game-item').addClass('active').siblings().removeClass('active')
                    $gameItemWrap.find('ul').css('transform', `translate3d(-${Math.floor($navItem.offset().left - screenWidth / 2 + $navItem.innerWidth()/2)}px, 0px, 0px)`)
                }
                $navItem.click()
            }
        }
    }

    getRank(tag, sortBy, channel) {
        var self = this;
        tag = (tag == "all") ? "" : tag;
        channel = (channel == "all") ? "" : channel;

        var url = "http://video.duowan.com/?r=jsapi/getRankByTag&tag=" + tag + "&sortBy=" + sortBy + "&channel=" + channel + "&limit=50";

        $(".video-list-container .video-main-content").html("");

        $.ajax({
            url: url,
            dataType: 'jsonp',
            success: function (ret) {
                //console.log(ret);
                var dom = self.tplList({ data: ret });
                $(".video-main-content").html(dom);
            }
        })
    }
}


$(() => {
    
    var swiper = new Swiper('.video-type-nav', {
        slidesPerView: 'auto',
        freeMode: true
    });
    var swiper = new Swiper('.child-videotype-nav', {
        slidesPerView: 'auto',
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        freeMode: true
    });

    new videoRank()
})
