import Taro, { Component, Config } from '@tarojs/taro';
import { ComponentClass } from 'react';
import { View, Input, Image, Button } from '@tarojs/components';
import Vcode from '../../components/Vcode/Vcode';
import pwdHideIcon from '../../images/login/setting_invisible_icon@2x.png';
import pwdShowIcon from '../../images/login/setting_see_icon@2x.png';
import ToastBox from '../../components/ToastBox/ToastBox';

import './ResetPwd.scss';
import { changePwdByCellphone } from '../../api/customer';
import { replaceIllegalPwd } from '../../utils/pwd';
import { shareHandle } from '@/common/shareMethod';

type PageOwnProps = {};
type PageState = {
  cellphone: string;
  vcode: string;
  pwd: string;
  checkPwd: string;
  showPwd: boolean;
  showCheckPwd: boolean;
};

interface ResetPwd {
  props: PageOwnProps;
  state: PageState;
}

class ResetPwd extends Component {
  config: Config = {
    navigationBarTitleText: '找回APP登陆密码',
  };
  constructor(props: PageOwnProps) {
    super(props);
    this.state = {
      cellphone: '',
      vcode: '',
      pwd: '',
      checkPwd: '',
      showPwd: false,
      showCheckPwd: false,
    };
  }
  onShareAppMessage = shareHandle;

  setPwdValue(key: string, value: string) {
    let val = replaceIllegalPwd(value);
    this.setState({
      [key]: val,
    });
    return val;
  }

  togglePwdBox() {
    this.setState(({ showPwd }: PageState) => ({
      showPwd: !showPwd,
    }));
  }

  togglePwdCheckBox() {
    this.setState(({ showCheckPwd }: PageState) => ({
      showCheckPwd: !showCheckPwd,
    }));
  }
  validatePwdForm(): boolean {
    const { pwd, checkPwd, cellphone, vcode } = this.state;
    if (!cellphone || cellphone.length !== 11) {
      Taro.showToast({
        title: '请输入手机号码',
        icon: 'none',
      });
      return false;
    }
    if (!vcode || vcode.length !== 6) {
      Taro.showToast({
        title: '请输入6位验证码',
        icon: 'none',
      });
      return false;
    }
    if (!pwd || pwd.length < 6) {
      Taro.showToast({
        title: '请输入大于6位密码',
        icon: 'none',
      });
      return false;
    }
    if (!checkPwd || checkPwd.length < 6) {
      Taro.showToast({
        title: '请输入确认密码',
        icon: 'none',
      });
      return false;
    }
    if (pwd !== checkPwd) {
      Taro.showToast({
        title: '两次密码不一致',
        icon: 'none',
      });
      return false;
    }
    return true;
  }
  resetPwd() {
    if (this.validatePwdForm()) {
      const { cellphone, pwd, vcode } = this.state;
      changePwdByCellphone({
        loginAccount: cellphone,
        password: pwd,
        verification: vcode,
      })
        .then(() => {
          this.refs.ToastBox.showToast('修改成功');
          console.log('回到登陆');
          setTimeout(() => {
            Taro.redirectTo({
              url: '/pages/Login/Login',
            });
          }, 2000);
        })
        .catch(console.error);
    }
  }
  render() {
    const {
      cellphone,
      vcode,
      showPwd,
      pwd,
      showCheckPwd,
      checkPwd,
    } = this.state;
    return (
      <View className='ResetPwd'>
        <ToastBox ref='ToastBox' />
        <View className='ResetPwd-form'>
          <View className='ResetPwd-title'>请输入您的登陆手机号</View>
          <View className='registerBox-item'>
            <Input
              className='loginBox-input'
              placeholderClass='loginBox-placeholder'
              placeholder='请输入注册的手机号码'
              type='number'
              value={cellphone}
              onInput={({ detail: { value } }) => {
                this.setState({
                  cellphone: value,
                });
                return value;
              }}
              maxLength={11}
            />
          </View>
          <View className='registerBox-item'>
            <Input
              className='loginBox-input'
              placeholderClass='loginBox-placeholder'
              placeholder='请输入验证码'
              maxLength={6}
              value={vcode}
              onInput={({ detail: { value } }) => {
                this.setState({
                  vcode: value,
                });
                return value;
              }}
            />
            <Vcode
              vcode-classname='registerBox-getVcode'
              positionNum='3'
              ref='Vcode'
              cellphone={cellphone}
            />
          </View>
          <View className='ResetPwd-title'>设置新密码</View>
          <View className='registerBox-item'>
            <Input
              className='loginBox-input'
              placeholderClass='loginBox-placeholder'
              password={!showPwd}
              placeholder='输入6-20位新密码'
              maxLength={20}
              value={pwd}
              onInput={({ detail: { value } }) =>
                this.setPwdValue('pwd', value)
              }
            />
            <Image
              className='registerBox-pwdIcon'
              src={showPwd ? pwdShowIcon : pwdHideIcon}
              onClick={this.togglePwdBox}
            />
          </View>
          <View className='registerBox-item'>
            <Input
              className='loginBox-input'
              placeholderClass='loginBox-placeholder'
              password={!showCheckPwd}
              placeholder='确认6-20位新密码'
              maxLength={20}
              value={checkPwd}
              onInput={({ detail: { value } }) =>
                this.setPwdValue('checkPwd', value)
              }
            />
            <Image
              className='registerBox-pwdIcon'
              src={showCheckPwd ? pwdShowIcon : pwdHideIcon}
              onClick={this.togglePwdCheckBox}
            />
          </View>
        </View>
        <Button className='ResetPwd-btn' onClick={this.resetPwd}>
          确定
        </Button>
      </View>
    );
  }
}

export default ResetPwd as ComponentClass<PageOwnProps, PageState>;
