<template>
    <view>
        <view class="tabbar-container" :class="isIpx?'IpxBot':''">
            <view class="tabbar-item" v-for="(item,index) in tabList"
                @click="changeItem(item)" :key="index">
                <view :class="item.imgclass">
                    <image :src="tabId==item.id?item.selectIcon:item.icon" mode=""></image>
                </view>
                <view class="item-bottom" :class="[tabId==item.id ? 'item-active' : '']">
                    <text>{{item.text}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            currentPage: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                //适配IPhoneX
                isIpx: false, 
                //底部Tab
                tabId: 0,
				// 列表
				tabList: [{
				    id: 0,
				    path: "/pages/index/index",
				    icon: "/static/tab/home.png",
				    selectIcon: "/static/tab/homecur.png",
				    text: "首页",
					imgclass:"home item-top"
				}, {
				    id: 1,
				    path: "/pages/list/zhxw",
				    icon: "/static/tab/zhxw.png",
				    selectIcon: "/static/tab/zhxwcur.png",
				    text: "综合新闻",
					imgclass:"zhxw item-top"
				}, {
				    id: 2,
				    path: "/pages/list/tpxw",
				    icon: "/static/tab/tpxw.png",
				    selectIcon: "/static/tab/tpxwcur.png",
				    text: "图片新闻",
					imgclass:"tpxw item-top"
				}, {
				    id: 3,
				    path: "/pages/index/mine",
				    icon: "/static/tab/mine.png",
				    selectIcon: "/static/tab/minecur.png",
				    text: "个人中心",
					imgclass:"mine item-top"
				}],
            }
        },
        mounted() {
            this.tabId = this.currentPage;
            //隐藏原生tab
            uni.hideTabBar();
        },
        created() {
            // 判断为 iPhone X 给予底部距离
            let that = this
            uni.getSystemInfo({
                success: function(res) {
                    if (res.model.indexOf('iPhone X') !== -1) {
                        that.isIpx = true;
                    }
                }
            })
        },
        methods: {
            // tab 切换
			
            changeItem(item) {
				if(item.id>3){
					return
				}
                uni.switchTab({
                    url: item.path,
                });
            },

        }
    }
</script>
<style scoped>
    view {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .tabbar-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        /* height: 100rpx; */
        box-shadow: 0 0 5px #999;
        display: flex;
        align-items: center;
        padding: 5rpx 0;
        color: #999999;
        background-color: #FFFFFF;
				z-index:99
    }

    .tabbar-container .tabbar-item {
        width: 25%;
        height: 150rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
		color:##808080;
    }

  /*  .tabbar-container .item-active {
        color: #DE242F;
    } */


    .tabbar-container .tabbar-item .item-top {
        width: 70rpx;
        height: 70rpx;
        padding: 10rpx;
    }
	.tabbar-container .tabbar-item .tpxw{
	    width:84rpx;
		height:84rpx;
	}
	.tabbar-container .tabbar-item .item-top.mine{
	    width:80rpx;
		height:84rpx;
	}
	.tabbar-container .tabbar-item .item-top.zhxw{
	    width:84rpx;
		height:84rpx;
	}
	.tabbar-container .tabbar-item .item-top.home{
	    width:84rpx;
		height:84rpx;
	}
    .tabbar-container .tabbar-item .item-top image {
        width: 100%;
        height: 100%;
    }

    .tabbar-container .tabbar-item .item-bottom {
        font-size: 28rpx;
        width: 100%;
    }


    /* 适配iPhone X */
    .IpxBot {
        padding-bottom: 30rpx !important;
    }
</style>