// 保护
(function () {

    // 类的构造函数
    function swiper (el,option) {
       this.defaultOption = {
        el: '.swiper',
        width () {
          return $(this.el).clientWidth
        },
        timer: null,
        time: 3000,
        initialSlide: 0,
        direction: 'vertical',
        speed: 800,
        grabCursor: false,
        loop: false,
        autoplay: false,
        swiperWrapper: '.swiper-wrapper',
        on: {

        },
        pagination: {
          el: '.swiper-pagination',
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.next',
          prevEl: '.prev',
        },
        // 事件控制中心，主要保存事件的
        eventList: {}
      }

       if (typeof el == "string") {

         this.defaultOption.el = el || this.defaultOption.el;
         this.defaultOption.time = option.time || this.defaultOption.time;
         this.defaultOption.initialSlide = option.initialSlide || this.defaultOption.initialSlide;
         this.defaultOption.direction = option.direction || this.defaultOption.direction;
         this.defaultOption.speed = option.speed || this.defaultOption.speed;
         this.defaultOption.grabCursor = option.grabCursor || this.defaultOption.grabCursor;
         this.defaultOption.loop = option.loop || this.defaultOption.loop;
         this.defaultOption.autoplay = option.autoplay || this.defaultOption.autoplay;
         this.defaultOption.swiperWrapper = option.swiperWrapper || this.defaultOption.swiperWrapper;

           if (option.hasOwnProperty("pagination")) {
             this.defaultOption.pagination.el = option.pagination.el || this.defaultOption.pagination.el;
           }

           if (option.hasOwnProperty("navigation")) {
             this.defaultOption.navigation.nextEl = option.navigation.nextEl || this.defaultOption.navigation.nextEl;
             this.defaultOption.navigation.prevEl = option.navigation.prevEl || this.defaultOption.navigation.prevEl;
           }

           if (option.hasOwnProperty("on")) {
               for (const key in option.on) {
                 this.defaultOption.on[key] = option.on[key]
               }
           }


           this.next = $(this.defaultOption.navigation.nextEl);
           this.wrapper = $(this.defaultOption.swiperWrapper);

           this.prev = $(this.defaultOption.navigation.prevEl);
           this.pagination = $(this.defaultOption.pagination.el);
           this.el = $(this.defaultOption.el);

           this.init();

       } else {
           throw new Error("最外层父节点的类名必传")
       }
    }

    // 类的方法
    swiper.prototype = {
        init () {
            this.CreatedPagination();
            this.setInitialSlide();
            this.setGrabCursor();

            if (this.defaultOption.autoplay) {
                this.autoPlay();
                this.el.onmouseover = () => clearInterval(this.defaultOption.timer);
                this.el.onmouseout = () => this.autoPlay();
            }

            this.nextClick();
            this.prevClick();

            this.initSwiperSlide();
        },
      /**
       * 注册移动端滑动
       */
      initSwiperSlide: function () {
        var fa = this.el,
          startX = 0,
          startY = 0;

        fa.addEventListener('touchstart', function (e) {
          e.stopPropagation()
          startX = e.targetTouches[0].pageX
          startY = e.targetTouches[0].pageY
        })

        var getDirection = function (startx, starty, endx, endy) {
          // 获得角度
          var getAngle = function(angx, angy) {
            return Math.atan2(angy, angx) * 180 / Math.PI;
          };

          var angx = endx - startx;
          var angy = endy - starty;
          var result = 0;

          // 如果滑动距离太短
          if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
            return result;
          }

          var angle = getAngle(angx, angy);
          if (angle >= -135 && angle <= -45) {
            result = 1;
          } else if (angle > 45 && angle < 135) {
            result = 2;
          } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
            result = 3;
          } else if (angle >= -45 && angle <= 45) {
            result = 4;
          }

          return result;
        }

        fa.addEventListener('touchmove', (e) => {
          e.stopPropagation()
          var endX = e.changedTouches[0].pageX;
          var endY = e.changedTouches[0].pageY;

          var direction = getDirection(startX, startY, endX, endY);
          // if (direction == 3 || direction == 4) {
          //   var x = parseInt(endX - startX) - 40
          //   // this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(${x}px,0px,0px)`;
          // }
        });

        fa.addEventListener('touchend', (e) => {
          e.stopPropagation()
          var endX = e.changedTouches[0].pageX;
          var endY = e.changedTouches[0].pageY;

          var direction = getDirection(startX, startY, endX, endY);

          switch (direction) {
            case 0:
              console.log("未滑动！");
              break;
            case 1:
              console.log("向上！")
              break;
            case 2:
              console.log("向下！")
              break;
            case 3:
              console.log("向左！")
              this.setSpeed();
              this.animation(-this.defaultOption.width())
              break;
            case 4:
              console.log("向右滑动");
              this.setSpeed();
              this.animation(this.defaultOption.width())
              break;
            default:
          }
        })
      },
        setInitialSlide() {
            if (this.defaultOption.initialSlide != 0) {
                this.changePagination(this.defaultOption.initialSlide)
            }
        },
        setGrabCursor() {
          this.defaultOption.grabCursor ? this.wrapper.style.cursor = "pointer" : ""
        },
        setSpeed() {
            this.wrapper.style.transition = `all ease ${this.defaultOption.speed / 1000}s`;
        },
        nextClick() {
            // this 指向
            // var test = this;
            // 1：保存this
            // 2: =>
            // 3: a().bind(this)
            this.next != null ? this.next.onclick = () => {
                this.setSpeed();
                this.animation(-this.defaultOption.width())
            } : ''
        },
        prevClick() {
            this.prev != null ? this.prev.onclick = () => {
                this.setSpeed();
                this.animation(this.defaultOption.width())
            } : ''
        },
        slideTo(index) {
            this.setSpeed();
            this.changePagination(index)
        },
        on (eventType,event) {
          this.defaultOption.eventList[eventType] = event;
        },
        CreatedPagination() {
          if (this.pagination != null) {
              Array.from(this.wrapper.children).forEach((v,i) => {
                  this.pagination.innerHTML += ` <li class="${i == 0 ? 'active' : ''}"></li>`
              });
              this.BindPaginationClick();
          }
        },
        BindPaginationClick() {
            Array.from(this.pagination.children).forEach((v,i) => {
                v.onclick = () => {
                    this.setSpeed();
                    this.changePagination(i)
                }
            })
        },
        changePagination(i) {
          this.defaultOption.eventList.slideChange && this.defaultOption.eventList.slideChange(i);
          this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(i);
          if (this.pagination != null) {
            Array.from(this.pagination.children).forEach((item) => {
              item.className = ""
            });
            Array.from(this.pagination.children)[i].className = "active";
          }
          this.wrapper.style.transform = `translateX(${i * -this.defaultOption.width()}px)`;
        },

        animation(offset) {
            var val = parseInt(this.wrapper.style.transform.match(/translateX\(([\s\S]*?)\)/)[1]);
            var newOffset = offset + val;
            var maxWidth = -(this.wrapper.children.length - 1) * this.defaultOption.width();

            if (newOffset > 0) {
                if (this.defaultOption.loop) {
                    newOffset = maxWidth;
                } else {
                    newOffset = 0
                }
            }

            if (newOffset < maxWidth) {
                if (this.defaultOption.loop) {
                    newOffset = 0;
                } else {
                    newOffset = maxWidth
                }
            }

            var index = Math.abs(newOffset / this.defaultOption.width());
            this.changePagination(index);

          this.defaultOption.eventList.slideChange && this.defaultOption.eventList.slideChange(index);
          this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(index)
        },
        autoPlay () {
          this.defaultOption.timer = setInterval(() => {
                this.animation(-this.defaultOption.width())
            }, this.defaultOption.time);
        }
    }

    function $(className) {
        var newClassName = className.split(" ");
        if (newClassName.length > 1) {
            var father = newClassName[newClassName.length - 2];
            var childrenList = document.querySelector(father).children;

            var arr = Array.from(childrenList).filter(function (el){
                if (
                    el.className.indexOf( (newClassName[newClassName.length-1]).replace(".", "") ) > -1
                    ||
                    el.tagName.toLowerCase() == newClassName[newClassName.length-1]
                ) {
                    return el;
                }
            });

            if (arr.length > 1) {
                return document.querySelectorAll(className)
            } else if (arr.length == 1){
                return document.querySelector(className)
            } else {
                throw new Error(`${className} 不存在，请检查`)
            }

        } else {
            return document.querySelector(newClassName);

        }
    }

    window.Swiper = swiper;

})()