import React from 'react'
import './index.scss'
import { Image, Text, View } from '@tarojs/components'
import TabbarAction from '@/components/action';
import message from '@/images/message.png'
import setting from '@/images/setting.png'
import level1 from '@/images/level1.png'
import homeBg from '@/images/homeBg.png'
import bal from '@/images/bal.png'
import income from '@/images/income.png'
import scope from '@/images/scope.png'
import waitpay from '@/images/waitpay.png'
import delivery from '@/images/delivery.png'
import done from '@/images/done.png'
import team from '@/images/team.png'
import mall from '@/images/mall.png'
import addr from '@/images/addr.png'
import friend from '@/images/friend.png'
import { Avatar } from '@nutui/nutui-react-taro';
import next from '@/images/next.png'
import { useEffect } from 'react';
import { userDetail } from '../../utils/api';
import { useState } from 'react';
import { navigateTo } from '../../utils/utils';


const Index = () => {
    const [user, setUser] = useState({})

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

    return <View className='user-container'>
        <View className='my-header-top relative'>
            <View className='user-title flex-center'>
                <View className='home-title-extra'>
                    <Image src={setting} className='home-title-icon' onClick={() => { navigateTo('/pages/setting/index') }} />
                    <Image src={message} className='home-title-icon' onClick={() => { navigateTo('/pages/message-list/index') }} />
                </View>
            </View>
            <View className='my-header flex-between'>
                <View className='my-content flex-start'>
                    <View className='my-avatar flex-center'>
                        <Avatar size={50} icon={user.avatar} alt={user.nick_name}
                        />
                    </View>

                    <View className='my-content-info flex-col'>
                        <View className='my-info-name flex-start'>
                            <Text>{user.nick_name}</Text>
                            <View className='my-level'>
                                <Text className='my-lev-text'>{user.user_level?.name}</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View className='my-edit' onClick={() => {
                    navigateTo('/pages/user-info/index')
                }}>
                    <Text>编辑资料 {'>'} </Text>
                </View>
            </View>
            <View className='flex-start my-id-box'>
                <Image src={level1} className='my-id-icon' />
                {
                    user.is_city_partner && <Text className=''>{user.city_partner_level == 'city' ? '城市合伙人' : '区域合伙人'}</Text>
                }
                {
                    !user.is_city_partner && <Text className='f14' onClick={() => {
                        navigateTo('/pages/city-partant/index')
                    }}>申请城市合伙人</Text>
                }

            </View>
        </View>
        <View className='my-container'>
            <View className="my-header-bottom">
                <Image src={homeBg} className="home-bg absolute" />
                <View className='my-order-container'>
                    <View className='my-order-title flex-between'>
                        <Text>我的订单</Text>
                        <View className='my-order-more flex-center' onClick={() => {
                            navigateTo('/pages/order/index')
                        }}>
                            <Text>全部订单</Text>
                            <Image className='next-icon' src={next} />
                        </View>
                    </View>
                    <View className='my-order-tool flex-between'>
                        <View className='flex-col my-order-tool-item' onClick={() => {
                            navigateTo('/pages/order/index?state=paid')
                        }}>
                            <View className="relative my-order-tool-box">
                                <Image className='my-order-tool-icon' src={waitpay} />
                                {/* <Text className='my-order-mark' style={{ fontSize: 4 }}>2</Text> */}
                            </View>
                            <Text>待发货</Text>
                        </View>
                        <View className='flex-col my-order-tool-item' onClick={() => {
                            navigateTo('/pages/order/index?state=sent')
                        }}>
                            <View className="relative my-order-tool-box">
                                <Image className='my-order-tool-icon' src={delivery} />
                                {/* <Text className='my-order-mark' style={{ fontSize: 4 }}>2</Text> */}
                            </View>
                            <Text>待收货</Text>
                        </View>
                        <View className='flex-col my-order-tool-item' onClick={() => {
                            navigateTo('/pages/order/index?state=received')
                        }}>
                            <View className="relative my-order-tool-box">
                                <Image className='my-order-tool-icon' src={done} />
                                {/* <Text className='my-order-mark' style={{ fontSize: 4 }}>2</Text> */}
                            </View>
                            <Text>已收货</Text>
                        </View>
                    </View>
                </View>
            </View>

            <View className='my-tool-box flex-col'>
                <View className='my-tool-box-title'>
                    我的属性
                </View>
                <View className='flex-around justify-center mt18'>
                    <View className='bal-item-content flex-col items-center'>
                        <Text>{user.contribution}</Text>
                        <Text className='bal-item-helper'>贡献值</Text>
                    </View>
                    <View className='bal-item-content flex-col items-center'>
                        <Text>{user.energy}</Text>
                        <Text className='bal-item-helper'>能量值</Text>
                    </View>
                </View>
            </View>

            <View className='mt18 my-tool-box flex-col'>
                <View className='my-tool-box-title'>
                    我的钱包
                </View>
                <View className='flex-between  mt18'>
                    <View className='bal-item-content flex-col items-center' onClick={() => {
                        navigateTo('/pages/balance/index')
                    }}>
                        <Text>{user.score}</Text>
                        <Text className='bal-item-helper'>余额</Text>
                    </View>
                    <View className='bal-item-content flex-col items-center' onClick={() => {
                        navigateTo('/pages/income/index')
                    }
                    }>
                        <Text>{user.profit ?? 0}</Text>
                        <Text className='bal-item-helper'>收益</Text>
                    </View>
                    <View className='bal-item-content flex-col items-center' onClick={() => {
                        navigateTo('/pages/scope/index')
                    }}>
                        <Text>{user.shopping_score}</Text>
                        <Text className='bal-item-helper'>购物金</Text>
                    </View>
                </View>
            </View>

            <View className='mt18 my-tool-box flex-col'>
                <View className='my-tool-box-title'>
                    常用工具
                </View>
                <View className='flex-around  mt18'>
                    <View className='flex-col my-order-tool-item' onClick={() => {
                        navigateTo('/pages/invite/index')
                    }}>
                        <View className="relative my-order-tool-box">
                            <Image className='my-tool-icon' src={friend} />
                        </View>
                        <Text>邀请好友</Text>
                    </View>

                    <View className='flex-col my-order-tool-item' onClick={() => {
                        navigateTo('/pages/shopping/index?source=shopping_score_mall')
                    }}>
                        <View className="relative my-order-tool-box">
                            <Image className='my-tool-icon' src={mall} />
                        </View>
                        <Text>购物金商城</Text>
                    </View>
                    <View className='flex-col my-order-tool-item' onClick={() => {
                        navigateTo('/pages/address/index?home=home')
                    }}>
                        <View className="relative my-order-tool-box">
                            <Image className='my-tool-icon' src={addr} />
                        </View>
                        <Text>地址管理</Text>
                    </View>
                    <View className='flex-col my-order-tool-item' onClick={() => {
                        navigateTo('/pages/team/index')
                    }}>
                        <View className="relative my-order-tool-box">
                            <Image className='my-tool-icon' src={team} />

                        </View>
                        <Text>我的团队</Text>
                    </View>
                </View>

            </View>

        </View>
        <TabbarAction index={2} />
    </View>
}

export default Index