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 { cardList, scoreWithdraw, userDetail } from "../../utils/api"
import { useEffect } from "react"
import { closeLoading, errorNotice, loading, successNotice } from "../../utils/utils"

const activeEye = eye

const Login = () => {

    const [account, setAccount] = useState('')

    const [visible, setVisible] = useState(false)
    const [bank, setBank] = useState({ value: 0, text: '' })
    const [pwd, setPwd] = useState('')

    const [user, setUser] = useState({})
    const [card, setCard] = useState([])
    const [bankList, setBankList] = useState([])

    useEffect(() => {
        userDetail().then(rs => {
            if (!rs) return
            setUser(rs)
        })
        cardList().then(rs => {
            if (!rs) return
            setCard(rs.items)
            setBankList([rs.items.map(item => ({ value: item.id, text: `${item.bank_name} ${item.account_number}` }))])
        })
    }, [])

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


    const confirmPicker = (val, list) => {
        list.forEach(item => {
            setBank(item)
        })
    }

    const submit = async () => {
        if (!account) {
            errorNotice("请输入转换金额")
            return
        }
        if (!bank) {
            errorNotice("请选择提现银行卡")
            return
        }
        if (!pwd) {
            errorNotice('请输入支付密码')
            return
        }
        if (user.score < 1) {
            errorNotice("余额不足")
            return
        }
        loading('提现申请中...')
        const data = card.filter(it => it.id == bank.value)
        const re = await scoreWithdraw({
            "account_name": data[0].account_name,
            "account_number": data[0].account_number,
            "amount": account,
            "bank_branch": data[0].bank_branch,
            "bank_name": data[0].bank_name,
            "password": pwd
        })
        closeLoading()
        if (!re) return
        successNotice('提现成功')
        setTimeout(() => {
            backFn()
        }, 1000)
    }


    return <View className="cash-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="cash-container relative">
            <View className="cash-amount flex-col justify-center">
                <Text>当前余额</Text>
                <Text className="cash-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" type="digit" 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" disabled placeholder="选择提现银行卡" value={bank.text} />
                        <Button className="code-btn" onClick={() => {
                            if (bankList.length < 1) {
                                errorNotice('请先添加银行卡')
                                return
                            }
                            setVisible(true)
                        }}>选择银行卡</Button>
                    </View>
                </View>
                <View className="form-item mt-22">
                    <View className="form-label">支付密码</View>
                    <View className="form-control relative">
                        <Input className="form-input" type={'password'} placeholder="请输入支付密码" onInput={(v) => {
                            setPwd(v.detail.value)
                        }} />
                    </View>
                </View>
                {
                    account && !!bank.value &&
                    <View className="cash-footer ">
                        <Button className="cash-btn" onClick={submit}>立即提现</Button>
                    </View>
                }
            </View>

        </View>
        <Picker
            isVisible={visible}
            listData={bankList}
            onConfirm={(values, list) => confirmPicker(values, list)}
            onClose={() => setVisible(false)}

        />
    </View>
}


export default Login