<template>
	<view class="tabbar-list border-box pad-sx40 background-white pad-zy20 flex">
		<!-- 底部导航 -->
		<view class="tabbar-item color-88 flex" :class="current==index ? 'active' : ''" @tap="chooseFootTab(index)" v-for="(item,index) in footBarList" :key="index">
			<view class="icon flex"><image :style="{width:[41,38][index]+'rpx',height:[41,40][index]+'rpx'}" :src="item.iconPath" mode="widthFix"></image></view>
			<view class="title font26">{{item.title}}</view>
		</view>
		<!-- 发布按钮 -->
		<view class="release-btn background-blue color-ff radius100 flex" @tap="goRelease">
			<image src="/static/icon-release.png" mode="widthFix"></image>
		</view>
	</view>
</template>
<script>
	import { mapState } from 'vuex'; //引入mapState
    export default {
        name:'tabbar',
		props:{
			// 当前选中项
			current:{
				type:Number,
				default:0
			},
		},
        data() {
            return {
				footBarList:[], //底部列表
            };
        },
		mounted() {
			// 获取当前页面路径
			this.$toolAll.tools.obtainPagePath();
			// 获取底部信息
			this.getTabbarList();
		},
        methods:{
			// 获取底部信息
			getTabbarList(){
				this.footBarList = [
					{iconPath:'/static/icon-idle.png',title:'闲置'},
					{iconPath:'/static/icon-my.png',title:'我的'}
				]
				// this.$requst.get('/api/index/mini-program-setting').then(res=>{
				// 	if(res.code == 0){
				// 		console.log(res,'底部信息')
				// 		let tabbarArr = [];
				// 		res.data.footBar.forEach(item=>{
				// 			let obj = {
				// 				iconPath:this.$hostHttp+item.icon,
				// 				title:item.name,
				// 			}
				// 			tabbarArr.push(obj)
				// 		})
				// 		this.footBarList = tabbarArr;
				// 	}
				// })
			},
			// 跳转tabbar
            chooseFootTab(index){
				switch (index){
					case 0:
						uni.reLaunch({
							url:'/pages/idle/idle',
						})
						break;
					case 1:
						if(this.$toolAll.tools.judgeAuth()) {
							uni.reLaunch({
								url:'/pages/my/my',
							})
						}
						break;
				}
            },
			
			// 发布商品
			goRelease(){
				uni.navigateTo({
					url:'/pages/idle/release',
				})
			},
        }
    }
</script>

<style scoped>
	.tabbar-list{
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
	}
	.tabbar-item{
		flex-wrap: wrap;
		justify-items: center;
		width: 25%;
		text-align: center;
	}
	.tabbar-item .icon{
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 40rpx;
	}
	.tabbar-item .icon>image{
		filter: grayscale(100%);
	}
	.tabbar-item .title{
		width: 100%;
		margin-top: 6rpx;
		line-height: 1.2;
	}
	.tabbar-item.active{
		color: #1981ff;
	}
	.tabbar-item.active .icon>image{
		filter: grayscale(0);
	}
	/* 发布按钮 */
	.release-btn{
		justify-content: center;
		align-items: center;
		width: 90rpx;
		height: 90rpx;
		font-size: 50rpx;
		line-height: 80rpx;
		animation: scale_name 1s linear alternate infinite;
		position: fixed;
		right: 20rpx;
		bottom: 120rpx;
		z-index: 99;
	}
	.release-btn>image{
		width: 48rpx;
		height: 48rpx;
	}
	@keyframes scale_name {
		from {
			transform: scale(.9);
		}
		to {
			transform: scale(1.1);
		}
	}
</style>
