// // 自执行函数
// // 好处？
//

class Swiper {

    defaultOption = {
        TimeId: null,
        autoPlay: false,
        time: 1000,
        initialSlide: 0, // 实现了
        el: '.swiper',
        on: { },
        length: () => this._f(`.swiper_wrap li`).length,
        width: () => this.$f(``).offsetWidth,
        initSlideLeft: () => {
            this.$f(".swiper_wrap").style.left = `${
                this.defaultOption.initialSlide * -this.defaultOption.width()
            }px`
        }
    }

    // 构造函数里面接受
    constructor (el, option) {

        if (el.length == 0 || this.$(el) == null) {
            console.error(`类名:${el}不存在，请检查`);
        } else {
            this.defaultOption.el = el || this.defaultOption.el;
            this.defaultOption.autoPlay = option.autoPlay || this.defaultOption.autoPlay;
            this.defaultOption.time = option.time || this.defaultOption.time;
            this.defaultOption.initialSlide = option.initialSlide || this.defaultOption.initialSlide;
            if (option.hasOwnProperty("on")) {
                this.defaultOption.on = option.on
            }
            this.init()
        }
      
    }

    init() {
        this.defaultOption.initSlideLeft()
        if (this.$f(".button") != null) {
            this.next()
            this.prev()
        }

        this.defaultOption.autoPlay 
          ? this.autoPlay()
          : ''

        this.$f(".dot") == null ? '' :  this.renderDot()
        
    }

    next() {
        this.click(".right", (v) => this.sport(1))
    }

    prev() {
        this.click(".left", v => this.sport(-1))
    }


    changeDotActive(i) {
        this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(i)

        if (this.$f(".dot") != null) {
            this._f(".dot li").forEach(val =>  val.classList.remove("active"))
            this._f(".dot li")[i].classList.add("active")
        }
        this.$f(".swiper_wrap").style.left = `${i * -this.defaultOption.width()}px`
    }

    renderDot() {  
        for (var i = 0; i < this.defaultOption.length(); i++) {
            this.$f(".dot").innerHTML += `
             <li class="${i == this.defaultOption.initialSlide ? 'active' : '' }"></li>
            `
        }
        this.click(".dot li", (v,i) => this.changeDotActive(i))
    }

    autoPlay() {
        this.defaultOption.TimeId = setInterval(() => this.sport(1), this.defaultOption.time)
        this.$f("").onmouseover = () => clearInterval(this.defaultOption.TimeId)
        this.$f("").onmouseout = () => this.autoPlay()
    }

    sport(offset) {
        this.defaultOption.initialSlide += offset

        if (this.defaultOption.initialSlide < 0) {
            this.defaultOption.initialSlide = 0
        }
        if (this.defaultOption.initialSlide > this.defaultOption.length() - 1) {
            this.defaultOption.initialSlide = this.defaultOption.length() - 1
        }
        if (this.defaultOption.initialSlide >= 0 && this.defaultOption.initialSlide <= this.defaultOption.length() - 1) {
            this.changeDotActive(this.defaultOption.initialSlide)
        }
    }

    slideTo(index) {
        this.changeDotActive(index)
    }

    click(className, callback) {
        this._f(className).forEach((v,i) => v.onclick = () => callback(v,i))
    }


    
    $f(className) {
        return this.$(`${this.defaultOption.el} ${className}`)
    }

    _f(className) {
        return this._(`${this.defaultOption.el} ${className}`)
    }



    $(className) {
        return document.querySelector(className)
    }

    _(className) {
        return document.querySelectorAll(className)
    }

}

// 为什么要 new 
//  x 类的 实例
// var x = new Swiper(1000);
// x.test()


// 哪些功能需要自定义？
//  是否需要自动播放
//  设置自动播放的时间间隔
//  可以设置默认显示第几张
//  如果不写html，就不需要对应的功能
//  可以js编程控制轮播图滚动到第几张
//   当轮播图滚动的时候要抛出当前下标


// this 指向
//   函数执行的时候才能确定this到底指向谁, 
//    实际上this的最终指向的是那个调用它的对象
// var time = 4000

// var a = {
//     time: 2000,
//     b: () => {
//         this.time = 5000;
//         var test = () => {
//             console.log(this.time);
//         }

//         return test
//     }
// }

// var dddd = a.b()
// dddd()


// 箭头函数  和  普通函数的区别

//  如何改变this 指向？？
 //  https://www.runoob.com/w3cnote/js-call-apply-bind.html



 // 继承

//  class car {
//     color = "red";
//     speed = null;
//     start() {}
//     stop() {}
//  }


//  class mtc extends car {

//     constructor(dddd) {
//         super()
//         this.par = dddd
//         console.log(this.par);
//     }

//     size() {
//         console.log("摩托车很小：",this.color);
//     }
//  }


//  class jhc extends car {
//     rescue() {
//         console.log("救人");
//     }
//  }

//  var mt = new mtc("1")
// //  mt.size()