<template>
	<view class="dp-tabbar"  v-if="urlList.indexOf(url) != -1">
		<view class="dp-tabbar-bot"></view>
		<view class="dp-tabbar-bar" :style="{backgroundColor:menudata.backgroundColor}">
			<view @click='gotoFn("/pages/index/index")'  class="dp-tabbar-item" >
				<view class="dp-tabbar-image-box">
					<image v-if="url==='pages/index/index'" class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar-selected1.svg'"></image>
					<image v-else class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar1.svg'"></image>
				</view>
				<view class="dp-tabbar-text" :class="{'select-text': url==='pages/index/index'}">首页</view>
			</view>
			<view @click='gotoFn("/pages/shop/classify")'  class="dp-tabbar-item" >
				<view class="dp-tabbar-image-box">
					<image v-if="url==='pages/shop/classify'" class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar-selected2.svg'">
					</image>
					<image v-else class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar2.svg'"></image>
				</view>
				<view class="dp-tabbar-text" :class="{'select-text': url==='pages/shop/classify'}">全部商品</view>
			</view>

			<view @click='gotoFn("/pages/shop/cart")'  class="dp-tabbar-item">
				<view class="dp-tabbar-image-box">
					<image v-if="url==='pages/shop/cart'" class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar-selected4.svg'"></image>
					<image v-else class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar4.svg'"></image>
				</view>
				<view class="dp-tabbar-text" :class="{'select-text': url==='pages/shop/cart'}">购物车</view>
			</view>
			<view @click='gotoFn("/pages/my/usercenter")' class="dp-tabbar-item">
				<view class="dp-tabbar-image-box">
					<image v-if="url==='pages/my/usercenter'" class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar-selected5.svg'"></image>
					<image v-else class="dp-tabbar-icon" :src="event_rul +'/static/img/home/tabbar5.svg'"></image>
				</view>
				<view class="dp-tabbar-text" :class="{'select-text': url==='pages/my/usercenter'}">我的</view>
			</view>
		</view>
		<!-- 	<view class="dp-tabbar-bar" :style="{backgroundColor:menudata.backgroundColor}">
		<view @click='gotoFn" :data-url="item.pagePath" :data-index="index" :data-opentype="index!=0&&getplatform()=='baidu'?'':opentype" class="dp-tabbar-item" v-for="(item,index) in menudata.list" :key="item.id">
			<view class="dp-tabbar-image-box">
				<image v-if="currentIndex===index" class="dp-tabbar-icon" :src="item.selectedIconPath"></image>
				<image v-else class="dp-tabbar-icon" :src="item.iconPath"></image>
			</view>
			<view class="dp-tabbar-text" :style="{color:item.color}">{{item.text}}</view>
		</view>
	</view> -->
	</view>
</template>
<script>
	var app = getApp();
	export default {
		data() {
			return {
				urlList:['diary/attention/attention','diary/evernote/evernote','diary/video/video','pages/index/index','pages/shop/classify','diary/live/live','pages/shop/cart','diary/index/index','pages/my/usercenter'],
				menudata: {},
				url: '',
				currentIndex: -1,
				i: 0,
				opentype: 'reLaunch',
				event_rul: app.globalData.event_url,
			}
		},
		mounted: function() {
			this.settabbar();
		},
		created() {
			var pages = getCurrentPages()
			console.log('ze s sm', pages[pages.length - 1].route)
			// 		let currentPage = pages[pages.length - 1]['$page']['fullPath']
			this.url = pages[pages.length - 1].route
		},
		props: {
			opt: {}
		},
		methods: {
			gotoFn(url){
				if(url !== ('/'+this.url)){
					app.goto(url,'reLaunch')
				}
				
			},
			settabbar: function() {
				var that = this
				if (!app.globalData.isinit && this.i < 100) {
					setTimeout(function() {
						that.i++;
						that.settabbar();
					}, 100)
				} else {
					var opentype = 'reLaunch';
					var currenturl = app._url();
					var opt = this.opt;
					if (this.opt && this.opt.id) {
						currenturl += '?id=' + this.opt.id
					} else if (this.opt && this.opt.cid) {
						currenturl += '?cid=' + this.opt.cid
					} else if (this.opt && this.opt.gid) {
						currenturl += '?gid=' + this.opt.gid
					} else if (this.opt && this.opt.bid) {
						currenturl += '?bid=' + this.opt.bid
					}
					var currentIndex = -1;
					var hastabbar = false;
					var menudata = JSON.parse(JSON.stringify(app.globalData.initdata.menudata));
					var tablist = menudata['list'];
					for (var i = 0; i < tablist.length; i++) {
						if (tablist[i]['pagePath'] == currenturl) {
							currentIndex = i;
							hastabbar = true;
							menudata['list'][i].color = menudata['selectedColor']
						} else {
							menudata['list'][i].color = menudata['color']
						}
					}
					if (hastabbar == false) {
						var menu2data = JSON.parse(JSON.stringify(app.globalData.initdata.menu2data))
						if (menu2data.length > 0) {
							for (var i in menu2data) {
								if (this.opt && this.opt.bid)
									menu2data[i].indexurl = (menu2data[i].indexurl).replace('[bid]', this.opt.bid);
								if (menu2data[i].indexurl == currenturl) {
									hastabbar = true;
									currentIndex = 10;
									menudata = menu2data[i]
									console.log(menudata);
									console.log(this.opt)
									for (var j in menudata.list) {
										if (this.opt && this.opt.bid)
											menudata.list[j].pagePath = (menudata.list[j].pagePath).replace('[bid]',
												this.opt.bid);
										if (menudata.list[j].pagePath == currenturl && menudata['selectedColor']) {
											menudata['list'][j].color = menudata['selectedColor'];
											if (menudata['list'][j]['selectedIconPath']) {
												menudata['list'][j].iconPath = menudata['list'][j]['selectedIconPath'];
											}
										} else if (menudata['color']) {
											menudata['list'][j].color = menudata['color'];
										}
									}
									opentype = '';
									console.log(menudata);
								}
							}
						}
					}
					that.opentype = opentype
					that.currentIndex = currentIndex
					that.menudata = menudata
					//app.globalData.currentIndex = currentIndex;
					console.log(currentIndex);
					that.$emit('getmenuindex', currentIndex)
				}
			},
		}
	}
</script>
<style>
	.dp-tabbar {
		height: auto;
		position: relative;
	}

	.dp-tabbar-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.dp-tabbar-bar {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		padding: 10rpx 0 0 0;
		background: #fff;
		font-size: 24rpx;
		color: #999;
		border-top: 1px solid #e5e5e5;
		z-index: 999999;
		box-sizing: content-box
	}

	.dp-tabbar-item {
		flex: 1;
		text-align: center;
		overflow: hidden;
		align-items: center
	}

	.dp-tabbar-image-box {
		height: 54rpx;
		margin-bottom: 4rpx;
	}

	.dp-tabbar-text {
		line-height: 30rpx;
		font-size: 20rpx;
		font-weight: 500;
	}
	.select-text {
		color: #0A5D3B;
	}

	.dp-tabbar-bot {
		height: 110rpx;
		width: 100%;
		box-sizing: content-box
	}

	@supports(bottom: env(safe-area-inset-bottom)) {

		.dp-tabbar-bot {
			padding-bottom: env(safe-area-inset-bottom);
		}

		.dp-tabbar-bar {
			padding-bottom: env(safe-area-inset-bottom);
		}

	}
</style>
