
<template>
    <u-tabbar
        :value="value"
        :fixed="true"
        :placeholder="true"
        :safeAreaInsetBottom="true"
        activeColor="#2E75E6"
        inactiveColor="#8C8C8C"
    >
        <u-tabbar-item v-for="item in tabbars" :text="item.text" :key="item.name" @click="onTabbarClick(item)" :name="item.name">
            <image 
                :style="{width: item.size || '56rpx',height: item.size || '56rpx'}"
                class="u-page__item__slot-icon"
                slot="active-icon"
                :src="item.selectedIconPath"
            ></image>
            <image
                :style="{width: item.size || '56rpx',height: item.size || '56rpx'}"
                class="u-page__item__slot-icon"
                slot="inactive-icon"
                :src="item.iconPath"
            ></image>
        </u-tabbar-item>
    </u-tabbar>
</template>

<script>
    export default{
        options: { styleIsolation: 'shared' },
        data() {
            return {
                tabbars:[
                    {
                        name:'visitOrder',
                        "pagePath": "/subpkg/visitOrderList/visitOrderList",
                        "text": "拜访单",
                        "iconPath": "/static/img/tabbar/order.png",
                        "selectedIconPath": "/static/img/icon/visitOrder.png"
                    },
                    {
                        name:'addVisit',
                        "pagePath": "/subpkg/addNewVisitOrder/addNewVisitOrder",
                        "text": "",
                        "iconPath": "/static/img/icon/addVisit.png",
                        "selectedIconPath": "/static/img/icon/addVisit.png",
                        size:"120rpx"
                    },
                    {
                        name:'user',
                        "pagePath": "/pages/user/user",
                        "text": "我的",
                        "iconPath": "/static/img/tabbar/user.png",
                        "selectedIconPath": "/static/img/tabbar/user-active.png"
                    }
                ]
            }
        },
        props:{
            value:{
                type:String,
                default:''
            }
        },
        methods: {
            onTabbarClick(tab){
                if(tab.pagePath.includes('subpkg')){
                    if(tab.text){
                        uni.reLaunch({ url: tab.pagePath })
                    }else{
                        uni.navigateTo({ url: tab.pagePath })
                    }
                }else{
                    uni.switchTab({ url: tab.pagePath})
                }
            }
        },
    }
</script>

<style lang="scss">
    /deep/.u-tabbar-item__text{
        font-size: 20rpx !important;
    }
    .u-page__item__slot-icon{
        width: 56rpx;
        height: 56rpx
    }
</style>