<template>
	<view v-if="!!TabBarsData">
		<view class="diy-tabbar" :style="{'background':TabBarsData?TabBarsData.style.bgcolor:'#ffffff','padding-bottom':isPadding?'20px':'','borderTop': '1px solid #efefef'}">
			<view class="tabbar-item" v-for="(item,index) in TabBarsData.data" :key="index" @click="onTabItem(item.linkurl,item.name,index)">
				<view v-if="TabBarsData.params.navstyle==='1'">
					<image class="image" :src="item.imgurl"></image>
				</view>
				<view v-if="TabBarsData.params.navstyle==='0'">
					<view class="tabbar-sever" v-if="item.page_path == 'pages/subPages2/homemaking/postDemand/postDemand'">
						<image class="tabbar-severImg" :src="imgfixUrls + 'homemakingImg/enterCheck.png'" mode=""></image>
					</view>
					<view  v-else>
						<view class="iconfont tabbar-item-icon" :class="item.iconclass" :style="current===index?'color:'+TabBarsData.style.iconcoloron:'color:'+TabBarsData.style.iconcolor"></view>
						<view class="f-24" :style="current===index?'color:'+'#509DFD':'color:'+TabBarsData.style.textcolor">{{item.text}}</view>
					</view>
					
				</view>
				<view class="navstyle-3-item" v-if="TabBarsData.params.navstyle==='2'" :class="(isTip && index=='2')?'msg_tip':''">
					<view class="navstyle-image" :style="{'background-image':current===index?'url('+item.select_img+')':'url('+item.default_img+')'}"></view>
					<!-- <view class="f-24 t-c" :style="current===index?'color:'+TabBarsData.style.textcoloron:'color:'+TabBarsData.style.textcolor">{{item.text}}</view> -->
					<view class="f-24 t-c" :style="current===index?'color:'+'#509DFD':'color:'+TabBarsData.style.textcolor">{{item.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js'
	export default {
		data() {
			return {
				current: 0,
				isPadding: null,
				menu: null,
				isTip: false,//是否红点消息提示
			}
		},
		props: {
			tabBarAct: {
				type: Number,
				default: function() {
					return 0
				}
			},
			
			tabBarData: {
				default: function() {
					return null
				}
			},
			

		
			pageType: {
				type: String,
				default: function() {
					return ""
				}
			},
			pageId: {
				type: String,
				default: function() {
					return ""
				}
			},
			menuList: {
				default: function() {
					return ""
				}
			}
		},
		mounted() {
			let _this = this;
			_this.current =  uni.getStorageSync('tabbarindex');
			uni.getSystemInfo({
				success(res) {
					let model = res.model,
						iphoneModel = ["iPhone10,3", "iPhone10,6", "iPhone11,8", "iPhone11,2", "iPhone11,6"];
					_this.isPadding = iphoneModel.includes(model) || model.indexOf("iPhone X") !== -1 || model.indexOf("iPhone12") !== -1;
				}
			});
			_this.getbtmNavBar()
		},
		methods: {
			onTabItem(url, pageName,index) {
				uni.setStorageSync('tabbarindex',index);
				if(url.indexOf('indet') != -1){
					//#ifdef H5
					// let loc = url.split('?')[1];
					// debugger
					App.navigationToH5(false,`${App.base}#/${url}`);
					window.location.reload();
					//#endif
					//#ifndef H5
					App.navigationTo({
						url:url
					});
					//#endif
					return
				}
				// #ifdef H5
				App.navigationTo({
					url: url
				});
				// #endif
				// #ifndef H5
				App.navigationTo({
					url: url,
					navType:'rediRect'
				});
				// #endif
				
			},
			getbtmNavBar() {
				let _this = this,
					requestData = {};
				if (!!_this.pageType) {
					requestData = {
						type: _this.pageType
					}
				}
				if (!!_this.pageId) {
					Object.assign(requestData, {
						id: _this.pageId
					})
				}
				if(_this.pageType == 'draw'){
						_this.setData({
							menu: _this.tabBarData
						});
						let pages = getCurrentPages(),
							currentPage = pages[pages.length - 1],
							pageRoute = currentPage.route || currentPage.__route__;
							let tablist = [];
							// for (let i in _this.menu.data) {
							// 	tablist.push(_this.menu.data[i]);
							// };
							
							// let result_one = tablist.m(function(item) {
							//     if (item.page_path.split('?')[0] == pageRoute) { 
							//         return true;  //返回false
							//     }
							// });
							let result_one = false;
							tablist = _this.menu.data;
							// for(let i = 0;i<tablist.length;i++){
							// 	if(tablist[i].page_path.split('?')[0] == pageRoute){
							// 		result_one = true;
							// 		return  //返回false
							// 	}
							// }
							for (let key in tablist) {
								if(tablist[key].page_path.split('?')[0] == pageRoute){
									result_one = true;
									  //返回false
								}
							};
							if(!result_one){
								uni.removeStorageSync('tabbarindex');
								_this.current = 0;
							}
				}else{
				App._post_form('&do=BottomMenu', requestData, res => {
						_this.setData({
							menu: res.data.data
						});
						// uni.showToast({
						// 	title:'成功了'
						// })
					let pages = getCurrentPages(),
						currentPage = pages[pages.length - 1],
						pageRoute = currentPage.route || currentPage.__route__;
						let tablist = [];
						// for (let i in _this.menu.data) {
						// 	tablist.push(_this.menu.data[i]);
						// };
						
						// let result_one = tablist.m(function(item) {
						//     if (item.page_path.split('?')[0] == pageRoute) { 
						//         return true;  //返回false
						//     }
						// });
						let result_one = false;
						tablist = _this.menu.data;
						// for(let i = 0;i<tablist.length;i++){
						// 	if(tablist[i].page_path.split('?')[0] == pageRoute){
						// 		result_one = true;
						// 		return  //返回false
						// 	}
						// }
						for (let key in tablist) {
							if(tablist[key].page_path.split('?')[0] == pageRoute){
								result_one = true;
								  //返回false
							}
						};
						if(!result_one){
							uni.removeStorageSync('tabbarindex');
							_this.current = 0;
						}
						if(res.data.data.is_icon){
							//有新消息
							// _this.isTip = true;
						}else{
							// _this.isTip = false;
						}
				})
				}
			},
		},
		computed: {
			TabBarsData() {
				let pages = getCurrentPages(),
					currentPage = pages[pages.length - 1],
					pageRoute = currentPage.route || currentPage.__route__,
					TabBarsData = {
						data: !!this.tabBarData && this.tabBarData.length > 0 ? this.tabBarData : this.menu
					},
					pageIndex;
					console.log(this.tabBarData, this.menu)
					// #ifdef H5
				let	pageObj = currentPage.$mp.query;
					// debugger
				// #endif

				// #ifdef MP-WEIXIN
				let pageObj = currentPage.$vm.$mp.query;
				// #endif
				//#ifdef APP-PLUS
				let pageObj = currentPage.options;
				//#endif
				if(!!TabBarsData.data) {
					let tablist = [];
					for (let key in TabBarsData.data.data) {
						tablist.push(TabBarsData.data.data[key])
					};
					// debugger
					if (pageRoute === 'pages/mainPages/index/diypage') {
						// 检测自定义页面的参数，判断高亮
						pageRoute = pageRoute + '?i=' + pageObj.i + (pageObj['aid']?'&aid=' + pageObj['aid']:'') + (pageObj['id']?'&id=' + pageObj['id']:'') + '&type=' + pageObj['type'];
						//之前使用for in 循环给每一个K添加上链接，但是因为小程序在移动端表现参数的位置不同，所以修改为固定位置添加参数
						pageIndex = tablist.findIndex(item => item.linkurl === pageRoute);
						this.current = pageIndex;
					}else{
						pageIndex = tablist.findIndex(item => item.linkurl.split('?')[0] === pageRoute);
						this.current = pageIndex;
						
					}
					TabBarsData.data.data = tablist;
					console.log(TabBarsData.data)
					return TabBarsData.data
				}
			}
		}
	}
</script>

<style scoped>
	.diy-tabbar {
		border-color: rgba(0, 0, 0, 0.33);
		position: fixed;
		z-index: 9999;
		height: 130upx;
		left: 0;
		background-color: rgb(255, 255, 255);
		color: rgb(110, 109, 107);
		bottom: 0;
		width: 100%;
		display: flex;
	}

	.tabbar-item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		flex: 1;
		font-size: 0;
		color: #6e6d6b;
		text-align: center;
		z-index: 5;
		padding-bottom: 30upx;
	}
	
	.tabbar-sever{
		
	}
	.tabbar-severImg{
		width: 84upx;
		height: 84upx;
		position: relative;
		top: -20upx;
	}
	.tabbar-item .tabbar-item-icon {
		font-size: 44upx;
	}

	.tabbar-item.item-on {
		/* color: #fd4a5f; */
		
	}

	.tabbar-item .image {
		display: inline-block;
		width: 100upx;
		height: 100upx;
	}

	.tabbat-item-text {
		padding-top: 0;
		padding-bottom: 0;
		font-size: 20upx;
		line-height: 1.8;
		text-align: center;
	}

	.navstyle-image {
		width: 60upx;
		height: 60upx;
		background-repeat: no-repeat;
		background-size: 60upx 60upx;
		display: block;
		margin: 0 auto;
	}

	.navstyle-3-item {
		padding: 10upx 0;
	}
	.msg_tip{
		position: relative;
	}
	.msg_tip::after{
		position: absolute;
		top: 6px;
		right: 0px;
		content: '';
		background-color: #f00;
		width: 6px;
		height: 6px;
		border-radius: 3px;
	}
</style>
