<template>
	<view class="bg-image">

		<view>
			<navigator url="../index/index" open-type="redirect" hover-class="other-navigator-hover">
				<view class="logOut-container">
					<image class="logOut-image" src="/static/logOut.png"></image>
				</view>
			</navigator>
		</view>

		<view style="display: flex;flex-direction: row;margin-bottom: 10rpx;margin-top: 30rpx;">
			<view style="flex: 1;"></view>
			<view class="uni-flex uni-column" style="flex: 5;">
				<view hover-class="navigator-hover" @click="handleNavigatorTap('物料绑定')">
					<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
						<image class="function-image" src="/static/bind.png" />
					</view>
					<view class="function-text">物料绑定</view>
				</view>
			</view>
			<view class="uni-flex uni-column" style="flex: 5;">
				<view hover-class="navigator-hover" @click="handleNavigatorTap('绑定查询')">
					<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
						<image class="function-image" src="/static/bindQuery.png" />
					</view>
					<view class="function-text">绑定查询</view>
				</view>
			</view>
			<view class="uni-flex uni-column" style="flex: 5;">
				<view hover-class="navigator-hover" @click="handleNavigatorTap('产线呼叫')">
					<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
						<image class="function-image" src="/static/callIn.png" />
					</view>
					<view class="function-text">产线呼叫</view>
				</view>
			</view>
			<view style="flex: 1;"></view>
		</view>

		<view style="display: flex;flex-direction: row;margin-bottom: 10rpx;margin-top: 30rpx;">
			<view style="flex: 1;"></view>
			<view class="uni-flex uni-column" style="flex: 5;">
				<view hover-class="navigator-hover" @click="handleNavigatorTap('货架送回')">
					<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
						<image class="function-image" src="/static/callOut.png" />
					</view>
					<view class="function-text">货架送回</view>
				</view>
			</view>
			<view class="uni-flex uni-column" style="flex: 5;">
				<view hover-class="navigator-hover" @click="handleNavigatorTap('库存盘点')">
					<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
						<image class="function-image" src="/static/stockTaking.png" />
					</view>
					<view class="function-text">库存盘点</view>
				</view>
			</view>
			<view class="uni-flex uni-column" style="flex: 5;">
				<view hover-class="navigator-hover" @click="handleNavigatorTap('任务管理')">
					<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
						<image class="function-image" src="/static/task.png" />
					</view>
					<view class="function-text">任务管理</view>
				</view>
			</view>
			<view style="flex: 1;"></view>
		</view>

		<view style="display: flex;flex-direction: row;margin-bottom: 10rpx;margin-top: 30rpx;">
			<view style="flex: 1;"></view>
			<view class="uni-flex uni-column" style="flex: 5;">
				<view hover-class="navigator-hover" @click="handleNavigatorTap('货架位置绑定解绑')">
					<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
						<image class="function-image" src="/static/shelfLocation.png" />
					</view>
					<view class="function-text">货架位置绑定解绑</view>
				</view>
			</view>
			<view class="uni-flex uni-column" style="flex: 5;">

			</view>
			<view class="uni-flex uni-column" style="flex: 5;">

			</view>
			<view style="flex: 1;"></view>
		</view>

	</view>
</template>

<script>
	import {
		getConfig
	} from '@/config.js';

	export default {
		data() {
			return {
				hasPermission: true,
			}
		},
		methods: {
			handleNavigatorTap: function(pageName) {
				var roleName = getConfig('roleName', '');
				var requiredRole = 'PDA' + pageName;
				console.log('roleName:', roleName);
				console.log('requiredRole:', requiredRole);

				// 检查用户角色是否包含所需的角色
				this.hasPermission = roleName.includes(requiredRole);

				let url = '';
				switch (pageName) {
					case '物料绑定':
						url = '../bind/bind';
						break;
					case '绑定查询':
						url = '../queryBindList/queryBindList';
						break;
					case '产线呼叫':
						url = '../productionLineCallIn/productionLineCallIn';
						break;
					case '货架送回':
						url = '../productionLineCallOut/productionLineCallOut';
						break;
					case '库存盘点':
						url = '../stockTaking/stockTaking';
						break;
					case '任务管理':
						url = '../agvTasks/agvTasks';
						break;
					case '货架位置绑定解绑':
						url = '../shelfLocationBindUnbind/shelfLocationBindUnbind';
						break;
					default:
						url = ''; // 默认情况，确保有一个有效的处理
				}

				if (this.hasPermission) {
					// 用户有权限，允许跳转
					wx.navigateTo({
						url: url
					});
				} else {
					// 用户没有权限，显示提示
					wx.showToast({
						title: '您没有权限进行此操作',
						icon: 'none',
						duration: 2000
					});
				}
			},
		}
	}
</script>

<style>
	.bg-image {
		background-image: url('/static/background.png');
		/* 背景图片路径 */
		background-size: cover;
		/* 背景图片覆盖整个元素 */
		background-position: center;
		/* 背景图片居中 */
		height: 100%;
		/* 视图高度设置为100% */
		width: 100%;
		/* 视图宽度设置为100% */
		position: fixed;
		/* 视图定位为固定 */
		top: 0;
		left: 0;
		/* z-index: -1; */
	}

	.logOut-container {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		/* 水平方向上靠右 */
		align-items: flex-start;
		/* 垂直方向上靠上 */
		height: 100%;
		/* 或者其他适当的值 */
		/* 其他样式 */
	}

	.logOut-image {
		top: 20rpx;
		right: 20rpx;
		height: 60rpx;
		width: 60rpx;
		/* 不需要额外的定位样式 */
	}

	.function-image {
		height: 140rpx;
		width: 140rpx;
		margin: 20rpx;
		padding-left: 20rpx;
	}

	.function-text {
		color: black;
		text-align: center;
		font-weight: bold;
		font-size: 35rpx;
	}
</style>