import './Common.scss';
import './ChangeTelAccount.scss';
import { View, Button, Image, Input } from '@tarojs/components';
import Taro, { useState } from '@tarojs/taro';
import { useSelector } from '@tarojs/redux';
import { Customer } from '@/types/Customer/Customer';
import usePasswordInput from './usePasswordInput';
import pwdHideIcon from '../../images/login/setting_invisible_icon@2x.png';
import pwdShowIcon from '../../images/login/setting_see_icon@2x.png';
import useInputValue from '@/hooks/useInputValue';
import Vcode from '@/components/Vcode/Vcode';
import { changePhoneAccount } from '@/api/customer';

const ChangeTelAccount = () => {
  const customerId = useSelector(
    (state: { userinfo: Customer }) => state.userinfo.customerId,
  );
  const [vcode, setVcode] = useState('');
  const { pwd, setPwd, showPwd, setShowPwd } = usePasswordInput();
  const { value: phone, onChange } = useInputValue('');

  const goResetpwd = () => {
    Taro.navigateTo({
      url: '/pages/Password/ResetPwd',
    });
  };
  const changeAccountHandle = () => {
    if (!pwd || pwd.length < 6) {
      return Taro.showToast({
        title: '请输入6-20位新密码',
        icon: 'none',
      });
    }
    if (!phone || phone.length !== 11) {
      return Taro.showToast({
        title: '请输入手机号码',
        icon: 'none',
      });
    }
    if (!vcode || vcode.length !== 6) {
      return Taro.showToast({
        title: '请输入6位验证码',
        icon: 'none',
      });
    }

    Taro.showLoading();
    changePhoneAccount({
      customerId: customerId,
      password: pwd,
      phoneAccount: phone,
      verification: vcode,
    })
      .then(res => {
        Taro.hideLoading();
        Taro.showToast({
          title: '修改成功',
        });
        setTimeout(() => {
          Taro.reLaunch({
            url: '/pages/Login/Login',
          });
        }, 2000);
      })
      .catch(err => {
        Taro.hideLoading();
        Taro.showToast({
          title: err.msg || '修改成功',
          icon: 'none',
        });
      });
  };

  return (
    <View className='ChangeTelAccount Password'>
      <View className='Password-form'>
        <View className='Password-title'>小程序登录密码</View>
        <View className='registerBox-item'>
          <Input
            className='loginBox-input'
            placeholderClass='loginBox-placeholder'
            password={!showPwd}
            placeholder='请输入当前登录密码'
            maxLength={20}
            value={pwd}
            onInput={({ detail: { value } }) => setPwd(value)}
          />
          <Image
            className='registerBox-pwdIcon'
            src={showPwd ? pwdShowIcon : pwdHideIcon}
            onClick={setShowPwd}
          />
        </View>
        <View className='Password-title'>更换所需手机号</View>
        <View className='registerBox-item'>
          <Input
            className='loginBox-input'
            placeholderClass='loginBox-placeholder'
            placeholder='请输入手机号码'
            maxLength={11}
            value={phone}
            onInput={onChange}
          />
        </View>
        <View className='registerBox-item'>
          <Input
            className='loginBox-input'
            placeholderClass='loginBox-placeholder'
            placeholder='请输入验证码'
            maxLength={6}
            value={vcode}
            onInput={({ detail: { value } }) => setVcode(value)}
          />
          <Vcode
            vcode-classname='registerBox-getVcode'
            positionNum='4'
            ref='Vcode'
            cellphone={phone}
          />
        </View>
        <View className='ChangeTelAccount-forget' onClick={goResetpwd}>
          忘记密码?
        </View>
        <Button className='ChangePwd-btn' onClick={changeAccountHandle}>
          确定
        </Button>
      </View>
    </View>
  );
};
ChangeTelAccount.config = {
  navigationBarTitleText: '更换手机账户',
};

export default ChangeTelAccount;
