import { Image, Input, Text, View } from "@tarojs/components"
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 { useEffect } from "react"
import { cardList, deleteCard } from "../../utils/api"
import { closeLoading, loading, successNotice } from "../../utils/utils"
import { useDidShow } from "@tarojs/taro"



const Login = () => {


    const [card, setCard] = useState([])
    const [ref, setRef] = useState(1)

    useEffect(() => {
        cardList().then(rs => {
            if (!rs) return
            setCard(rs.items)
        })
    }, [ref])

    useDidShow(() => {
        setRef(d => d + 1)
    })

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


    const navCreate = () => {
        Taro.navigateTo({
            url: '/pages/add-card/index'
        })
    }

    const del = async (id) => {
        loading('银行卡解绑中')
        const re = await deleteCard(id)
        closeLoading()
        if (!re) return
        setRef(d => d + 1)
    }


    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 flex flex-col items-center">
            {
                card.map(item => {
                    return <View className="card-item flex-col justify-center" key={item.id}>
                        <View className="flex-between">
                            <View className="bank-name">{item.account_name} {item.bank_name}</View>
                            <View className="bank-number">{item.account_number}</View>
                        </View>
                        <View className="card-item-des" onClick={() => { del(item.id) }}>解除绑定</View>
                    </View>
                })
            }
            <View className="my-card-footer flex flex-col justify-center">
                <Button className="login-btn" onClick={navCreate}>新增银行</Button>
            </View>

        </View>

    </View>
}


export default Login