// 自执行（匿名）函数
(function () {
    // 默认参数
    var defaultOption = {
        time: 3,
        imgClick: function () {

        }
    };

    var DomEle = {
        main: null,
        Dot: null,
        Pic: null,
        Action: null,
        LeftAction: null,
        RightAction: null,
        ImgWidth: 0,
        AutoPlay: null,
    };

    function swiper (Option) {
        if (Option.hasOwnProperty("el") && document.querySelector(Option.el) !== null) {
            if (Option.hasOwnProperty("data") && Option.data.length !== 0) {
                // 可选参数的合并
                Object.assign(defaultOption, Option)
                this.init()

            } else {
                console.error(`data未传，或是data数组为空，请检查`)
            }
        } else {
            console.error(`el未传，或是类名${Option.el}不存在，请检查`)
        }
    }

    swiper.prototype = {
        init: function () {
            console.log("检查工作已经结束，开始绘制轮播图")
            // 创建dom，追加到网页上
            this.CreatedMain();
            this.CreatedPic();
            this.CreatedYd();

            document.querySelector(defaultOption.el).appendChild(DomEle.main);

            if (defaultOption.isAction) {
                this.CreatedAction()
                this.BindRightClick();
                this.BindLeftClick();
            }
            this.BindClickYdLi();
            this.BindOnmouseover();
            this.BindOnmouseout();
            this.Auto();
        },

        /**
         * 绑定左边按钮的点击事件
         * @constructor
         */
        BindLeftClick() {
            DomEle.LeftAction.onclick = () => this.change(DomEle.ImgWidth)
        },

        /**
         * 绑定右边按钮的点击事件
         * @constructor
         */
        BindRightClick: function () {
            // var dd = this;
            DomEle.RightAction.onclick = () => this.change(-DomEle.ImgWidth)
        },

        BindClickYdLi() {
            var self = this;
            DomEle.Dot.childNodes.forEach(function (v,ix){
                v.onclick = function () {
                    self.ClearActive()
                    this.className = "active"
                    var left = ix * -DomEle.ImgWidth;
                    DomEle.Pic.style.left = `${left}px`
                }
            })
        },

        /**
         * 鼠标悬停
         * @constructor
         */
        BindOnmouseover() {
            DomEle.main.onmouseover = function () {
                clearInterval(DomEle.AutoPlay)
            }
        },

        /**
         *
         * @constructor
         */
        BindOnmouseout() {
            DomEle.main.onmouseout = () => {
                this.Auto()
            }
        },

        Auto() {
            DomEle.AutoPlay = setInterval(() => {
                this.change(-DomEle.ImgWidth)
            }, defaultOption.time * 1000);
        },

        /**
         * 主要动画过渡
         * @param off number 传入的偏移距离
         */
        change: function (off) {
            var oldLeft = parseInt(DomEle.Pic.style.left);
            var newLeft = oldLeft + (off);
            var index = parseInt(`${(newLeft / -DomEle.ImgWidth)}`);

            if (newLeft > 0) {
                newLeft = -( (defaultOption.data.length-1) * DomEle.ImgWidth )
                index = 2
            }

            if (newLeft < -( (defaultOption.data.length-1) * DomEle.ImgWidth )) {
                newLeft = 0;
                index = 0
            }

            this.ClearActive()
            DomEle.Dot.childNodes[index].className = "active";
            DomEle.Pic.style.left = `${newLeft}px`
        },

        ClearActive() {
            DomEle.Dot.childNodes.forEach(function (a,b){
                a.className = ""
            });
        },

        /**
         * 创建最外层父节点main
         * @constructor
         */
        CreatedMain: function () {
            DomEle.main = document.createElement("div")
            DomEle.main.className = "main";
        },

        /**
         * 图片父节点
         * @constructor
         */
        CreatedPic: function () {
            DomEle.Pic = document.createElement("ul");
            DomEle.Pic.className = "pic";
            DomEle.Pic.style.left = "0px"
            defaultOption.data.forEach((val,index)=> {
                DomEle.Pic.innerHTML += `
                    <li>
                      ${
                          val.hasOwnProperty("href")
                          ? `<a href="${val.href}" target="_blank"><img src="${val.img}"></a>`
                          : `<img src="${val.img}" >`
                        }
                    </li>
                `
            });
            if (defaultOption.data[0].hasOwnProperty("href")) {
                DomEle.ImgWidth = DomEle.Pic.children[0].children[0].children[0].width;
            } else {
                DomEle.ImgWidth = DomEle.Pic.children[0].children[0].width;
                DomEle.Pic.querySelectorAll("li").forEach((val,index)=> {
                    val.onclick = function () {
                        defaultOption.imgClick(val,index)
                    }
                })
            }

            DomEle.main.appendChild(DomEle.Pic)
        },

        /**
         * 左右翻页按钮父节点
         * @constructor
         */
        CreatedAction: function () {
            DomEle.Action = document.createElement("div");
            DomEle.LeftAction = document.createElement("div");
            DomEle.RightAction = document.createElement("div");

            DomEle.Action.className = "action";
            DomEle.LeftAction.className = "left";
            DomEle.RightAction.className = "right";

            DomEle.LeftAction.innerText = "<";
            DomEle.RightAction.innerText = ">";


            DomEle.Action.appendChild(DomEle.LeftAction)
            DomEle.Action.appendChild(DomEle.RightAction)

            DomEle.main.appendChild(DomEle.Action)

        },

        /**
         * 小圆点的父节点
         * @constructor
         */
        CreatedYd: function () {
            DomEle.Dot = document.createElement("ul");
            DomEle.Dot.className = "yd";

            defaultOption.data.forEach((val,index)=> {
                DomEle.Dot.innerHTML += `<li class="${ index == 0 ? 'active': '' }"></li>`
            });
            DomEle.main.appendChild(DomEle.Dot)
        },
    }


    window.Swiper = swiper
})()

// function data() {
//     var name = "ddd"
//     console.log(name)
//     console.log(this.name)
// }
//
// data.prototype.name = "dddd"
//
// new data()

// class data {
//     constructor() {
//
//     }
//
// }
//
// new data()