<template>
	<view class="container">
		<view class='top-container'>
			<image class='bg-img' src='../../static/bg.jpg'></image>
		</view>
        <view class="banner">
			
			<view v-for="(item,index) in lists" :key="index"  class="panel">
				<navigator :open-type="item.openType" :url="item.routerPath" >
					<view class="imgbox"><image :src="item.imgPath" /></view>
			        <text class="text">{{item.title}}</text>
				 </navigator>
			</view>
		</view>
		<scan-code></scan-code>
	</view>
</template>

<script>
	import scanCode from "@/components/scan-code/scan-code.vue"
	export default {
		components: {
			scanCode
		},
		data() {
			return {
				code: 'Hello',
				lists: [{
					title: '入库',
					openType: 'navigate',
					routerPath: '../stockin-query/stockin-query',
					imgPath: '../../static/stockin.png',
					type:'1'
				}, {
					title: '出库',
					openType: 'navigate',
					routerPath: '../stockout-query/stockout-query',
					imgPath: '../../static/stockout.png',
					type:'2'
				}]
			}
		},
		onLoad: function() {

			// uni.$off('scancodedata') // 每次进来先 移除全局自定义事件监听器  
			// uni.$on('scancodedata', function(data) {
			// 	// this.uni.showToast({
			// 	// 	title: data.code,
			// 	// 	duration: 2000
			// 	// });
			// 	console.log("扫码:" + data.code)
			// })
			//检测登录授权TOKEN
			var loginRes = this.checkLogin('../index/index', 2)
			if (!loginRes) {
				return;
			}
		},
		onShow: function() {
			var _this = this
			uni.$off('scancodedata') // 每次进来先 移除全局自定义事件监听器  
			uni.$on('scancodedata', function(data) { 
			})
		},
		onUnload() {
			// 移除监听事件      
			uni.$off('scancodedata')
		},
		onHide() {
			// 移除监听事件
			uni.$off('scancodedata')
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		position: relative;
	}

	.top-container {
		height: 440rpx;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.bg-img {
		position: absolute;
		width: 100%;
		height: 440rpx;
	}
	.banner:after {
	            content: "";
	            width: 30%;
	            height: 0px;
	            visibility: hidden;
	        }
	.banner {
		display: flex;  
	    flex-wrap: wrap;
		text-align: center;
		padding: 0 40upx;
		justify-content: space-between;
		}
	.panel {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200upx;
		height: 200upx;
		margin-bottom: 60upx;
	    justify-content: center;
		border-radius: 15%;
		/* box-shadow: 0 0 3px #00a0e9; */
		/* background-color: rgba(0,160, 233, 0.6); */
	    /* background-color: rgba(162, 217, 192, 0.2); */
	  }
	  .imgbox {
		 display: flex;
		 justify-content: center;
		 align-items: center;
		 width: 110upx;
		 height: 110upx;
		 line-height: 150upx;
		 border-radius: 8px;
		 background-color: white;
	  }
	  .imgbox image {
		  width: 70upx;
		  height: 70upx;
		  margin: 0;
		  padding: 0;
		  box-sizing: border-box;
	  }
	  .text {
	    text-align: center;
	  }
</style>
