<template>
	<view :style="{height:seatheight+'px'}"></view>
	<view class="_footer">
		<!-- <view class="mid"></view> -->
		<view class="_tabbarsafe">
			<view class="_tabbar">
				<template v-for="(item,index) in tabbarArr" :key="index">
					<view v-if="!item.hide" @tap="gotab(item.fullpath)" class="_bar" :class="{_active:item.fullpath == fullpath}">
						<view class="_icon" :style="{backgroundImage:svg2bg(item.fullpath == fullpath?item.selecticon:item.icon)}">
						</view>
						<view class="_name">{{lang(item.name)}}</view>
						<view v-if="item.reddot" class="_reddot"></view>
					</view>
				</template>
			</view>
			<view class="_footer_safe" :style="{height:footer_safe_height+'px'}"></view>
		</view>
	</view>
</template>
<style scoped>
	._mid {
		left: calc(50% - 3em);
		height: 6em;
		position: absolute;
		top: 0.5em;
		width: 6em;
		border-radius: 50%;
		background: var(--bg3);
	}

	._footer {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 990;
	}

	._tabbarsafe {
		position: relative;
	}

	._tabbar {
		display: flex;
		justify-content: space-around;
		margin: 1em;
		border-radius: 2.5em;
		background: #dddddd22;
		/* box-shadow: 0 0 50px 5px #ffffff; */
		border: 1px solid var(--bg6);
		backdrop-filter: blur(20px);
	}

	._tabbar ._bar {
		position: relative;
		text-align: center;
		color: var(--txt1);
		margin: 0.5em 0;
		flex: 1;
	}

	._tabbar ._bar._active {
		color: var(--txt9);
	}

	._tabbar ._icon {
		width: 1.6em;
		height: 1.6em;
		margin: 0 auto;
	}

	._tabbar ._name {
		color: var(--txt6);
		padding-top: 0.2em;
		font-size: 0.9em;
		text-shadow: 0 0 3px var(--bg1);
	}

	._tabbar ._active ._name {
		font-weight: bold;
		color: var(--man5);
	}

	._tabbar ._reddot {
		position: absolute;
		top: 0;
		left: calc(50% + 1em);
		background: var(--dag5);
		border-radius: 50%;
		width: 0.5em;
		height: 0.5em;
	}

	._footer_safe {
		/* background-color: #1cf11899; */
	}
</style>
<script>
	export default {
		props: {},
		data() {
			return {
				footer_safe_height: 0,
				seatheight: 0,
				fullpath: '',
				tabbarArr: null
			};
		},
		watch: {},
		mounted() { //h5 wx ok
			var app = getApp();
			var pg = app.getpage();
			if (pg.route)
				this.fullpath = '/' + pg.route;
			else if (pg.__route__)
				this.fullpath = '/' + pg.__route__;
			this.footer_safe_height = app.globalData._footer_safe_height;
			if(this.tabbarArr == null)
				this.loadtabbardata();
			setTimeout(() => { //ios版本微信小程序存在执行顺序问题
				uni.createSelectorQuery().in(this).select('._footer').boundingClientRect(data => {
					if (data)
						this.seatheight = data.height;
				}).exec();
			}, 10);
		},
		activated() {
			this.loadtabbardata();
		},
		methods: {
			Getheight() {
				return this.seatheight;
			},
			loadtabbardata() {
				var app = getApp();
				this.tabbarArr = this.objclone(app.globalData.tabbarArr);
			},
			gotab(url) {
				uni.switchTab({
					url: url,
					fail: res => {
						console.warn(res.errMsg);
					}
				});
			}
		}
	}
</script>