import { Image, Input, Text, View } from "@tarojs/components"
import back from '@/images/back.png'
import empty from '@/images/empty.png'
import teamIcon from '@/images/teamIcon.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 { Avatar } from "@nutui/nutui-react-taro"
import { invitedAreas, invitedUser, userDetail } from "../../utils/api"
import { useEffect } from "react"
import { formatDateByStr } from "../../utils/utils"
import { Infiniteloading } from "@nutui/nutui-react-taro"

const activeEye = eye

const Login = () => {

    const [user, setUser] = useState({})
    const [list, setList] = useState([])
    const [areas, setAreas] = useState({})
    const [total, setTotal] = useState(0)
    const [page, setPage] = useState(1)

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

        invitedAreas().then(rs => {
            if (!rs) return
            setAreas(rs)
        })
    }, [])

    useEffect(() => {
        console.log(page)
        if (total <= list.length && list.length > 0) return

        let offset = (page - 1) * 20
        invitedUser({ offset, limit: 20 }).then(rs => {
            if (!rs || rs.items.length == 0) return
            setList(it => [...it, ...rs.items])
            setTotal(rs.total)
        })
    }, [page])

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




    return <View className="login-frame team-page  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="team-container flex-col items-center">
            <View className="team-logo flex-col items-center">
                <Image src={teamIcon} className="team-logo-img" />
                {
                    user.is_city_partner && <Text>城市合伙人</Text>
                }
                <Text className="team-logo-text">我的等级</Text>
            </View>

            <View className="team-pre-container  flex-around">
                <View className="team-pre-item flex-col justify-center items-center">
                    <Text className="team-pre-price">{areas.largest}</Text>
                    <Text>大区业绩</Text>
                </View>
                <View className="team-pre-item flex-col justify-center items-center">
                    <Text className="team-pre-price">{areas.lesser}</Text>
                    <Text>小区业绩</Text>
                </View>
            </View>

            <View className="invite-container flex-col items-start">
                <View className="invite-title">我邀请的人</View>

                <View id='invite-user' className="invite-user-list">
                    {
                        !!list.length && <Infiniteloading
                            containerId="invite-user"
                            useWindow={false}
                            loadTxt="loading"
                            loadMoreTxt="没有数据啦～"
                            loadIcon='loading'
                            hasMore={total >= list.length}
                            onLoadMore={(x) => {
                                setPage(p => p + 1)
                                x()
                            }}
                        >
                            {
                                list.map(item => {
                                    return <View className="invite-item flex-between" key={item.id}>
                                        <View className="invite-item-left flex-start items-center">
                                            <Avatar size={42} icon={item.avatar} alt={item.nick_name}
                                            />
                                            <View className="flex-col  invite-item-content">
                                                <Text>{item.nick_name}</Text>
                                                <Text className="team-pre-item">{formatDateByStr(item.created_at)}</Text>
                                            </View>
                                        </View>
                                        <View className="invite-level">
                                            <Text className="invite-level-text">{item.user_level?.name}</Text>
                                        </View>
                                    </View>
                                })
                            }
                        </Infiniteloading>
                    }
                    {
                        !list.length && <Image src={empty} className="order-empty" />
                    }
                </View>
            </View>
        </View>
    </View>
}


export default Login