<template>
	<view class="container">
		<view class="tui-header">
			<view class="tui-sub-title" style="padding-bottom: 20rpx;">医院总数</view>
			<view class="tui-title">2</view>
			<view class="tui-sub-title" style="padding-top: 20rpx;">需更换过滤器数量：0 &nbsp;&nbsp;&nbsp;&nbsp; 已更换过滤器数量：0 </view>
		</view>
		<tui-grid>
			<block v-for="(item,index) in routers" :key="index">
				<navigator :url="item.url" hover-class='none'>
					<tui-grid-item>
						<view class="tui-grid-icon">
							<image class="tui-grid-img" :src="apiHost+'/miniapp/static/wsapp/'+item.img" :style="{width:item.width+'rpx',height:item.height+'rpx'}" ></image>
						</view>
						<text class="tui-grid-label">{{item.name}}</text>
					</tui-grid-item>
				</navigator>
			</block>
		</tui-grid>
		<tui-tabbar :current="tabbarCurrent"  backdropFilter :backgroundColor="tabbarBackgroundColor" :tabBar="tabBar" color="#777" selectedColor="#AC9157" @click="tabbarSwitch"></tui-tabbar>
	</view>
</template>

<script>
	import myapp from '@/common/js/myapp.js'
	export default {
		data() {
			return {
				apiHost: myapp.apiHost,
				routers: [{
						name: '总览',
						url: '/packagePage/pages/wait/wait',
						img: "nav1.png",
						width: 74,
						height: 74
					},
					{
						name: '过滤器更换',
						url: '/packagePage/pages/ctrllist/ctrllist',
						img: "nav2.png",
						width: 74,
						height: 74
					},
					{
						name: '数据分析',
						url: '/packagePage/pages/wait/wait',
						img: "nav4.png",
						width: 74,
						height: 74
					}
				],
				tabBar: myapp.tabBar,
				tabbarCurrent: 0,
				tabbarBackgroundColor: '#FFF'
			}
		},
		onShow: function() {
			// 验证登录信息是否过期
			let user = myapp.checkLogin()
			
			// 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容
			// uni.setStorageSync('lastPagePath', '/pages/index/index')
			// let that = this;
			// 获取场站基本信息
			// myapp.request('/?c=overview&a=getProjectBasicInfo',function(res) {
			// 	that.terminal_count = res.data.data.terminal_count
			// 	that.total_gate_count = res.data.data.total_gate_count
			// 	that.total_pump_count = res.data.data.total_pump_count
			// },{token:user.token})
		},
		methods: {
			tabbarSwitch: myapp.tabbarSwitch,
			exitauth: function() {
				uni.removeStorageSync('user');
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F6FA;
	}
	
	.tui-header {
		padding: 80rpx 60rpx;
	}

	.tui-title {
		font-size: 46rpx;
		color: #333;
		font-weight: bold;
	}

	.tui-sub-title {
		font-size: 26rpx;
		color: #7a7a7a;
		font-weight: 600;
	}

	.tui-grid-icon {
		width: 100%;
		height: 74rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-grid-label {
		margin-top: 10rpx;
		display: block;
		text-align: center;
		font-weight: 400;
		color: #333;
		font-size: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.btnExit {
		color: #FFF;
		background-color: #5C5EC3;
		padding-left: 10rpx;
		padding-right: 10rpx;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		position: absolute;
		right: 40rpx;
		border-radius: 10rpx;
	}
</style>
