<template>
<view class="tarbar">
    <view class=".tarbar-list" :style="{

background: tabBar.backgroundColor,

color: tabBar.color,

'border-top': tabBar.position == 'bottom' ? '0rpx solid ' + tabBar.borderStyle : 0,

'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0

}">
        <view class="tarbar-list-ul">
            <view class="tarbar-list-li" :class="index == 2 ? 'tarbar-list-li-center' : ''" v-for="(item, index) in tabBar.list" :key="index" @click.top="setSelected(index)">
                <block v-if="index != 2">
                    <view class="tarbar-list-li-icon">
                        <image :src="selected == index ? item.selectedIconPath : item.iconPath" mode=""></image>
                    </view>
                    <view :class="selected!==index?'tarbar-list-li-name':'tarbar-list-li-name__active'">{{ item.text }}</view>
                </block>
                <block v-else>
                    <view class="tarbar-list-li-icon">
                        <image :src="item.selectedIconPath" mode=""></image>
                    </view>
                </block>
            </view>
        </view>
    </view>
</view>
</template>

<script>
export default {
    props: ['selected'],
    data() {
        return {
            tabBar: {
                color: '#ccc',
                selectedColor: '#E84351',
                borderStyle: '#ccc',
                backgroundColor: '#fff',
                position: 'bottom',
                list: [{
                        pagePath: '/pagesA/pages/index/index',
                        iconPath: '/static/tarbar/index22.png',
                        selectedIconPath: '/static/tarbar/index5.png',
                        text: '首页'
                    },
                    {
                        pagePath: '/pagesB/pages/move-car/index',
                        iconPath: '/static/tarbar/index17.png',
                        selectedIconPath: '/static/tarbar/index24.png',
                        text: '我要挪车'
                    },
                    {
                        pagePath: '/pagesC/pages/releaseBtn/releaseBtn',
                        iconPath: '',
                        selectedIconPath: '/static/tarbar/index31.png'
                    },
                    {
                        pagePath: '/pagesC/pages/shop/index',
                        iconPath: '/static/tarbar/index2.png',
                        selectedIconPath: '/static/tarbar/index21.png',
                        text: '精选商城'
                    },
                    {
                        pagePath: '/pagesD/pages/personal/index',
                        iconPath: '/static/tarbar/index11.png',
                        selectedIconPath: '/static/tarbar/index23.png',
                        text: '我的'
                    }
                ]
            },
            oldSelected: 0, // 记录之前访问的索引; 值为2的时候显示遮罩
        };
    },
    onLoad() {},
    methods: {
        setSelected(index) {
            if (index != 2) {
                uni.navigateTo({
                    url: this.tabBar.list[index].pagePath,
                });
            } else {
                //扫码
                // 允许从相机和相册扫码
                uni.navigateTo({
                    url: '/pagesB/pages/move-car/scan',
                });
                uni.scanCode({
                    success: function (res) {
                        console.log('条码类型：' + res.scanType);
                        console.log('条码内容：' + res.result);
                    }
                });
            }
            this.$forceUpdate();
        },

    }
};
</script>

<style lang="scss">
.tarbar {
    width: 100%;
    z-index: 9999;
    position: fixed;
    bottom: 0;
}

.tarbar-list {
    width: 100%;
    height: 120upx;
    background: #4d586f;
    position: fixed;
    left: 0;
    bottom: 0;
}

.tarbar-list-ul {
    width: 100%;
    height: 100%;
    padding: 20upx 0upx;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

.tarbar-list-li {
    width: 25%;
    height: 80upx;
    text-align: center;
}

.tarbar-list-li:nth-of-type(2) {
    padding-right: 40rpx;
}

.tarbar-list-li:nth-of-type(4) {
    padding-left: 40rpx;
}

.tarbar-list-li-icon {
    width: 46rpx;
    height: 46rpx;
    margin: 0 auto;
}

.tarbar-list-li-icon image {
    width: 46rpx;
    height: 46rpx;
}

.tarbar-list-li-name {
    width: 100%;
    text-align: center;
    line-height: 30upx;
    font-size: 20upx;
    height: 30upx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    margin-top: 10rpx;
}

.tarbar-list-li-name__active {
    width: 100%;
    text-align: center;
    line-height: 30upx;
    font-size: 20upx;
    height: 30upx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(225, 37, 27, 1);
    margin-top: 10rpx;
}

.tarbar-list-li-center {
    width: 100upx;
    position: absolute;
    top: -40rpx;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0 auto;
}

.tarbar-list-li-center .tarbar-list-li-icon,
.tarbar-list-li-center .tarbar-list-li-icon image {
    width: 94upx;
    height: 94upx;
}
</style>
