<style scoped>
	 .tabbarMain {
  height: 100upx;
  position: fixed;
  z-index: 50;
  flex: 1;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999999;
  border-top: 1upx solid #ddd;
  padding-top: 96rpx;
  background: #fff;
}
.tabbarMainIphone {
  height: 156upx;
  padding-bottom: 64upx;
}
.tabBtnMina {
  width: 750upx;
  height: 88upx;
  position: absolute;
  z-index: 2;
  bottom: 0;
  flex-direction: row;
  display: flex;
  left: 0;
  right: 0;
  z-index: 99999999;
}
.tabBtnMinaIphone {
  height: 156upx;
  padding-bottom: 64upx;
}
.imgse {
  height: 48upx;
  width: 48upx;
}
.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;
} 
</style>
<template>
  <view
    class="tabbarMain bar-box"
    :class="[flagTypeInfo ? 'tabbarMainIphone' : '']"
    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)"
      >
        <image
          class="imgse"
          :fade-show="false"
          v-if="active != i"
          mode="aspectFit"
          :src="x.icon"
        ></image>
        <image
          class="imgse"
          :fade-show="false"
          v-if="active === i"
          mode="aspectFit"
          :src="x.active_icon"
        ></image>
        <text
          class="txtBtn"
          :style="{ color: active == i ? x.active_color : x.color }"
          >{{ x.text }}</text
        >
      </view>
    </view>
  </view>
</template> 

<script>
export default {
  data() {
    return {
      active: 0,
      platforms: "",
      leftWidth: 0,
      flagTypeInfo: false,
      navs: [],
      crtPath: "",
    };
  },
  created() {
  },
  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 = uni.getStorageSync("navs") ?? [];
    } else {
      setTimeout(() => {
        this.navs = uni.getStorageSync("navs") ?? [];
        this.activeHandler();
      }, 3000);
    }
    this.activeHandler();
  },
  methods: {
    activeHandler() {
      let t = getCurrentPages();

      // #ifdef MP-WEIXIN
      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;
      // #endif
      //  #ifdef MP-ALIPAY
      this.crtPath = t[t.length - 1].$page.fullPath;
      // #endif
      this.navs.forEach((x, i) => {
        if (x.url == this.crtPath) {
          this.active = i;
        }
      });
    },
    goUrl(url) {
      if (this.crtPath != url) {
        uni.redirectTo({
          url: url,
        });
      } else {
        uni.reLaunch({
          url: url,
        });
      }
    },
  },
};
</script>

<!-- <template>
	<view class="bar-box">
		<div class="bar-box-line">
			<view class="bar-item" v-for="(x,i) in menus" @click="changeMenuHandler(x)">
				<i class="icon iconfont" :class="[x.icon]" v-if="current != x.page"></i>
				<view class="acitve" v-else>
					{{x.name}}
				</view>
			</view>
		</div>
	</view>
</template> 
<script>
	export default {
		data() {
			return {
				menus: [],
				current: ''
			};
		},
		mounted() {
			let pages = getCurrentPages()
			this.current = "/" + pages[pages.length - 1].route ? ? ''
			this.menus = [{
					name: '首页',
					icon: 'icon-home',
					page: '/pages/index/index'
				},
				{
					name: '订单',
					icon: 'icon-Work',
					page: '/pages/jiuzhai/jz_MyOrder'
				},
				{
					name: '我的',
					icon: 'icon-my1',
					page: '/pages/user-center/user-center'
				}
			]
		},
		methods: {
			changeMenuHandler(menu) {
				this.current = menu.page
				if (menu.page.indexOf('pages') != -1) {
					uni.redirectTo({
						url: menu.page
					})
				}
			}
		}
	}
</script>
-->
<style>
	/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
	@font-face {
		font-family: "nav-font";
		src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/tcIItWsk6dTo.woff2") format("woff2"),
			url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/RZzswoFvsjUs.woff") format("woff");
		font-display: swap;
	}

	.bar-box {
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #FFF;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		box-shadow: 0 0 6px rgba(0, 0, 0, .12);
		position: fixed;
		z-index: 50;
		flex: 1;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99999999;
	}

	.bar-box-line {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding: 20upx 0 30upx;
	}

	.bar-box-line.uninset {
		padding: 20upx 0 40upx;
	}

	.bar-box-line.inset {
		padding: 20upx 0;
	}

	.bar-box-line .bar-item {
		flex: 1;
		width: 1px;
		text-align: center;
		color: #abadb9;
		position: relative;
	}

	.bar-box-line .bar-item .icon {
		font-size: 50rpx;
	}

	.bar-box-line .bar-item .acitve {
		font-size: 32rpx;
		font-weight: bold;
		color: #1F2429;
		text-align: center;
		font-family: nav-font;
	}

	.bar-box-line .bar-item .acitve::after {
		display: inline-block;
		content: ' ';
		width: 4px;
		height: 4px;
		border-radius: 4px;
		background-color: #1F2429;
		position: absolute;
		left: calc(50% - 2px);
		top: 60rpx;
	}
</style>
