<template>
	<view class="containers" :style="{'height':winHeight+'px', 'padding-top': statusBarHeight + 20 + 'px'}">
		<view class="header-area">
			<view class="logo-container">
				<image class="logo" :src="logoIndex" mode="aspectFit"></image>
			</view>
			<view class="visit-record">
				<view class="visit-text">
					<text @click="toUrl(0)">拜访记录</text>
					<text class="english" @click="toUrl(0)">Visit Records</text>
				</view>
			</view>
		</view>
		<view class="section-title">
			<view class="title-text">
				<text class="chinese">迈柯唯访客</text>
				<text class="english">Visitor</text>
			</view>
		</view>
		<view class="bdfk">
			<view class="btn-card" @click="toUrl(5)">
				<image :src="xxpx" class="btn-icon"></image>
				<view class="btn-text">
					<text class="chinese">学习培训</text>
					<text class="english">Learning and training</text>
				</view>
			</view>
			<view class="btn-card" @click="toUrl(1)">
				<image :src="ptfk" class="btn-icon"></image>
				<view class="btn-text">
					<text class="chinese">普通访客</text>
					<text class="english">Ordinary visitor</text>
				</view>
			</view>
			<view class="btn-card" @click="toUrl(3)">
				<image :src="wlsj" class="btn-icon"></image>
				<view class="btn-text">
					<text class="chinese">物流司机</text>
					<text class="english">Logistics driver</text>
				</view>
			</view>
			<view class="btn-card" @click="toUrl(2)">
				<image :src="sgry" class="btn-icon"></image>
				<view class="btn-text">
					<text class="chinese">施工人员</text>
					<text class="english">Construction worker</text>
				</view>
			</view>
		</view>
		<view class="section-title admin-section">
			<view class="title-text">
				<text class="chinese">迈柯唯管理员</text>
				<text class="english">Administrator</text>
			</view>
		</view>
		<view class="admin-btn-container">
			<view class="admin-btn" @click="toUrl(4)">
				<view class="admin-icon">
					<image :src="gly" class="admin-icon-img"></image>
				</view>
				<view class="admin-text">
					<text class="chinese">迈柯唯管理员</text>
					<text class="english">Administrator</text>
				</view>
				<view class="arrow">
					<text>></text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				ptfk: require('../../static/img/ptfk.png'),
				wlsj: require('../../static/img/wlsj.png'),
				sgry: require('../../static/img/sgry.png'),
				xxpx: require('../../static/img/xxpx.png'),
				// bdgl: require('../../static/img/bdgl.png'),
				gly: require('../../static/img/gly.png'),
				logoIndex: require('../../static/img/logo-index.png'),
				winHeight: 0,
				statusBarHeight: 0,
				isBd:""
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			this.winHeight = systemInfo.screenHeight - systemInfo.statusBarHeight * 2-20;
		
		},
		onShow(){
			this.isBd = uni.getStorageSync("userInfo_BD_token").token
			console.log("bd",this.isBd)
		},
		methods: {
			toUrl(type) {
				let url = ""
				switch (type) {
					case 1:
						url = "/pages/visit/addrecord?type=1"
						break;
					case 2:
						url = "/pages/visit/addrecord?type=2"
						break;
					case 3:
						url = "/pages/visit/addrecord?type=3"
						break;
					case 0:
						url = "/pages/visit/visithistory"
						break;
					case 5:
						url = "/pages/visit/tostudy"
						break;
					case 4:
						if(!this.util.isNull(this.isBd)){
							url = "/pages/bd/mine"
						}else{
							url = "/pages/index/login"
						}
						
						break;
				}
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style scoped>
	.containers {
		background-color: #fff;
		background-image: url('../../static/img/bg.png');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		padding: 0 40rpx 20px;
		position: relative;
	}

	.header-area {
		height: 300rpx;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	
	.logo-container {
		position: absolute;
		top: 80rpx;
		right: 40rpx;
		z-index: 10;
	}
	
	.logo {
		width: 160rpx;
		height: 160rpx;
	}
	
	.visit-record {
		position: absolute;
		bottom: 115rpx;
		left: 40rpx;
	}
	
	.visit-text {
		display: flex;
		flex-direction: column;
		line-height: 1.5;
	}
	
	.visit-text text:first-child {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: normal;
		letter-spacing: 2rpx;
	}
	
	.visit-text .english {
		color: #cccccc;
		font-size: 20rpx;
		font-weight: normal;
		letter-spacing: 2rpx;
	}
	
	
	.bdfk {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 4%;
		position: relative;
		margin-top: 2%;
	}

	.btn-card {
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		padding: 4%;
		box-sizing: border-box;
		aspect-ratio: 1.5;
	}
	
	.btn-icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
		flex-shrink: 0;
	}
	
	.btn-text {
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 1.1;
		flex-shrink: 0;
	}
	
	.btn-text .chinese {
		color: #182849;
		font-size: 32rpx;
		font-weight: normal;
		margin-bottom: 4rpx;
	}
	
	.btn-text .english {
		color: #999999;
		font-size: 20rpx;
		font-weight: normal;
	}
	
	.section-title {
		position: relative;
		padding: 16% 0 2% 0;
	}
	
	.admin-section {
		padding: 6% 0 2% 0;
	}
	
	.title-text {
		display: flex;
		flex-direction: column;
		line-height: 1.3;
	}
	
	.title-text .chinese {
		color: #182849;
		font-size: 28rpx;
		font-weight: normal;
		margin-bottom: 2rpx;
	}
	
	.title-text .english {
		color: #999999;
		font-size: 20rpx;
		font-weight: normal;
	}
	
	.admin-btn-container {
		position: relative;
		padding: 2% 0;
	}
	
	.admin-btn {
		width: calc(100% - 10rpx) !important;
		height: 104px !important;
		background-color: #ffffff !important;
		border-radius: 20rpx !important;
		position: relative !important;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1) !important;
		margin: 0 5rpx !important;
	}
	
	.admin-icon {
		width: 60rpx !important;
		height: 60rpx !important;
		position: absolute !important;
		left: 110rpx !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	
	.admin-icon-img {
		width: 60rpx;
		height: 60rpx;
	}
	
	.admin-text {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		line-height: 1.3 !important;
	}
	
	.admin-text .chinese {
		color: #182849;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 4rpx;
	}
	
	.admin-text .english {
		color: #999999;
		font-size: 24rpx;
		font-weight: normal;
	}
	
	.arrow {
		position: absolute !important;
		right: 110rpx !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		color: #999999 !important;
		font-size: 40rpx !important;
		font-weight: normal !important;
	}
	
	.sgry view {
		margin-top: 40rpx
	}
</style>
