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

const activeEye = eye

const Login = () => {

    const [user, setUser] = useState({})
    const [list, setList] = useState([])
    const [areas, setAreas] = useState({})

    useEffect(() => {
        userDetail().then(rs => {
            if (!rs) return
            setUser(rs)
        })
        invitedUser().then(rs => {
            if (!rs) return
            setList(rs.items ?? [])
        })
        invitedAreas().then(rs => {
            if (!rs) return
            setAreas(rs)
        })
    }, [])

    // 返回页面
    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>

                {
                    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>
                    })
                }
            </View>
        </View>
    </View>
}


export default Login