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 backNav from '@/images/backNav.png'
import { Picker } from "@nutui/nutui-react-taro"
import { useEffect } from "react"
import { transferAmount, userDetail } from "../../utils/api"
import { closeLoading, errorNotice, loading, navigateTo } from "../../utils/utils"

const activeEye = eye

const Login = () => {

    const [account, setAccount] = useState('')
    const [confirmAccount, setConfirmAccount] = useState('')
    const [num, setNum] = useState(0)
    const [pwd, setPwd] = useState('')
    const [showPwd, setShowPwd] = useState(false)

    const [user, setUser] = useState({})

    useEffect(() => {
        userDetail().then(rs => {
            if (!rs) return
            setUser(rs)
        })
    }, [])

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


    const submit = async () => {
        if (!account || !confirmAccount || !num || !pwd) {
            errorNotice("请确认转赠参数是否正确")
            return
        }
        if (account != confirmAccount) {
            errorNotice("两次账号输入不一致")
            return
        }
        if (num == 0 || num > user.score) {
            errorNotice("转赠数量不正确")
            return
        }
        loading("正在处理中，请稍后")
        const re = await transferAmount({
            amount: num,
            to_phone: account,
            password: pwd
        })
        closeLoading()
        if (!re) {
            return
        }
        errorNotice("转赠成功")
        setTimeout(() => {
            navigateTo('/pages/balance/index')
        }, 1000)
    }


    return <View className="transfer-frame bg-slate-50 h-screen text-base">
        <View className='addr-detail-title'>
            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
            转赠他人

        </View>
        <View className="transfer-container relative">
            <View className="transfer-amount flex-col justify-center">
                <Text>当前余额</Text>
                <Text className="transfer-amount-price">{user.score}</Text>
            </View>
            <View>
                <View className="form-item mt-22">
                    <View className="form-label">对方账号</View>
                    <View className="form-control relative">
                        <Input className="form-input" placeholder="请输入对方账号" onInput={(v) => {
                            setAccount(v.detail.value)
                        }} />
                        {
                            account && <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" placeholder="再次确认对方账号" onInput={(v) => {
                            setConfirmAccount(v.detail.value)
                        }} />
                        {
                            confirmAccount && <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" type="digit" placeholder="请输入转赠数量" onInput={(v) => {
                            setNum(v.detail.value)
                        }} />
                        {
                            !!num && <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" 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>

                {
                    account &&
                    <View className="transfer-footer ">
                        <Button className="transfer-btn" onClick={submit}>立即赠送</Button>
                    </View>
                }
            </View>

        </View>
    </View>
}


export default Login