;(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));
    this.popup_id = 'popup-'+this.options.id
    $('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, popup_id = this.popup_id
    if (!$('#'+popup_id).length) {
      $.bbc.helper.createModal({
        id: popup_id,
        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.$popup = $('#'+this.popup_id)
    _this.$main = _this.$popup.find('.captcha-main');
    _this.$captchaImgWrap = _this.$popup.find('.captcha-img');
    _this.$captchaImg = _this.$popup.find('.captcha-img img');
    _this.$coordinate = _this.$popup.find('.captcha-coordinate');

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

    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
      _this.$popup.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.$popup.data('relatedTarget',$this)
    //   $this.prop('disabled',true).addClass('progress-bar-striped progress-bar-animated')
    //   // oc.ajax(_this.options.getcodeRequest, {data: {captcha_token: $this.data('captcha-token')}, success: function(res){
    //   // $.request('onGetRotateImg',{data:{comment:data.comment}, success: function(e){
    //   //   this.success(e).done(function(){
    //   //     $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;
    //   //     _this.$popup.modal('show')
    //   //   })
    //   // }})
    // })

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


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

    _this.$popup.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');
          if(_this.options.checkSuccess) {
            if(_this.options.checkSuccess === 'event') {
              _this.$popup.data('relatedTarget').trigger('success.check',[res])
              // _this.$el.trigger('success.check',[res])
            }else{
              $.proxy(new Function('data', _this.option.checkSuccess),_this.$el.get(0))(res);
            }
          }else{
            var form = _this.$popup.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')
            })
          }
        setTimeout(() => {
          _this.$popup.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;

    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
    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;
      if(!_this.$popup.hasClass('show')) _this.$popup.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.$popup.modal('hide')
  //   }, timer + 10);

  //   let timerProgressBar = _this.$popup.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);
(function($){

  var BBCGetCode = function(element, options = {}) {
    this.$el = $(element)
    this.options = Object.assign(this.$el.data(),options)
    this.$phone = $(this.options.getcodePhone)
    console.log(this.$phone.attr('id'))
    this.$email = $(this.options.getcodeEmail)
    this.timer = this.options.timer || 60
    this.rotateCaptcha = null
    this.init()
  }

  BBCGetCode.prototype.init = function() {
    
    this.initCaptcha()
    this.initEvent()
  }

  BBCGetCode.prototype.initCaptcha = function() {
    var type = this.options.captchaType
    switch(type) {
      case 'rotatecaptcha':
        this.$el.BBCCaptchaRotate()
        break;
      case 'imagecaptcha':
        break;
    }
  }

  BBCGetCode.prototype.isEmail = function(email) {
    return String(email)
      .toLowerCase()
      .match(
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      );
  }

  BBCGetCode.prototype.initEvent = function() {
    const self = this 
    this.$phone.on('input keyup', function(){
      var phone = $(this).val()
      if($.bbc.helper.isChinaMobile(phone)) {
        self.$el.prop('disabled',false)
      }else{
        self.$el.prop('disabled',true)
      }
    })
    this.$email.on('input keyup', function(){
      var email = $(this).val()
      console.log(email)
      if(self.isEmail(email)) {
        self.$el.prop('disabled',false)
      }else{
        self.$el.prop('disabled',true)
      }
    })
    this.$el.on('click',function(){
      const rotateCaptcha = $(this).data('bbc.rotatecaptcha')
      console.log(rotateCaptcha)
      var $this = $(this), $data = $this.data(), $email = $($data.getcodeEmail), 
        $phone = $($data.getcodePhone), data = {}
      rotateCaptcha.$popup.data('relatedTarget',$this)

      if($email.length) {
        data.email = $email.val()
      }else if($phone.length) {
        data.phone = $phone.val()
      }
      if($data.captchaToken) data.captcha_token = $data.captchaToken
      // var data = {comment: self.options.getcodeRequest}
      // self.rotateCaptcha.comment = data.comment
      $.request(self.options.getcodeRequest,{
        flash: true,
        data: data,
        success: function(a) {
          this.success(a).done(function(){
            if(a.showcaptcha == 1) {
              rotateCaptcha.comment = self.options.getcodeRequest
              rotateCaptcha.refresh()
              return;
            }
            if(a.code == 1) {
              self.setTimer()
              if(a.verify) $this.closest('form').find('[name="verify"]').val(a.verify)
              $.oc.flashMsg({ text: a.msg, class: 'success' })
            }else{
              $.oc.flashMsg({ text: a.msg, class: 'error' })
            }
          })
        }
      })
    //   _this.$elem.data('relatedTarget',$this)
    //   $this.prop('disabled',true).addClass('progress-bar-striped progress-bar-animated')
    })
    this.$el.on('success.check',function(e,res){
      var $data = $(this).data(), $email = $($data.getcodeEmail), $phone = $($data.getcodePhone), $this = $(this)
      console.log($data.getcodePhone)

      var data = {captcha_token:res.captcha_token}
      if($email.length) {
        data.email = $email.val()
      }else if($phone.length) {
        data.phone = $phone.val()
      }

      $.request(self.options.getcodeRequest,{
        flash: true,
        data: data,
        success: function(a) {
          this.success(a)
          if(a.code == 1) {
            if(a.verify) $this.closest('form').find('[name="verify"]').val(a.verify)
            self.setTimer()
            $.oc.flashMsg({ text: a.msg, class: 'success' })
          }else{
            $.oc.flashMsg({ text: a.msg, class: 'error' })
          }
        }
      })
    })
  }

  BBCGetCode.prototype.setTimer = function() {
    var self = this
    var text = self.$el.text()
    self.$el.prop('disabled',true)
    var i = self.timer
    var timer = setInterval(() => {
        if(i < 0) {
          clearInterval(timer)
          self.$el.text(text)
          self.$el.prop('disabled',false)
        }else{
          self.$el.text(i)
        } 
        i--
    }, 1000);
  }

  var old = $.fn.BBCGetCode

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

      return result ? result : this
  }

  $.fn.BBCGetCode.Constructor = BBCGetCode

  // BBCGetCode NO CONFLICT
  // =================

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

  if (oc.useTurbo && oc.useTurbo()) {
    addEventListener('page:loaded',function(){
      $('[data-control="getcode"]').BBCGetCode()
    })
  }else{
    $(document).ready(function(){
      $('[data-control="getcode"]').BBCGetCode()
    })
  }

})(window.jQuery);