import { View,Text } from '@tarojs/components'
import './Tabbar.scss'
import Taro from '@tarojs/taro';
import { useState } from 'react';

export default function Component(props:{index:number}) {
    const [selIndex] = useState(props.index)
    function switchTab(index: number) {
        switch (index) {
            case 0:

                Taro.switchTab({
                    url: '/pages/clock/Clock'
                })
                break;
            case 1:
                Taro.switchTab({
                    url: '/pages/metric/Metric'
                })
                break;
            case 2:

                Taro.switchTab({
                    url: '/pages/activity/Activity'
                })
                break;
            case 3:
                Taro.switchTab({
                    url: '/pages/account/Profile'
                })
                break;
            case 4:
                Taro.switchTab({
                    url: '/pages/food/Food'
                })
                break;
        }
    }

    return <View className='tabbar'>
        <View className={selIndex == 0 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(0)}>
            <Text>生物钟</Text>
        </View>
        <View className={selIndex == 4 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(4)}>
            <Text>饮食</Text>
        </View>
        <View className={selIndex == 1 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(1)}>
            <Text>指标</Text>
        </View>
        
        <View className={selIndex == 2 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(2)}>
            <Text>运动</Text>
        </View>
        <View className={selIndex == 3 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(3)}>
            <Text>更多</Text>
        </View>
    </View>
}