// js 封装插件
// 给浏览器使用（前端）window
// 给nodejs 服务端使用的（后端）

// 自执行函数



// 自执行函数，形成局部作用域
(function (win) {


    var defaultSetting = {
        time: 3,
        containerClassName: '.container',
        NavigationClassName: '.navigation',
        next: '.next',
        previous: '.prev',
        autoPlay: false,
        data: [],
        imgWidth: 0
    }

    // es5  构造函数
    // 主要做 变量的保存和校验
    function LunBo(setting) {

        defaultSetting.time = setting.time || defaultSetting.time
        defaultSetting.containerClassName = setting.containerClassName || defaultSetting.containerClassName
        defaultSetting.NavigationClassName = setting.NavigationClassName || defaultSetting.NavigationClassName
        defaultSetting.next = setting.next || defaultSetting.next
        defaultSetting.previous = setting.previous || defaultSetting.previous
        defaultSetting.autoPlay = setting.autoPlay || defaultSetting.autoPlay
        defaultSetting.data = setting.data || defaultSetting.data

        if ( defaultSetting.data.length == 0 || (document.querySelector(defaultSetting.containerClassName) == null ||
        document.querySelector(defaultSetting.NavigationClassName) == null||
        document.querySelector(defaultSetting.next) == null||
        document.querySelector(defaultSetting.previous) == null)) {
                console.error("类名不存在或data数据源为空，请仔细检查")
            } else {
               this.init() 
            }
    }

    LunBo.prototype = {
        init() {
            this.RenderContainer()
            this.RenderNavigation()
            this.BindPreviousClick()
            this.BindNextClick()

            setTimeout(() => defaultSetting.imgWidth = document.querySelector("img").width, 300)
            
        },


        // 渲染 轮播图的数据到页面
        RenderContainer() {
            // var ddd = this;
            defaultSetting.data.forEach((val,index) => {
                this.$(defaultSetting.containerClassName).innerHTML += 
                `
                 <li>
                    <a target="_blank" href="${val.href}">
                      <img src="${val.imgUrl}" alt="">
                    </a>
                 </li>
                `
            });

        },

        // 渲染小圆点
        RenderNavigation() {
            defaultSetting.data.forEach((val,index) => {
                this.$(defaultSetting.NavigationClassName).innerHTML +=
                `
                    <li class="${index == 0 ? 'active' : ''}"></li>
                `
            });
            this.BindYdClick()
        },


        changeActiveYd() {
            var index = Math.abs(parseInt(this.$(defaultSetting.containerClassName).style.left)) / defaultSetting.imgWidth;
            var LiArr = document.querySelectorAll(`${defaultSetting.NavigationClassName} li`);
            LiArr.forEach(function(val){
                val.className = ""
            })
            LiArr[index].className = "active"
        },

        // 小圆点绑定事件
        BindYdClick() {
            var LiArr = document.querySelectorAll(`${defaultSetting.NavigationClassName} li`);
            LiArr.forEach((val,index) => {
                val.onclick = () => {
                    LiArr.forEach(function(v){
                        v.className = ""
                    })
                    val.className = "active"
                    this.$(defaultSetting.containerClassName).style.left = `${index * -defaultSetting.imgWidth}px`;
                }
            })
        },


        // 右侧下一页数
        BindPreviousClick() {
            this.$(defaultSetting.previous).onclick = () => {
                this.OffSetDistance(-defaultSetting.imgWidth)
                this.changeActiveYd()
            }
        },

        // 左侧上一页
        BindNextClick() {
            this.$(defaultSetting.next).onclick = () => {
                this.OffSetDistance(defaultSetting.imgWidth)
                this.changeActiveYd()
            }
        },


        OffSetDistance(nums) {
            
            var Offset = parseInt(this.$(defaultSetting.containerClassName).style.left) + nums;
            // console.log("Offset: ", Offset)
            var maxWidth = defaultSetting.imgWidth * (defaultSetting.data.length - 1);

            // console.log("maxWidth: ", maxWidth)

            this.$(defaultSetting.containerClassName).style.left = `${Offset}px`
            
            if (Offset <  -maxWidth ) {
                this.$(defaultSetting.containerClassName).style.left = "0px";
            }
        
            if (Offset > 0) {
                this.$(defaultSetting.containerClassName).style.left = `-${maxWidth}px`;
            }
        },

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

    win.Swiper = LunBo


})(window)

// es6 语法糖
// js代码转换工具 babel
// class Lunbo {

//     constructor(setting) {
//         this.init()
//     }

//     init () {

//     }
// }

// function init() {

// }

// var ddd = new Lunbo({
//     id: 3
// });
// ddd.init()