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 { createCard } from "../../utils/api"
import { closeLoading, errorNotice, loading, successNotice } from "../../utils/utils"

const activeEye = eye

const Login = () => {

    const [account, setAccount] = useState('')
    const [user, setUser] = useState('')
    const [accountNumber, setAccountNumber] = useState()
    const [disable, setDisable] = useState(false)


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


    const submit = () => {
        setDisable(true)
        if (!account || !accountNumber || !user) {
            setDisable(false)
            errorNotice('请完善银行卡信息')
            return
        }
        if (account.length > 10) {
            setDisable(false)
            errorNotice('银行名称不能超过10个字符')
            return
        }
        if (accountNumber.length < 10) {
            setDisable(false)
            errorNotice('银行卡号不能小于10个字符')
            return
        }
        loading('银行卡添加中，请稍后～')
        const re = createCard({
            bank_name: account,
            account_number: accountNumber,
            account_name: user,
            bank_branch: account
        })
        closeLoading()
        if (!re) return
        successNotice('银行卡添加成功')
        backFn()
    }


    return <View className="login-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="change-pwd-container bg-slate-50 relative">
            <View>
                <View className="form-item mt-22">
                    <View className="form-label">银行名称</View>
                    <View className="form-control relative">
                        <Input className="form-input" type='text' 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) => {
                            setAccountNumber(v.detail.value)
                        }} />
                        {
                            accountNumber && <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) => {
                            setUser(v.detail.value)
                        }} />
                        {
                            user && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
                        }

                    </View>
                </View>

                <View className="change-phone-footer flex flex-col justify-center">
                    <Button className="login-btn" onClick={submit} disabled={disable}>保存</Button>

                </View>
            </View>

        </View>

    </View>
}


export default Login