window.onload = function () {


    $('.users div').on('click', function() {
        $('.users div').removeClass('u-active');
        $(this).addClass('u-active')

    })

    $('.pc .tab div').on('click', function (e) {
        if ($(this).hasClass('tab-active')) return;

        $.each($('.tab div'), function (item, index) {
            $(this).removeClass('tab-active')
        });

        $(this).addClass('tab-active');
        let el = $(this)[0]
        $('.tab-content img').attr('src', `https://cdn.gaozhimage.com/h5/rf/tab/pc-${el.dataset.index}-content.png`)
    });

    $('.mobile .tab div').on('click', function (e) {
        if ($(this).hasClass('tab-active')) return;

        $.each($('.tab div'), function (item, index) {
            $(this).removeClass('tab-active')
        });

        $(this).addClass('tab-active');
        let el = $(this)[0]
        $('.tab-content img').attr('src', `https://cdn.gaozhimage.com/h5/rf/tab/m-${el.dataset.index}-content.png`)
    });

    var $dropEl = $('.scroll-bar .img');
    var $moveEl = $('.scroll-bar');
    var flag = false;
    var initLeft = 0;
    $dropEl.on('mousedown', function () {
        flag = true
        $dropEl.css('pointer-events', 'none');
    })
    $dropEl.on('mousedown', function (e) {
        flag = true
        initLeft = e.offsetX
    })

    $moveEl.on('mousemove', function (e) {
        if(flag) {
            var el = $moveEl[0]
            var drop = $dropEl[0]
            var cw = $('.scroll-wrap')[0].clientWidth - $('.scroll-box')[0].clientWidth

            var left = e.offsetX - initLeft
            var barScrollWidth = el.clientWidth - drop.clientWidth
            left = left < 0 ? 0 : (left + drop.clientWidth) > el.clientWidth ? barScrollWidth : left
            $dropEl.css('left', left + 'px')
            $('.scroll-box')[0].scrollLeft = left / barScrollWidth * cw
        }
    })

    $(document).on('mouseup', function () {
        flag = false
        $dropEl.css('pointer-events', 'all');
    })


    new Swiper('.swiper-container', {
        // direction: 'hortizatiol', // 垂直切换选项
        // effect : 'fade',
        loop: true,
        autoplay: true,
        preventClicksPropagation: false,
        initialSlide: 0,
        on: {
            init: function () {
            },
            slideChangeTransitionEnd: function () {
            }
        }
    });
}