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 { Tabs, TabPane } from "@nutui/nutui-react-taro"
import { Infiniteloading } from "@nutui/nutui-react-taro"
import { useEffect } from "react"

const activeEye = eye

const Login = () => {

    const [tabKey, setTabKey] = useState('0')
    const [page, setPage] = useState(1)

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

    useEffect(() => { }, [tabKey])


    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="balance-container relative">
            <View className="balance-amount flex-col ">
                <View className="flex-between mt-22">
                    <Text>当前余额</Text>
                    <Text className="balance-amount-price">50000</Text>
                </View>
                <View className="flex-around mt-22">
                    <View className="balance-btn flex-center" onClick={() => {
                        Taro.navigateTo({ url: '/pages/cash/index' })
                    }}>立即提现</View>
                    <View className="balance-btn flex-center" onClick={() => {
                        Taro.navigateTo({ url: '/pages/transfer/index' })
                    }}>转赠他人</View>
                </View>
            </View>

            <View className="amount-container">
                <View className="amount-tabs flex-around">
                    <View className={'tab-pane ' + (tabKey == '0' ? 'tab-pane-active' : '')} onClick={() => setTabKey('0')}>余额流水</View>
                    <View className={'tab-pane ' + (tabKey == '1' ? 'tab-pane-active' : '')} onClick={() => setTabKey('1')}>充值记录</View>
                    <View className={'tab-pane ' + (tabKey == '2' ? 'tab-pane-active' : '')} onClick={() => setTabKey('2')}>提现记录</View>
                </View>
                <View className="balanceScroll" id="balanceScroll">
                    <Infiniteloading
                        containerId="balanceScroll"
                        useWindow={false}
                        loadTxt="loading"
                        loadMoreTxt="没有数据啦～"
                        loadIcon='loading'
                        hasMore={false}
                        onLoadMore={(x) => {
                            setPage(p => p + 1)
                            x()
                        }}
                    >
                        <View className="amount-item flex-between">
                            <View className="amount-item-detail flex-col">
                                <View>完成每日登陆</View>
                                <View className="amount-item-time">2021/04/09 19:42:36</View>
                            </View>
                            <View className="amount-item-log">+1.00</View>
                        </View>

                        <View className="amount-item flex-between">
                            <View className="amount-item-detail flex-col">
                                <View>完成每日登陆</View>
                                <View className="amount-item-time">2021/04/09 19:42:36</View>
                            </View>
                            <View className="amount-item-log">+1.00</View>
                        </View>
                    </Infiniteloading>
                </View>
            </View>

        </View>
    </View>
}


export default Login