<template>
	<uv-tabbar fixed :value="selected" @change="change1" activeColor="#FF4767 " :placeholder="false"
		:safeAreaInsetBottom="false" :customStyle="{height:`110rpx`}">
		<!-- <uv-tabbar-item v-for="(item,index) in $store.state.tabbarList" :key="index" :text="item.text" -->
		<uv-tabbar-item v-for="(item,index) in tabbarList" :key="index" :text="item.text"
			:badge="getNum(index)"
			:customStyle="{height:`110rpx`}">
			<template v-slot:active-icon>
				<image class="icon" :src="item.selectedIconPath"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" :src="item.iconPath"></image>
			</template>
		</uv-tabbar-item>
	</uv-tabbar>
</template>

<script>
	import request from "@/utils/request";
	export default {
		name: "tab-bar",
		props: {
			selected: {
				type: [Number, String]
			}
		},
		data() {
			return {
				tabbarList: [{
						"iconPath": "/static/images/tabbar/new_home_gray.png",
						"text": "首页",
						"selectedIconPath": "/static/images/tabbar/new_home.png",
						"pagePath": "/pages/home/home"
					},
                    {
                        "iconPath": "/static/images/tabbar/new_order_gray.png",
                        "text": "订单",
                        "selectedIconPath": "/static/images/tabbar/new_order.png",
                        "pagePath": "/pages/order/all-orders"
                    },
					{
						"iconPath": "/static/images/tabbar/new_message_gray.png",
						"text": "消息",
						"selectedIconPath": "/static/images/tabbar/new_message.png",
						"pagePath": "/pages/message/message"
					},
					{
						"iconPath": "/static/images/tabbar/new_my_gray.png",
						"text": "我的",
						"selectedIconPath": "/static/images/tabbar/new_my.png",
						"pagePath": "/pages/my/my"
					}
				]
			};
		},
		computed: {
			messageNum() {
				return this.$store.state.messageNum || 0
			}
		},
		async created() {
			// if (!this.$store.state.tabbarList.length) {
			// 	let isnNetwork = uni.getStorageSync("isnNetwork");
			// 	if (isnNetwork) {
			// 		await this.getButtonImg()
			// 	} else {
			// 		uni.getNetworkType({
			// 			success: (res) => {
			// 				console.log(res.networkType);
			// 				if (res.networkType == "none") {

			// 					this.$store.commit("setTabbarList", this.tabbarList)
			// 				} else {
			// 					// 页面加载逻辑
			// 					uni.setStorageSync("isnNetwork", 1);
			// 					this.getButtonImg()
			// 				}
			// 			},
			// 		});
			// 	}

			// }

		},
		methods: {
			getNum(index) {
				if (index == 2) {
					return this.messageNum
				} else {
					return 0
				}
			},
			//获取头部背景图片
			async getButtonImg() {
				let res = await request.post("/sj/poster/getButtonImg", {});
				if (res.code == 200) {
					// if (res.data?.photo) {
					// 	this.topBgImage = res.data?.photo + '?time=666'
					// }
					this.tabbarList.forEach((item, index) => {
						if (res.data[index].iconPath) {
							item.iconPath = res.data[index].iconPath
						}
						if (res.data[index].selectedIconPath) {
							item.selectedIconPath = res.data[index].selectedIconPath
						}
					})
				}
				this.$store.commit("setTabbarList", this.tabbarList)
			},
			change1(val) {
				// 因为在pages中配置了需要跳转的页面为 tabbar页面 
				// 所以不能使用navigateTo 只能使用下面这个方法跳转。
				uni.switchTab({
					url: this.tabbarList[val].pagePath
				})
				this.messageUpudateNum()
			}
		}
	}
</script>

<style lang="scss">
	.icon {
		height: 54rpx;
		width: 54rpx;
	}
	::v-deep .uv-tabbar__content{
		z-index: 999!important;
	}
</style>