<template>
    <up-tabbar :value="modelValue" :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" :name="item.name">
                <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 es = defineEmits(['update:modelValue', 'change'])
const ps = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})

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

const handleClickTabbar = (name) => {
    es('update:modelValue', name)
    es('change', name)
}
</script>
<style lang="scss" scoped>
.u-page__item__slot-icon {
    width: 48rpx;
    height: 48rpx;
}
</style>
