const $body = $('body')
class Carousel {
    constructor(config) {
        this.defaultConfig = {
            isLoop: true,//默认循环播放
            isAuto: true,//默认自动播放
            isClick: false,
            duration: 500,//轮播图片之间切换的时间间隔
            interval: 2000,//自动播放的时间间隔
            curIdx: 1,//当前播放图片的索引
            curTriggerCls: 'active',//当前活跃的按钮类名
            timer: null//定时器
        }
        config = $.extend({}, this.defaultConfig, config)
        this.config = config

        this.$prevSlt = this.config.prevSlt
        this.$nextSlt = this.config.nextSlt
        this.$slider_wrap = $(this.config.slider_wrap)
        this.$slider = $(this.config.slider)
        this.$slider_items = $(this.config.slider_items)
        this.$trigger = $(this.config.trigger)
        this.$trigger_items = $(this.config.trigger_items)

        this.bindEvent()
        this.autoPlay()

    }
    bindEvent() {
        this.$slider_wrap.on('click', this.$prevSlt, () => {
            //防止频繁点击
            if (this.config.isClick) return
            this.config.isClick = true
            window.setTimeout(() => { this.prev() }, 1000)
        });
        this.$slider_wrap.on('click', this.$nextSlt, () => {
            //防止频繁点击
            if (this.config.isClick) return
            this.config.isClick = true
            window.setTimeout(() => { this.next() }, 1000)
        })
        if (this.config.isAuto) {
            this.$slider_wrap.on('mouseenter', `${this.$prevSlt}, ${this.$nextSlt}, li`,
                () => {
                    this.stop()
                    return false
                }
            );
            this.$slider_wrap.on('mouseleave', `${this.$prevSlt}, ${this.$nextSlt}, li`,
                () => {
                    this.autoPlay();
                    return false;
                },
            );
        }

        this.$trigger.on('click', this.config.trigger_items, (e) => {
            e = e || window.event
            let idx = $(e.target).index()
            this.triggerOn(idx + 1)
            this.animate(idx + 1)
        })

    }
    stop() {
        window.clearInterval(this.timer)
        this.timer = null
    }
    autoPlay() {
        this.timer = window.setInterval(() => {
            this.next()
        }, 2000)
        if (!this.config.isAuto) this.stop()
    }
    prev() {
        this.go(this.config.curIdx - 1)
        this.config.isClick = false
    }
    next() {
        this.go(this.config.curIdx + 1)
        this.config.isClick = false
    }
    go(idx) {
        if (this.config.isLoop) {
            if (idx < 1) {
                idx = this.$slider_items.length - 2
                this.$slider.css('left', -$(this.$slider_items[0]).width() * 4)
            }
            if (idx > this.$slider_items.length - 2) {
                idx = 1
                this.$slider.css('left', 0)
            }
        } else if (idx < 1 || idx > this.$slider_items.length - 2) return
        if (idx === this.config.curIdx) return

        this.config.curIdx = idx
        this.triggerOn(idx)
        this.animate(idx)
    }

    triggerOn(idx) {
        this.$trigger_items.removeClass(this.config.curTriggerCls)
        $(this.$trigger_items[idx - 1]).addClass(this.config.curTriggerCls)
    }
    animate(idx) {
        this.$slider.animate({
            left: -idx * $(this.$slider_items[0]).width()
        }, this.config.duration)
    }
}

$(() => {
    let carousel = new Carousel({
        slider_wrap: '.J_slider_wrap',
        slider: '.J_slider',
        slider_items: '.J_slider_item',
        trigger: '.J_trigger',
        trigger_items: '.J_trigger_item',
        prevSlt: '.J_prev',
        nextSlt: '.J_next',
        isAuto: false,
        // isLoop:false
    })
});