import { Image, Input, Text, View } from "@tarojs/components"
import back from '@/images/back.png'
import checked from '@/images/checked.png'
import empty from '@/images/empty.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"
import { userDetail, userLogs } from "../../utils/api"
import { formatDateByStr } from "../../utils/utils"

const activeEye = eye

const Login = () => {
    const limit = 20
    const [tabKey, setTabKey] = useState('0')
    const [page, setPage] = useState(1)
    const [user, setUser] = useState({})
    const [list, setList] = useState([])
    const [total, setTotal] = useState(0)

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

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

    useEffect(() => {
        if (total <= list.length && list.length > 0) return
        let offset = (page - 1) * limit
        userLogs('shopping_score', { offset, limit }).then(rs => {
            if (!rs || rs.items.length == 0) return
            setList(it => [...it, ...rs.items])
            setTotal(rs.total)
        })
    }, [tabKey, page])

    const switchTab = (key) => {
        if (key != tabKey) {
            setPage(1)
        }
        setTabKey(key)
    }


    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="scope-container relative">
            <View className="scope-amount flex-col ">
                <View className="flex-between mt-22">
                    <Text>我的余额</Text>
                    <Text className="scope-amount-price">{user.shopping_score}</Text>
                </View>
            </View>

            <View className="amount-container">
                <View className="amount-tabs flex-start">
                    <View className={'tab-pane ' + (tabKey == '0' ? 'tab-pane-active' : '')} onClick={() => switchTab('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="scopeScroll" id="scopeScroll">
                    {
                        !!list.length && <Infiniteloading
                            containerId="scopeScroll"
                            useWindow={false}
                            loadTxt="loading"
                            loadMoreTxt="没有数据啦～"
                            loadIcon='loading'
                            hasMore={total >= list.length}
                            onLoadMore={(x) => {
                                setPage(p => p + 1)
                                x()
                            }}
                        >
                            {
                                list.map(item => {
                                    return <View className="amount-item flex-between" key={item.id}>
                                        <View className="amount-item-detail flex-col">
                                            <View>{item.memo}</View>
                                            <View className="amount-item-time">{formatDateByStr(item.created_at)}</View>
                                        </View>
                                        <View className="amount-item-log">{item.amount > 0 ? `+${item.amount}` : `${item.amount}`}</View>
                                    </View>
                                })
                            }
                        </Infiniteloading>
                    }
                    {
                        !list.length && <Image src={empty} className="order-empty" />
                    }
                </View>
            </View>

        </View>
    </View>
}


export default Login