<template>
    <view>
        <u-tabbar :value="name" :fixed="true" :border="false" activeColor="#03AE80" zIndex="50" inactiveColor="#999" :safeAreaInsetBottom="true" >
            <u-tabbar-item :text="item.text" @click="swtichTab(item.path)" :name="item.name" v-for="item in tabList" :key="item.path">
                <image slot="active-icon" style="width: 40rpx;height: 40rpx;"  :src="item.selectIconPath" />
                <image slot="inactive-icon" style="width: 40rpx;height: 40rpx;" :src="item.iconPath" />
            </u-tabbar-item>
        </u-tabbar>
    </view>
</template>

<script>
export default {
    name: 'tabar',
    props: {
        name: {
            type: String,
            default: 'home'
        } 
    },
    data() {
        return {
            tabList:[
                {
                    iconPath: '/static/icon/home.png',
                    path: '/pages/index/index',
                    selectIconPath: "/static/icon/home_active.png",
                    text: '首页',
                    name: 'home'
                },
				{
				    iconPath: '/static/icon/home.png',
				    path: '/pages/video/video',
				    selectIconPath: "/static/icon/home_active.png",
				    text: '数据',
				    name: 'video'
				},
                {
                    iconPath: '/static/icon/mine.png',
                    path: '/pages/mine/mine',
                    selectIconPath: "/static/icon/mine_active.png",
                    text: '我的',
                    name: 'mine'
                }
            ]
        };
    },
    methods:{
        swtichTab (url) {
            uni.reLaunch({ url })
        }
    }
}
</script>