<template>
    <up-tabbar :value="tabbarValue" :fixed="false" :placeholder="false" :safeAreaInsetBottom="true" activeColor="#165dff" inactiveColor="#4e5969">
        <template v-for="item in list" :key="item.name">
            <up-tabbar-item :text="item.text" @click="handleClickTabbar">
                <template #active-icon>
                    <image class="u-page__item__slot-icon" :src="item.selectedIconPath" mode="widthFix"></image>
                </template>
                <template #inactive-icon>
                    <image class="u-page__item__slot-icon" :src="item.iconPath" mode="widthFix"></image>
                </template>
            </up-tabbar-item>
        </template>
    </up-tabbar>
</template>

<script setup>
import { ref } from 'vue'

const ps = defineProps({
    tabbarValue: {
        type: [Number, String],
        default: 1
    }
})

const list = ref([
    {
        pagePath: '/home/index',
        text: '首页',
        iconPath: '/static/mocp/image/menu/home.png',
        selectedIconPath: '/static/mocp/image/menu/home-select.png'
    },
    {
        pagePath: '/panel/index',
        text: '工作台',
        iconPath: '/static/mocp/image/menu/panel.png',
        selectedIconPath: '/static/mocp/image/menu/panel-select.png'
    },
    {
        pagePath: '/chat/index',
        text: '沟通',
        iconPath: '/static/mocp/image/menu/chat.png',
        selectedIconPath: '/static/mocp/image/menu/chat-select.png'
    }
])

const handleClickTabbar = (index) => {
    if (ps.tabbarValue != index) {
        uni.$mocpJump.reLaunch(list.value[index].pagePath)
    }
}
</script>
<style lang="scss" scoped>
.u-page__item__slot-icon {
    width: 48rpx;
    height: 48rpx;
}
</style>
