;(function($,oc){
  "use strict";

  if(!$.bbc) $.bbc = {}

  const isTouch = 'ontouchstart' in window, libName = 'rotatecaptcha';
  
  var BBCCaptchaRotate = function (element, options = {}) {
    this.$el = $(element)
    // this.$form = this.$el.closest('form')
    this.options = Object.assign(this.$el.data(),options)
    this.options.width = this.options.width || 250
    this.options.id = (this.options.id || 'rotatecaptcha-'+$.bbc.helper.createId(10));
    $('body').addClass(this.options.id+'--body')
    this.bodyClass = '.'+this.options.id+'--body'
    this.options.size = {img: 152, control: 275};
    this.options.size.img = parseInt(this.options.width / 2);
    this.options.size.control = parseInt(this.options.width - 30);
    this.options.size.imgMargin = parseInt(this.options.width / 10);
    this.options.timerProgressBarColor = 'rgba(0, 0, 0, 0.2)'
    this.options.title = this.options.title || '安全验证'
    this.options.desc = this.options.desc || '拖动滑块，使图片角度为正'
    this.init()
  }

  BBCCaptchaRotate.prototype.init = function() {
    this.createModal()
  }

  BBCCaptchaRotate.prototype.createModal = function() {
    var options = this.options
    if (!$('#popup-rotate-captcha').length) {
      $.bbc.helper.createModal({
        id: 'popup-rotate-captcha',
        class: 'popup-rotate-captcha',
        heading: '',
        size: 'modal-sm',
        footer: ' ',
        content: `
          <div id="${options.id}" class="captcha-root" style="--theme: ${options.theme};--progress-bar-color: ${options.timerProgressBarColor};--size-width: 305px;--size-img: 152px;--size-img-margin: 28px;--size-control: 275px;">
            <div class="captcha-wrap">
                <div class="captcha" style="--size-width: ${options.width}px">
                    <div class="captcha-title">
                        <h2>${options.title}</h2>
                        <p>${options.desc}</p>
                    </div>
                    <div class="captcha-main">
                        <div class="captcha-wrap">
                            <div class="captcha-image" style="--size-img-margin: ${options.size.imgMargin}px">
                                <div class="captcha-img captcha-loading" style="--size-img: ${options.size.img}px">
                                    <img style="transform: rotate(0deg);">
                                    <div class="captcha-loader">
                                        <svg xmlns="https://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38">
                                            <defs>
                                                <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
                                                    <stop stop-color="${options.theme}" stop-opacity="0" offset="0%"/>
                                                    <stop stop-color="${options.theme}" stop-opacity=".631" offset="63.146%"/>
                                                    <stop stop-color="${options.theme}" offset="100%"/>
                                                </linearGradient>
                                            </defs>
                                            <g fill="none" fill-rule="evenodd">
                                                <g transform="translate(1 1)">
                                                    <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
                                                        <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"/>
                                                    </path>
                                                    <circle fill="${options.theme}" cx="36" cy="18" r="1">
                                                        <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"/>
                                                    </circle>
                                                </g>
                                            </g>
                                        </svg>
                                    </div>
                                </div>
                                <div class="captcha-coordinate"></div>
                                <div class="captcha-state">
                                    <svg class="captcha-state-icon-success" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 86.6986 86.6986">
                                        <foreignObject><style xmlns="http://www.w3.org/1999/xhtml">@-webkit-keyframes drawLine{100%{-webkit-stroke-dashoffset: 0;stroke-dashoffset: 0;}}@keyframes drawLine{100%{-webkit-stroke-dashoffset: 0;stroke-dashoffset: 0;}}svg.captcha-state-icon-success path{fill:none;stroke:#fff;stroke-width:3.7253;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:49 51;stroke-dashoffset:50;animation:drawLine 400ms ease-out 90ms forwards;}</style></foreignObject>
                                        <path class="path-success" d="M26.316,42.859L37.9984,54.5414L60.3826,32.1572"></path>
                                    </svg>
                                    <svg class="captcha-state-icon-fail" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 86.6986 86.6986">
                                        <foreignObject><style xmlns="http://www.w3.org/1999/xhtml">@-webkit-keyframes drawLine{100%{-webkit-stroke-dashoffset:0;stroke-dashoffset:0;}}@keyframes drawLine{100%{-webkit-stroke-dashoffset: 0;stroke-dashoffset: 0;}}svg.captcha-state-icon-fail path{fill:none;stroke:#fff;stroke-dasharray:42 44;stroke-dashoffset:-43;stroke-width:3.7253;stroke-linecap:round;stroke-linejoin:round;}.path-1{animation:drawLine 400ms ease-out 80ms forwards;}.path-2{animation:drawLine 400ms ease-out 280ms forwards;}</style></foreignObject>
                                        <path class="path-1" d="M28.774,57.9246L57.9247,28.7739"></path>
                                        <path class="path-2" d="M57.9246,57.9246L28.7739,28.7739"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="captcha-control" style="--size-control: ${options.size.control}px">
                            <div class="captcha-control-wrap"></div>
                            <div class="captcha-control-button"><i></i></div>
                        </div>
                    </div>
                    <div class="captcha-timer-progress-bar-wrap">
                        <div class="captcha-timer-progress-bar" style="display: none;"></div>
                    </div>
                </div>
            </div>
        </div>
        `
      })
      this.initEvent()
    }
  }

  BBCCaptchaRotate.prototype.initEvent = function() {

    const _this = this;
    _this.runtime = {
      deg: 0,
      left: 0,
      state: !1,
      loaded: !1,
    };
    _this.$elem = $('#popup-rotate-captcha')
    _this.$main = _this.$elem.find('.captcha-main');
    _this.$captchaImgWrap = _this.$elem.find('.captcha-img');
    _this.$captchaImg = _this.$elem.find('.captcha-img img');
    _this.$coordinate = _this.$elem.find('.captcha-coordinate');

    _this.$control = _this.$elem.find('.captcha-control');
    _this.$controlWrap = _this.$elem.find('.captcha-control-wrap');
    _this.$controlButton = _this.$elem.find('.captcha-control-button')

    var $img = $('#popup-rotate-captcha img'),
    $modal = $('#popup-rotate-captcha')

    if(isTouch) {

        _this.initTouch();
    } else {
        _this.initMouse();
    }

    $(this.bodyClass).on('click','[data-control="rotatecaptcha"]', function (params) {
      var $this = $(this), data = $this.data(),  $token = $this.prev('[name=captcha_token]'), $form = $this.closest('form')
      // js 验证
      // if($form.hasClass('js-validation') && $.validator) {
      //   if(!$form.valid()) return false;
      // }
      $this.prop('disabled',true).addClass('progress-bar-striped progress-bar-animated')
      if(!$token.length) {
        $this.before('<input name="captcha_token" type="hidden">')
        $token = $this.prev('[name=captcha_token]')
      }
      _this.comment = data.comment
      $modal.data('form',$form)

      

      $form.submit()

      $form.on('ajax:request-error', function(){
        $this.prop('disabled',false).removeClass('progress-bar-striped progress-bar-animated')
        $form.off('ajax:request-error')
      })

      $form.on('ajax:request-success', function(res){
        data = res.originalEvent.detail.data
        if(data.showcaptcha) {
          _this.refresh();
        }
        $this.prop('disabled',false).removeClass('progress-bar-striped progress-bar-animated')
        $form.off('ajax:request-success')
      })
      
    })

    

    $(this.bodyClass).on('click','[data-control="getcode"][data-captcha-type="rotatecaptcha"]',function(){
      var $this = $(this), data = {comment: 'getcode'}
      _this.comment = data.comment
      $this.prop('disabled',true).addClass('progress-bar-striped progress-bar-animated')
      $.request('onGetRotateImg',{data:{comment:data.comment}, success: function(e){
        this.success(e)
        $this.prop('disabled',false).removeClass('progress-bar-striped progress-bar-animated')
        _this.$captchaImg.attr('src', e.img).css({transform: 'rotate(0deg)'});
        _this.$captchaImgWrap.removeClass('captcha-loading')
        _this.runtime.loaded = !0;
        $modal.modal('show')
      }})
    })

    $modal.on('show.bs.modal', function(e){
      _this.runtime.state = 0;
      _this.$main.removeClass('captcha-success');
    })


    $modal.on('click','.btn-ok', function(e){
      $(this).closest('.modal').find('form').submit()
    })

    $modal.on('click','.captcha-refresh-icon', function(e){
      var comment = $(this).closest('form').find('[name=comment]').val()
      $.request('onGetImg',{data:{comment:comment}, success: function(e){
        this.success(e)
        $('#popup-rotate-captcha img').attr('src',e.result)
      }})
    })
  }

  BBCCaptchaRotate.prototype.spinImg = function() {
    const _this = this;

    if(this.runtime.deg) {
        _this.$coordinate.show();
    } else {
        _this.$coordinate.hide();
    }
    
    _this.$captchaImg.css({transform: 'rotate('+ this.runtime.deg +'deg)'});
  }

  BBCCaptchaRotate.prototype.state = function() {
    return this.runtime.state || !1;
  }

  BBCCaptchaRotate.prototype.check = function() {
    const _this = this;
    $.request('onCheckRotate',{data:{angle: _this.runtime.deg,comment: _this.comment}, success: function(res){
      if(res.captcha_token) {

        _this.runtime.state = !0;
        _this.$main.addClass('captcha-success');
        // _this.$controlButton.off('touchmove.captcha');
        setTimeout(() => {
          if(_this.options.checkSuccess) {
            if(_this.options.checkSuccess === 'event') {
              _this.$el.trigger('success.check',[res])
            }else{
              $.proxy(new Function('data', _this.option.checkSuccess),_this.$el.get(0))(res);
            }
          }else{
            var form = _this.$elem.data('form')
            form.find('[name=captcha_token]').val(res.captcha_token)
            console.log(form)
            form.submit()
            form.on('ajax:request-success', function(){
              form.find('[name=captcha_token]').val('')
              form.off('ajax:request-success')
            })
          }
          _this.$elem.modal('hide')
        }, 300);
        return 0;
      }

      _this.dragTimerState = !0;
      _this.$main.addClass('captcha-fail');
      _this.$control.addClass('captcha-control-horizontal').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
          $(this).removeClass('captcha-control-horizontal');
      });
      _this.refresh();

      _this.$controlButton.delay(700).animate({
          transform: 'translateX(0px)'
      }, function () {
          _this.dragTimerState = !1;
          _this.$main.removeClass('captcha-fail');
          _this.$controlButton.css({transform: 'translateX(0px)'});
      });
    }});
  }

  BBCCaptchaRotate.prototype.initMouse = function() {
    const _this = this;
    console.log(_this,'tt')

    let ifThisMousedown = !1;
          
    _this.$controlButton.on('mousedown.' + libName, function (e) {
      if (!_this.runtime.loaded || _this.runtime.state || _this.dragTimerState || _this.$controlButton.is(':animated')) {
        return !1;
      }
      console.log('down')
      ifThisMousedown = !0;
      let disPageX = e.pageX;
      _this.$controlButton.addClass('captcha-button-active');
      $(_this.bodyClass).on('mousemove.' + libName, function (e) {
        if (!ifThisMousedown) {
          return !1;
        }
        let x = e.pageX - disPageX;  
        _this.move(x);
        e.preventDefault();
      });
    });

    $(_this.bodyClass).on('mouseup.' + libName, function () {
      if (!ifThisMousedown) {
        return false;
      }

      ifThisMousedown = !1;

      if (_this.runtime.state) {
        return !1;
      }

      $(_this.bodyClass).off('mousemove.' + libName);
        _this.$controlButton.css({transform: 'translateX(0px)'}).removeClass('captcha-button-active');

        if(!_this.runtime.deg || _this.runtime.left < 5) {
          _this.$coordinate.hide();
          _this.$captchaImg.css({transform: 'rotate(0deg)'});
          _this.$controlButton.css({transform: 'translateX(0px)'});
          return !1;
        }
        _this.check();
    });
  }

  BBCCaptchaRotate.prototype.refresh = function() {
    const _this = this, $modal = $('#popup-rotate-captcha')
    this.runtime = {
        deg: 0,
        left: 0,
        state: !1,
        loaded: !1,
    };
    this.$coordinate.hide();
    $.request('onGetRotateImg',{data:{comment:_this.comment}, success: function(e){
      this.success(e)
      _this.$captchaImg.attr('src', e.img).css({transform: 'rotate(0deg)'});
      _this.$captchaImgWrap.removeClass('captcha-loading')
      _this.runtime.loaded = !0;
            console.log( $modal.modal('show'))
    console.log(123123123)
      if(!$modal.hasClass('show')) $modal.modal('show')
    }})
  }

  BBCCaptchaRotate.prototype.move = function(x) {
    const _this = this;

    if (x < 0) {
        x = 0;
    } else if (x >= ($(_this.$control).width() - $(_this.$controlButton).outerWidth())) {
        x = $(_this.$control).width() - $(_this.$controlButton).outerWidth();
    }

    let width = _this.options.size.control - $(_this.$controlButton).outerWidth();

    _this.runtime.deg = (360 / width) * x;

    let isFail = _this.$main.hasClass('captcha-fail');

    if (x > (width + 1)) {
        _this.$controlButton.css({transform: 'translateX(0px)'});
    }

    if(!isFail) {
        if (x < (width + 1) && x > -1) {
            if (x == 0) {
                _this.$controlButton.css({transform: 'translateX(0px)'});
            } else {
                _this.$controlButton.css({transform: 'translateX('+ x +'px)'});
            }

        } else {
            _this.$main.addClass('captcha-fail');
            _this.$controlButton.css({transform: 'translateX(210px)'}).removeClass('captcha-button-active');
        }
    }
    
    _this.runtime.left = x;
    _this.spinImg();
  }

  BBCCaptchaRotate.prototype.initTouch = function() {
    const _this = this;

    let ifThisTouchStart = !1;

      let disPageX = 0;

      _this.$controlButton.on({
          'touchstart.captcha' :function (e) {
              if (!_this.runtime.loaded || _this.runtime.state || _this.dragTimerState || _this.$controlButton.is(':animated')) {
                  return !1;
              }
              
              ifThisTouchStart = !0;
              disPageX = e.originalEvent.targetTouches[0].pageX;

      _this.$controlButton.addClass('captcha-button-active');
          },
          'touchmove.captcha': function (e) {
              e.preventDefault();
              if (!ifThisTouchStart || _this.dragTimerState || _this.$controlButton.is(':animated')) {
                  return !1;
              }

              let x = e.originalEvent.targetTouches[0].pageX - disPageX;

              _this.move(x);
          },
          'touchend.captcha': function (e) {

              if (!ifThisTouchStart) {
                  return !1;
              }

              ifThisTouchStart = !1;

              if (_this.runtime.state) {
                  return !1;
              }

              if (_this.$controlButton.is(':animated')) {
                  return !1;
              }

              _this.$controlButton.removeClass('captcha-button-active');

              if(!_this.runtime.deg || _this.runtime.left < 5) {
                  _this.$coordinate.hide();
                  _this.$captchaImg.css({transform: 'rotate(0deg)'});
                  _this.$controlButton.css({transform: 'translateX(0px)'});
                  return !1;
              }

              // 验证
              _this.check();
          }
      });
  }

  // BBCCaptchaRotate.prototype.timerProgressBar = function (timer) {
  //   const _this = this;

  //   if(!timer) {
  //       return !1;
  //   }

  //   if(!_this.options.timerProgressBar) {
  //       setTimeout(function() {
  //           _this.options.close(_this.runtime.state);
  //       }, timer);
  //       return !1;
  //   }

  //   setTimeout(function() {
  //       // _this.options.close(_this.runtime.state);
  //       _this.$elem.modal('hide')
  //   }, timer + 10);

  //   let timerProgressBar = _this.$elem.querySelectorAll('.captcha-timer-progress-bar')[0] || null;

  //   if(!timerProgressBar) {
  //       return !1;
  //   }

  //   timerProgressBar.style.display = 'flex';
    
  //   setTimeout(() => {
  //       timerProgressBar.style.transition = `width ${timer / 1000}s linear`;
  //       timerProgressBar.style.width = '0%';
  //   }, 10);
  // }


  var old = $.fn.BBCCaptchaRotate

  $.fn.BBCCaptchaRotate = function (option) {
      var args = Array.prototype.slice.call(arguments, 1), result
      this.each(function () {
          var $this = $(this)
          var data = $this.data('bbc.rotatecaptcha')
          var options = $.extend({}, BBCCaptchaRotate.DEFAULTS, $this.data(), typeof option == 'object' && option)
          if (!data) $this.data('bbc.rotatecaptcha', (data = new BBCCaptchaRotate(this, options)))
          if (typeof option == 'string') result = data[option].apply(data, args)
          if (typeof result != 'undefined') return false
      })

      return result ? result : this
  }

  $.fn.BBCCaptchaRotate.Constructor = BBCCaptchaRotate

  // BBCCaptchaRotate NO CONFLICT
  // =================

  $.fn.BBCCaptchaRotate.noConflict = function () {
      $.fn.BBCCaptchaRotate = old
      return this
  }

  if (oc.useTurbo && oc.useTurbo()) {
    addEventListener('page:loaded',function(){
      $('[data-control="rotatecaptcha"]').BBCCaptchaRotate()
    })
  }else{
    $(document).ready(function(){
      $('[data-control="rotatecaptcha"]').BBCCaptchaRotate()
    })
  }
})(window.jQuery,oc);