/**
 * 图片滑动本地验证 没有经过服务器验证 可能有安全问题 慎用
 * 只需要在属性中传入 成功回调函数 onSuccess 和 失败回调函数 onFailed 
 */
import React from 'react';
import ValidaterSlider from './validate';
import styles from './index.less';
import PropTypes from 'prop-types';

export default class Validater extends React.Component {
  static defaultProps = {
    onSuccess: () => { console.log('success!')},
    onFailed:  () => { console.log('failed!')},
    onRefresh:  () => { console.log('refresh!')},
  }
  constructor(props) {
    super(props);
    this.myRef = React.createRef()
  }
  // 验证成功回调
  onSuccess = () => {
    this.props.onSuccess();
  }
  // 验证失败回调
  onFailed = () => {
    this.props.onFailed();
  }
  // 刷新时回调
  onRefresh = () => {
    this.props.onRefresh();
  }
  // 组件加载完成后挂载 验证器
  componentDidMount() {
    ValidaterSlider({
      el: this.myRef.current,
      onSuccess: this.onSuccess,
      onFailed: this.onFailed,
      onRefresh: this.onRefresh
    })
  }
  
  render() {
   return (<div ref={this.myRef} className={styles.container}></div>)
  }
}

Validater.propTypes = {
  onSuccess: PropTypes.func,
  onFailed: PropTypes.func,
  onRefresh: PropTypes.func,
}