<template>
	<view class="containers">
		<topWindow></topWindow>
		<view class="invalidPhoto">
			<u-image src="/static/images/icon/invalidPhoto.png" width="400rpx" height="400rpx"></u-image>
		</view>
		<view class="flex-column">
			<view class="snCodeText">{{$t('hdk.QRCodeContent')}}:{{snCode}}</view>
			<!-- <view class="firstLine">
        当前SN码不存在
      </view>
      <view class="secondLine">
        请扫描正确的二维码
      </view> -->
			<view class="errorBar">
				<view class="errorIcon">
					<u-image width="44rpx" height="44rpx" src="/static/images/icon/warning.png"></u-image>
				</view>
				<view class="errorText">
					{{isSNCode(snCode)?error1:error2}}
				</view>
			</view>
		</view>
		<view class="rescan" @click="rescan">
			{{$t('hdk.Rescan')}}
		</view>
	</view>
</template>

<script>
	import topWindow from "@/pages/component/topWindow.vue"
	export default {
		components: {
			topWindow
		},
		props: {

		},
		data() {
			return {
				snCode: "",
				error1: this.$t('hdk.ErrorPrompt1'),
				error2: this.$t('hdk.ErrorPrompt2')
			}
		},
		computed: {

		},
		onLoad(data) {
			console.log("无效参数", data);
			this.snCode = data.snCode;
		},
		methods: {
			rescan() {
				uni.redirectTo({
					url: '/pages/product/scan'
				})
			},
			// 判断字符串是否为SN码格式
			isSNCode(str) {
				// SN码的正则表达式
				const snRegex = /^[a-zA-Z0-9]+$/;
				return snRegex.test(str);
			},
			// 判断字符串是否为其他非SN码格式
			isNonSNCode(str) {
				// 非SN码的正则表达式
				const nonSNRegex = /^[A-Za-z0-9]{6,}$/;
				return nonSNRegex.test(str);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.containers {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;

		.invalidPhoto {
			margin: 80rpx 0 0 0;
		}

		.flex-column {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			font-size: 28rpx;

			.snCodeText {
				margin: 20px 0 44px 0;
				color: #333333;
			}

			.firstLine {
				margin: 20px 0;
				color: #333333;
			}

			.secondLine {
				margin: 20px 0;
				color: #333333;
			}
		}

		.errorBar {
			width: 702px;
			height: 88px;
			padding: 2px;
			border-radius: 4px;
			background-color: #fef1f1;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.errorIcon {
				margin: 22px 20px;
			}

			.errorText {
				font-size: 28rpx;
				color: #6d727a;
			}
		}


		
	}
	//移动端样式
	@media screen and (max-width: 767px) {
		.rescan {
			width: 345px;
			height: 44px;
			margin: 25px 0 0 0;
			padding: 2px;
			background-color: #00aeaa;
			box-sizing: border-box;
			font-family: '苹方 中等', '苹方', sans-serif;
			color: #ffffff;
			text-align: center;
			line-height: 44px;
			font-size: 16px;
		}
	}
	
	//PC端样式
	@media screen and (min-width: 768px) {
		.rescan {
			width: 690px;
			height: 88px;
			margin: 50px 0 0 0;
			padding: 2px;
			background-color: #00aeaa;
			box-sizing: border-box;
			font-family: '苹方 中等', '苹方', sans-serif;
			color: #ffffff;
			text-align: center;
			line-height: 88px;
			font-size: 32px;
		}
	}
</style>