<template>
	<view class="container">
		<view class="tui-header">
			<view class="tit-left">
				<view class="tui-sub-title">医废转运</view>
				<view class="tui-sub-description">快速转运医废</view>
			</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/mw_icon/'+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/basic_info/basic_info',
						img: "basic_info.png",
						width: 74,
						height: 74
					},
					{
						name: '转运',
						url: '/packagePage/pages/hospital_list/hospital_list',
						img: "transport.png",
						width: 74,
						height: 74
					},
					{
						name: '入库',
						url: '/packagePage/pages/inware/inware',
						img: "in_ware.png",
						width: 74,
						height: 74
					},
					{
						name: '历史转运列表',
						url: '/packagePage/pages/history_plan_trans/history_plan_trans',
						img: "history_plan_transshipment.png",
						width: 74,
						height: 74
					}
				],
				tabBar: myapp.tabBar,
				tabbarCurrent: 0,
				tabbarBackgroundColor: '#FFF'
			}
		},
		onShow: function() {
			let user = myapp.checkLogin()
			uni.setStorageSync('lastPagePath', '/pages/index/index')
		},
		methods: {
			tabbarSwitch: myapp.tabbarSwitch
		}
	}
</script>

<style>
	page {
		background-color: #F5F6FA;
	}
	
	.tui-header {
		padding: 80rpx 60rpx;
		/* border:1px solid red; */
	}

	.tui-title {
		font-size: 34rpx;
		color: #333;
		font-weight: 400;
	}

	.tui-sub-title {
		font-size: 34rpx;
		color: #131212;
		font-weight: 550;
	}
	
	.tui-sub-description{
		padding-top: 20rpx;
		font-size: 26rpx;
		color: #6f6f6f;
	}
	.tit-right{
		float:right;
		margin-top:-25%;
		margin-right:-5%;
	}
	
	.tui-scan-img{
		width: 74rpx;
		height: 74rpx;
	}
	
	.tui-scan-span{
		/* height: 74rpx; */
	}
	
	.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>
