import { Tabbar } from '@nutui/nutui-react-taro';
import { TabbarItem } from '@nutui/nutui-react-taro';
import { View } from '@tarojs/components';
import cart from '@/images/cart.png'
import cart1 from '@/images/cart1.png'
import home1 from '@/images/home1.png'
import home from '@/images/home.png'
import user from '@/images/user.png'
import user1 from '@/images/user1.png'
import './action.scss'
import { useState } from 'react';
import Taro from '@tarojs/taro'
import { useRouter } from '@tarojs/taro';


const TabbarAction = (props = {}) => {
    const router = useRouter()
    const { index = 0 } = props

    const [activeIndex, setActiveIndex] = useState(index)


    const onSwitch = (_, id) => {
        if (activeIndex == id) {
            return
        }
        setActiveIndex(id)
        if (id === 0) {
            nav('/pages/index/index')
        } else if (id === 1) {
            nav('/pages/shopping/index')
        } else if (id === 2) {
            nav('/pages/home/index')
        }
    }

    const nav = (url = '') => {
        Taro.navigateTo({
            url
        })
    }


    return <View>
        <Tabbar bottom size={24} className='tabbar-container' onSwitch={onSwitch} activeVisible={activeIndex} visible={activeIndex}
            unactiveColor='#A9A9AA'
            activeColor='#F67952'
        >
            <TabbarItem tabTitle="首页" icon={activeIndex === 0 ? home1 : home} />
            <TabbarItem tabTitle="商城" icon={activeIndex === 1 ? cart1 : cart} />
            <TabbarItem tabTitle="我的" icon={activeIndex === 2 ? user1 : user} />
        </Tabbar>
    </View>
}


export default TabbarAction