<style scoped>
	.tabbarMain {
		position: fixed;
		z-index: 50;
		flex: 1;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99999999;
		border-top: 1upx solid #ddd;
		padding-top: 20rpx;
		background: #fff;
	}

	.tabbarMainIphone {
		/* height: 156upx; */
		/* padding-bottom: 64upx; */
	}

	.tabBtnMina {
		width: 750upx;
		flex-direction: row;
		/* #ifndef */
		/* padding-bottom: constant(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-top); */
		/* #endif */
		display: flex;
		left: 0;
		right: 0;
		z-index: 99999;
	}

	.tabBtnMinaIphone {
		/* height: 156upx; */
		/* padding-bottom: 64upx; */
	}

	.imgse {
		height: 40upx;
		width: auto;
		margin-bottom: 8upx;
	}

	.txtBtn {
		font-size: 24upx;
		color: #666666;
	}

	.txtBtnSel {
		font-size: 24upx;
		color: #333333;
	}

	.itmMain {
		width: 150upx;
		flex: 1;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.imgseTs {
		width: 150upx;
		height: 140upx;
		margin-bottom: 90upx;
		position: relative;
		z-index: 1;
		bottom: 0upx;
	}

	.btnfixMin {
		width: 750upx;
		height: 178upx;
		position: absolute;
		z-index: 1;
		bottom: 0;
	}

	.btnfixMinIphone {
		bottom: 64upx;
	}

	.fixTpm {
		width: 150upx;
		height: 140upx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 0;
	}

	.imgseTsAnds {
		width: 150upx;
		height: 150upx;
		position: fixed;
		z-index: 1;
		bottom: 10upx;
		border-radius: 150upx;
	}

	/* ----------------不显示图标导航样式-------------- */
	.txtBtn2 {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #b2b3b4;
	}

	.activeTxtBtn2 {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
	}
</style>
<template>
	<view>
		<view v-if="isShowIcon === 1">
			<view class="tabbarMain" style="border-radius: 50rpx;" :class="[flagTypeInfo ? 'tabbarMainIphone' : '']"
				:style="{'position':'fixed','left':'0','right':'0','padding-bottom':paddingBottom + 'rpx'}"
				v-if="navs && navs.length > 0">
				<view class="tabBtnMina" mode="">
					<view class="itmMain" v-for="(x, i) in navs" :key="i" @click.stop="goUrl(x.url)">
						<image class="imgse" :fade-show="false" v-if="active != i" mode="heightFix" :src="x.icon">
						</image>
						<image class="imgse" :fade-show="false" v-if="active === i" mode="heightFix"
							:src="x.active_icon"></image>
						<text class="txtBtn"
							:style="{ color: active == i ? x.active_color : x.color }">{{ x.text }}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isShowIcon === 0">
			<view class="tabbarMain" :class="[flagTypeInfo ? 'tabbarMainIphone' : '']"
				:style="{'padding-bottom':'64upx'}" v-if="navs && navs.length > 0">
				<view class="tabBtnMina" :class="[flagTypeInfo ? 'tabBtnMinaIphone' : '']" mode="">
					<view class="itmMain" v-for="(x, i) in navs" :key="i" @click.stop="goUrl(x.url)">
						<text class="txtBtn2" :class="{ activeTxtBtn2: active == i }"
							:style="{ color: active == i ? x.active_color : x.color }">{{ x.text }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				platforms: "",
				leftWidth: 0,
				flagTypeInfo: false,
				navs: [],
				crtPath: "",
				isShowIcon: 1,
				paddingBottom: "",
				height: ""
			};
		},
		created() {
			let data = uni.getStorageSync("basedata");
			if (data) {
				this.isShowIcon = data.navbar.isShowIcon;
			} else {
				this.isShowIcon = 1;
			}
		},
		mounted() {
			this.flagTypeInfo = this.$uiConfig.is_bang;
			let tempSystem = uni.getSystemInfoSync();
			this.platforms = tempSystem.platform;
			this.$nextTick(() => {
				// #ifdef APP-NVUE || APP-PLUS || APP-PLUS-NVUE ||APP-VUE
				if (this.platforms == "android") {
					let temp = this.$refs.leftWidth;
					this.leftWidth = tempSystem.screenWidth / 2;
				}
				// #endif
			});
			if (uni.getStorageSync("navs")) {
				this.navs = [];
				if (uni.getStorageSync("navs")) {
					this.navs = uni.getStorageSync("navs")
				}
			} else {
				setTimeout(() => {
					this.navs = [];
					if (uni.getStorageSync("navs")) {
						this.navs = uni.getStorageSync("navs")
					}
					this.activeHandler();
				}, 3000);
			}
			this.activeHandler();
			let that = this
			wx.getSystemInfo({
				success(res) {
					let lift = res.screenHeight - res.safeArea.bottom
					that.paddingBottom = Number(lift) + 20
				}
			})
		},
		methods: {
			activeHandler() {
				let t = getCurrentPages();
				let query = t[t.length - 1].__displayReporter.query;
				let queryString = "";
				for (var k in query) {
					queryString += `&${k}=${query[k]}`;
				}
				if (queryString != "") {
					queryString = "?" + queryString.substring(1, queryString.length);
				}
				this.crtPath = "/" + t[t.length - 1].route + queryString;
				this.navs.forEach((x, i) => {
					if (x.url == this.crtPath) {
						this.active = i;
					}
				});
			},
			goUrl(url) {
				const replace = uni.getStorageSync('replace_page_index')
				if (url == '/pages/index/index' && replace && replace.url) {
					url = replace.url
				}
				if (this.crtPath != url) {
					uni.redirectTo({
						url: url,
					});
				} else {
					uni.reLaunch({
						url: url,
					});
				}
			},
		},
	};
</script>