import { Image, Input, Text, View } from "@tarojs/components"
import back from '@/images/back.png'
import checked from '@/images/checked.png'
import eyeClose from '@/images/eyeClose.png'
import eye from '@/images/eye.png'
import './index.scss'
import { Button } from "@nutui/nutui-react-taro"
import { useState } from "react"
import Taro from "@tarojs/taro"
import { register, sendCode } from "../../utils/api"
import { GetData } from "../../utils/storage"

const activeEye = eye

const Login = () => {

    const [pwd, setPwd] = useState()
    const [confirmPassword, setConfirmPassword] = useState()
    const [payPassword, setPayPassword] = useState()
    const [confirmPayPassword, setConfirmPayPassword] = useState()
    const [showPwd, setShowPwd] = useState(false)
    const [showConfirmPassword, setShowConfirmPassword] = useState(false)
    const [showPayPassword, setShowPayPassword] = useState(false)
    const [showConfirmPayPassword, setShowConfirmPayPassword] = useState(false)
    const [mobile, setMobile] = useState('')
    const [smsCode, setSmsCode] = useState('')
    const [interval, setIntervalTime] = useState(0)


    // 返回页面
    const backFn = () => {
        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
    }


    // 倒计时
    const countDown = async () => {
        if (!mobile) {
            return
        }
        setIntervalTime(60)
        if (interval > 0) {
            return
        }
        let start = 60
        const timer = setInterval(() => {
            if (start > 0) {
                start--
                if (start <= 0) {
                    clearInterval(timer)
                }
                setIntervalTime(start)
            }
        }, 1000)
        const re = await sendCode(mobile)
        if (!re) return
        Taro.showToast({ title: '验证码发送成功', icon: 'success' })
    }

    const registerFn = async () => {
        if (!mobile || !smsCode || !pwd || !confirmPassword || !payPassword || !confirmPayPassword) {
            Taro.showToast({ title: '请完善注册参数', icon: 'error' })
            return
        }
        Taro.showLoading({ title: '正在注册中～', })
        const inviteCode = GetData("inviteCode")
        const c = inviteCode ? inviteCode : ''
        const re = await register({
            nick_name: mobile,
            phone: mobile,
            verification_code: smsCode,
            password: pwd,
            confirm_password: confirmPassword,
            pay_password: payPassword,
            confirm_pay_pwd: confirmPayPassword,
            invite_code: c
        })

        Taro.hideLoading()
        if (re) {
            Taro.showToast({ title: '注册成功', icon: 'success' })
            setTimeout(() => {
                Taro.redirectTo({ url: '/pages/login/index' })
            }, 1000)
        }
    }

    return <View className="login-frame bg-slate-50 h-screen text-base">
        <View className="login-header flex justify-center items-center text-lg font-bold">
            <Image src={back} className="square-35 absolute left-7" onClick={backFn} />
            <View>新起点</View>
        </View>
        <View className="register-container relative">
            <View className="form-item ">
                <View className="form-label">手机号</View>
                <View className="form-control relative">
                    <Input className="form-input" placeholder="请输手机号" required placeholderClass="form-input-placeholder" onInput={(v) => {
                        setMobile(v.detail.value)
                    }} />
                    {
                        mobile && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
                    }

                </View>
            </View>
            <View className="form-item mt-22">
                <View className="form-label">验证码</View>
                <View className="form-control relative">
                    <Input className="form-input" maxlength={6} placeholder="请输入验证码" onInput={(v) => {
                        setSmsCode(v.detail.value)
                    }} />
                    <Button className="code-btn" disabled={interval > 0} onClick={countDown}>{interval ? interval + 's' : '获取验证码'}</Button>
                </View>
            </View>
            <View className="form-item mt-22">
                <View className="form-label">登录密码</View>
                <View className="form-control relative">
                    <Input className="form-input" type={showPwd ? 'text' : 'password'} placeholder="请设置登录密码" onInput={(v) => {
                        setPwd(v.detail.value)
                    }} />
                    <Image className="w-6 h-6 absolute right-0 bottom-16" src={showPwd ? activeEye : eyeClose} onClick={() => {
                        setShowPwd(v => !v)
                    }} />
                </View>
            </View>
            <View className="form-item mt-22">
                <View className="form-label">确认登录密码</View>
                <View className="form-control relative">
                    <Input className="form-input" type={showConfirmPassword ? 'text' : 'password'} placeholder="请确认登录密码" onInput={(v) => {
                        setConfirmPassword(v.detail.value)
                    }} />
                    <Image className="w-6 h-6 absolute right-0 bottom-16" src={showConfirmPassword ? activeEye : eyeClose} onClick={() => {
                        setShowConfirmPassword(v => !v)
                    }} />
                </View>
            </View>
            <View className="form-item mt-22">
                <View className="form-label">支付密码</View>
                <View className="form-control relative">
                    <Input className="form-input" type={showPayPassword ? 'text' : 'password'} placeholder="请设置支付密码" onInput={(v) => {
                        setPayPassword(v.detail.value)
                    }} />
                    <Image className="w-6 h-6 absolute right-0 bottom-16" src={showPayPassword ? activeEye : eyeClose} onClick={() => {
                        setShowPayPassword(v => !v)
                    }} />
                </View>
            </View>
            <View className="form-item mt-22">
                <View className="form-label">确认支付密码</View>
                <View className="form-control relative">
                    <Input className="form-input" type={showConfirmPassword ? 'text' : 'password'} placeholder="请确认支付密码" onInput={(v) => {
                        setConfirmPayPassword(v.detail.value)
                    }} />
                    <Image className="w-6 h-6 absolute right-0 bottom-16" src={showConfirmPayPassword ? activeEye : eyeClose} onClick={() => {
                        setShowConfirmPayPassword(v => !v)
                    }} />
                </View>
            </View>
            <View className="login-footer flex flex-col justify-center">
                <Button className="login-btn" onClick={registerFn}>注册</Button>
            </View>
        </View>

    </View>
}


export default Login