<template>
	<view class="container">
		<Container>
			<template #main>
				<view class="card">
					<!-- 身份证图标区域 -->
					<view class="id-card">
					</view>
					<!-- 提示文字 -->
					<text class="tip">请刷身份证取号</text>
					<input v-model="inputVal" placeholder="请输入内容" confirm-type="done" @confirm="goRoute" />
				</view>
			</template>
		</Container>
	</view>
</template>

<script>
	import Container from '@/components/container/container.vue'
	export default {
		name: 'SelfServiceMachine',
		components: {
			Container
		},
		data() {
			return {
				inputVal: '',
				currentTime: ''
			}
		},
		mounted() {
			this.updateTime()
			setInterval(() => {
				this.updateTime()
			}, 1000)
			// APP端强制横屏
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('landscape-primary')
			// #endif
		},
		methods: {
			updateTime() {
				const now = new Date()
				const year = now.getFullYear()
				const month = String(now.getMonth() + 1).padStart(2, '0')
				const day = String(now.getDate()).padStart(2, '0')
				const hours = String(now.getHours()).padStart(2, '0')
				const minutes = String(now.getMinutes()).padStart(2, '0')
				const seconds = String(now.getSeconds()).padStart(2, '0')
				this.currentTime = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`
			},
			goRoute() {
				uni.navigateTo({
					url: `/pages/home/ticket?idcard=${this.inputVal}`
				})
			}
		}
	}
</script>

<style scoped>
	/* 中间卡片 - 百分比宽高 */
	.card {
		background: #ffffff;
		width: 1200px;
		height: 740px;
		border-radius: 2.5%;
		box-shadow: 0 1vh 3vh rgba(0, 123, 255, 0.15);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 身份证卡片 */
	.id-card {
		width: 511px;
		height: 307px;
		background: url('../../static/images/home/idcard_bg.png');
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		padding: 0 5%;
		margin-bottom: 5%;
		box-sizing: border-box;
	}


	/* 提示文字 */
	.tip {
		font-size: 5vh;
		color: #222;
		font-weight: 500;
		letter-spacing: 0.2vh;
	}

	::v-deep .uni-input-wrapper {
		width: 800rpx;
		border: 2rpx solid #ccc;
	}
</style>
