<template>
	<view>
		<view :class="[isFixed ? 'f-fixed' : '']">
			<!-- 二次封装tabbar -->
			<u-tabbar :value="tabIndex" @change="onTabbar" :fixed="false" :placeholder="false"
				:safeAreaInsetBottom="false" :activeColor="activeColor" :inactiveColor="inactiveColor" :border="border">
				<block v-for="(item, index) in list" :key="index">
					<!-- 自定义icon -->
					<u-tabbar-item :text="$t(item.name)" :badge="item.badge" :dot="item.dot" :badgeStyle="item.badgeStyle">
						<view slot="active-icon">
							<image style="width:50rpx;height: 50rpx;" :src="item.iconFill" mode=""></image>
						</view>
						<view slot="inactive-icon">
							<image style="width:50rpx;height: 50rpx;" :src="item.icon" mode=""></image>
						</view>
					</u-tabbar-item>
				</block>
			</u-tabbar>
			<!-- 苹果安全距离-默认20px -->
			<view :style="{ paddingBottom: systemInfo.tabbarPaddingB + 'px', background: '#fff' }"></view>
		</view>
		<!-- 防止塌陷高度 -->
		<view v-if="isFixed && isFillHeight" :style="{ height: systemInfo.tabbarH + 'px' }"></view>
	</view>
</template>

<script>
	import base from '@/config/baseUrl.js';
	import {
		mapState
	} from 'vuex';

	export default {
		name: 'f-tabbar',
		props: {
			// 是否固定在底部
			isFixed: {
				type: Boolean,
				default: true
			},
			// 是否设置防止塌陷高度
			isFillHeight: {
				type: Boolean,
				default: true
			},
			// 选中的颜色
			activeColor: {
				type: String,
				default: '#377dff'
			},
			// 未选中颜色
			inactiveColor: {
				type: String,
				default: '#606266'
			},
			// 是否显示边框色
			border: {
				type: Boolean,
				default: true
			},
			// 右上角的角标提示信息
			badge: {
				type: [String, Number, null],
				default: uni.$u.props.tabbarItem.badge
			},
			// 是否显示圆点，将会覆盖badge参数
			dot: {
				type: Boolean,
				default: uni.$u.props.tabbarItem.dot
			},
			// 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
			badgeStyle: {
				type: [Object, String],
				default: uni.$u.props.tabbarItem.badgeStyle
			}
		},
		data() {
			return {
				systemInfo: base.systemInfo,
				tabIndex: 0,
				path: '', //当前路径
				//#ifdef MP
				list: [{
						name: 'menu.homePage',
						url: 'pages/index/index',
						icon: '../../../static/home-un.png',
						iconFill: '../../../static/home-yes.png'
					},
					{
						name: 'menu.device',
						url: 'pages/device/device',
						icon: '../../../static/device-un.png',
						iconFill: '../../../static/device-yes.png'
					},
					{
						name: 'menu.alarm',
						url: 'pages/alarm/alarm',
						icon: '../../../static/alert-un.png',
						iconFill: '../../../static/alert-yes.png',
						badge: this.$store.state.badgeInfo
					},
					{
						name: 'menu.my',
						url: 'pages/personal/personal',
						icon: '../../../static/my-un.png',
						iconFill: '../../../static/my-yes.png'
					}
				],
				//#endif
				//#ifdef APP-PLUS
				list: [{
						name: 'menu.homePage',
						url: 'pages/index/index',
						icon: '/static/home-un.png',
						iconFill: '/static/home-yes.png'
					},
					{
						name: 'menu.device',
						url: 'pages/device/device',
						icon: '/static/device-un.png',
						iconFill: '/static/device-yes.png'
					},
					{
						name: 'menu.alarm',
						url: 'pages/alarm/alarm',
						icon: '/static/alert-un.png',
						iconFill: '/static/alert-yes.png',
						badge: this.$store.state.badgeInfo
					},
					{
						name: 'menu.my',
						url: 'pages/personal/personal',
						icon: '/static/my-un.png',
						iconFill: '/static/my-yes.png'
					}
				]
				//#endif
				//#ifdef H5
				list: [{
						name: 'menu.homePage',
						url: 'pages/index/index',
						icon: '/static/home-un.png',
						iconFill: '/static/home-yes.png'
					},
					{
						name: 'menu.device',
						url: 'pages/device/device',
						icon: '/static/device-un.png',
						iconFill: '/static/device-yes.png'
					},
					{
						name: 'menu.alarm',
						url: 'pages/alarm/alarm',
						icon: '/static/alert-un.png',
						iconFill: '/static/alert-yes.png',
						badge: this.$store.state.badgeInfo
					},
					{
						name: 'menu.my',
						url: 'pages/personal/personal',
						icon: '/static/my-un.png',
						iconFill: '/static/my-yes.png'
					}
				]
				//#endif
			};
		},
		created() {
			//获取页面路径
			let currentPages = getCurrentPages();
			let page = currentPages[currentPages.length - 1];
			this.path = page.route;
			if (this.list.length > 0) {
				this.list.forEach((item, index) => {
					if (this.path == item.url) {
						this.tabIndex = index;
					}
				});
			}
		},
		computed: {
			getAlarmBadge() {
				return this.$store.state.badgeInfo
			}
		},
		methods: {
			onTabbar(index) {
				// this.list[2].badge = this.getAlarmBadge;

				if (this.list[index].url) {
					if (this.path !== this.list[index].url) {
						uni.switchTab({
							url: '/' + this.list[index].url
						});
					}
				}
			}
		},
		watch: {
			getAlarmBadge(oldValue, newValue) {
				const oldRecord = this.list[2]
				this.$set(this.list, 2, {
					...oldRecord,
					badge: this.$store.state.badgeInfo
				})

			}
		}
	};
</script>

<style lang="scss" scoped>
	.f-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}
</style>