<template>
    <view class="tab_bar">
        <view class="tabbarBox">
            <view :class="item.key === 'chat'?'handleBox chatBox ':'handleBox'" v-for="(item) in tabBarList" :key="item.key + 'tab_bar'">
                <view class="menuBox" @click="goPages(item)">
                    <view class="menuIcon">
                        <view class="message-style" v-if="item.key === 'chat' && messageCount > 0">
                        </view>
                        <view v-if="item.key === 'chat'" class="chat-box">
                             <image v-if="item.key != selectIndex" class="img" :src="item.iconPath"></image>
                             <image v-else class="img" :src="item.selectedIconPath"></image>
                        </view>
                       <template v-else>
                            <image v-if="item.key != selectIndex" class="img" :src="item.iconPath"></image>
                            <image v-else class="img" :src="item.selectedIconPath"></image>
                       </template>
                    </view>
                    <view class="menuName" v-if="item.key !== 'chat'">
                        <text :class="item.key == selectIndex ? 'TextColor' : 'Text'">{{  item.text }}</text>
                    </view>
                </view>
            </view>

            <!-- <view class="handleBox">1</view>
            <view class="handleBox chatBox">2</view>
            <view class="handleBox">3</view> -->
        </view>
        <view class="bar-bottom"></view>

    </view>
</template>

<script>
import { onMounted } from 'vue';
import store from '@/store'
export default {
    props: {
        page: {
            type: String,
            default: "home"
        }
    },
    watch: {
        page: {
            handler(value) {

                this.selectIndex = value;
            },
            immediate: true,
            deep: true
        },
        
    },
    data() {
        return {
            selectIndex: null,
            userType: uni.getStorageSync('userType') || 1, //读取本地存储
            // messageCount: store.state.user.messageCount
        }
    },
    computed: {
        //获取当前页面
        tabBarList() {
            
            if (this.userType === 1) {
                return [
                    {
                        "pagePath": "/pages/index",
                        "iconPath": "/static/images/tabbar/home.png",
                        "selectedIconPath": "/static/images/tabbar/home_.png",
                        "text": "首页",
                        key: 'home'
                    },
                    {
                        "pagePath": "/pages/mallMenu",
                        "iconPath": "/static/images/tabbar/class.png",
                        "selectedIconPath": "/static/images/tabbar/class_.png",
                        "text": "分类",
                        key: 'class'
                    },
                    {
                        "pagePath": "/pages/chat",
                        "iconPath": "/static/images/tabbar/chat.png",
                        "selectedIconPath": "/static/images/tabbar/chat_.png",
                        "text": "消息",
                        key: 'chat'
                    },
                    {
                        "pagePath": "/pages/classify",
                        "iconPath": "/static/images/tabbar/work.png",
                        "selectedIconPath": "/static/images/tabbar/work_.png",
                        "text": "订单",
                        key: 'order'
                    },
                    {
                        "pagePath": "/pages/mine/index",
                        "iconPath": "/static/images/tabbar/mine.png",
                        "selectedIconPath": "/static/images/tabbar/mine_.png",
                        "text": "我的",
                        key: 'mine'
                    }
                ]
            }
            return [
                {
                    "pagePath": "/pages/index",
                    "iconPath": "/static/images/tabbar/home.png",
                    "selectedIconPath": "/static/images/tabbar/home_.png",
                    "text": "首页",
                    key: 'home'
                },
                {
                    "pagePath": "/pages/mallMenu",
                    "iconPath": "/static/images/tabbar/class.png",
                    "selectedIconPath": "/static/images/tabbar/class_.png",
                    "text": "分类",
                    key: 'class'
                },
                // {
                //     "pagePath": "/pages/release",
                //     "iconPath": "/static/images/tabbar/class.png",
                //     "selectedIconPath": "/static/images/tabbar/class_.png",
                //     "text": "发布",
                //     key:'release'
                // },
                {
                    "pagePath": "/pages/chat",
                    "iconPath": "/static/images/tabbar/chat.png",
                    "selectedIconPath": "/static/images/tabbar/chat_.png",
                    "text": "消息",
                    key: 'chat'
                },
                {
                    "pagePath": "/pages/classify",
                    "iconPath": "/static/images/tabbar/work.png",
                    "selectedIconPath": "/static/images/tabbar/work_.png",
                    "text": "订单",
                    key: 'order'
                },
                {
                    "pagePath": "/pages/mine/index",
                    "iconPath": "/static/images/tabbar/mine.png",
                    "selectedIconPath": "/static/images/tabbar/mine_.png",
                    "text": "我的",
                    key: 'mine'
                }
            ]
        },
        messageCount(){
            return store.state.user.messageCount;
        }
    },
    //uniapp子组件不支持应用生命周期，所以只能用vue生命周期
    created() {


    },
    onMounted() {
    },
    methods: {
        //进入tabble页
        goPages(page) {
            uni.switchTab({
                url: page.pagePath
            })
        },

    },
}
</script>
<style lang="scss">
.tab_bar {
    width: 100vw;
    height: 160rpx;
    position: fixed;
    bottom: 0rpx;
    /* 模糊大小就是靠的blur这个函数中的数值大小 */
    // backdrop-filter: blur(10px);
    // border-radius: 60rpx;
    // background-color: #fff;

    .tabbarBox {
        display: flex;
        margin-top: 20rpx;
        justify-content: space-between;
        // height: 100%;
        background-image: url(data:image/png;base64, ); // 替换为你的图片路径
        background-size: cover; // 图片覆盖整个 tabbarBox 区域
        background-repeat: no-repeat; // 防止图片重复
        background-position: center; // 图片居中显示

        // position: relative;
        .handleBox {
            width: 20vw;
            height: 110rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            padding-top: 8rpx;
            .menuBox {
                padding: 0rpx 20rpx;
                width: 120rpx;
                height: 98%;
                text-align: center;

                .img {
                    width: 50rpx;
                    height: 50rpx;
                }
            }
        }

        .chatBox{
            position: relative;
            bottom: 23px;
        }
    }
    .bar-bottom {
        width: 100%;
        height: 100%;
        background: #fff;
    }
}

.Text {
    font-size: 24rpx;
font-weight: 350;
line-height: 24rpx;
text-align: center;
color: #000000;
}

.TextColor {
    @extend .Text;
    font-weight: 500;
}

.menuIcon {
    position: relative;
   
}

.message-style {
    background: rgba(239, 68, 68, 1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 10px;
    height: 10px;
    border-radius: 10px;

    position: absolute;
    right: 0;
    z-index: 3;
}

.chat-box {
    width: 90rpx;
height: 90rpx;
    background: #D94342;
box-shadow: 0px 14px 34px 0px rgba(217, 67, 66, 0.46);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
</style>