<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="item.name" :badge="item.badge" :dot="item.dot" :badgeStyle="item.badgeStyle">
						<view slot="active-icon"><image style="width:30rpx;height: 30rpx;" :src="item.iconFill" mode=""></image></view>
						<view slot="inactive-icon"><image style="width:30rpx;height: 30rpx;" :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';

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: function() {
				return 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: '', //当前路径
			list: [
				{
					name: '首页',
					url: 'pages/index/index',
					icon: '../../../static/homw-un.png',
					iconFill: '../../../static/home-yes.png'
				},
				{
					name: '设备',
					url: 'pages/device/device',
					icon: '../../../static/device-un.png',
					iconFill: '../../../static/device-yes.png'
				},
				{
					name: '告警',
					url: 'pages/alarm/alarm',
					icon: '../../../static/alert-un.png',
					iconFill: '../../../static/alert-yes.png',
					badge: 0
				},
				{
					name: '我的',
					url: 'pages/personal/personal',
					icon: '../../../static/my-un.png',
					iconFill: '../../../static/my-yes.png'
				}
			]
		};
	},
	onLoad() {},
	created() {
		//获取页面路径
		let currentPages = getCurrentPages();
		let page = currentPages[currentPages.length - 1];
		this.path = page.route;
		//获取页面路径
		this.list.forEach((item, index) => {
			if (this.path == item.url) {
				this.tabIndex = index;
			}
		});
	},
	methods: {
		loadData() {
			let httpData = {
				page: 1,
				pageSize: 10
			};
			uni.$u.http
				.get('/yt/alarm', { params: httpData })
				.then(res => {
					this.list[2].badge = res.total;
				})
				.catch(e => {
					uni.$u.toast(e.data?.message);
				});
		},
		onTabbar(index) {
			if (index !== 5) {
				// this.loadData();
			}
			if (this.path !== this.list[index].url) {
				uni.switchTab({
					url: '/' + this.list[index].url
				});
			}
		}
	}
};
</script>

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