<template>
	<div class="content">
		<backindex :title="titlename"></backindex>
		<div class="verify-code-div" @click="codeInputFun">
			<ul class="verify-code-num-list">
				<li>
					<span>{{codeArr[0]}}</span>
					<span v-if="isFocus && !codeArr[0]" class="caret"></span>
				</li>
				<li>
					<span>{{codeArr[1]}}</span>
					<span v-if="isFocus && !codeArr[1] && codeArr[0]" class="caret"></span>
				</li>
				<li>
					<span>{{codeArr[2]}}</span>
					<span v-if="isFocus && !codeArr[2] && codeArr[0] && codeArr[1]" class="caret"></span>
				</li>
				<li>
					<span>{{codeArr[3]}}</span>
					<span v-if="isFocus && !codeArr[3] && codeArr[0] && codeArr[1] && codeArr[2]" class="caret"></span>
				</li>
				<li>
					<span>{{codeArr[4]}}</span>
					<span v-if="isFocus && !codeArr[4] && codeArr[0] && codeArr[1] && codeArr[2]&& codeArr[3]"
						class="caret"></span>
				</li>
				<li>
					<span>{{codeArr[5]}}</span>
					<span
						v-if="isFocus && !codeArr[5] && codeArr[0] && codeArr[1] && codeArr[2]&& codeArr[3] && codeArr[4]"
						class="caret"></span>
				</li>
			</ul>
			<input @focus="focus" @blur="blur" ref="codeInput" type="text" class="verify-code-input" unselectable="on"
				maxlength="6" v-model="code">
			<div style="color: #F6F6F6;text-align: center;font-size: .28rem;line-height: 200%;">
				<p>输入六位密钥，完成揽件</p>
				<p style="color:aqua">密钥揽件</p>
        <img src="../assets/user/sm.png" alt="" @click="wxScanCode()" style="height: 100px;">

			</div>
		</div>

	</div>
</template>



<script>
	import {
		Toast,
		Dialog
	} from 'vant'
	export default {
		name: 'verificatonCode',
		data() {
			return {
				titlename:'密钥',
				code: '',
				codeArr: [],
				isFocus: false
			}
		},
		watch: {
			code(newVal) {
        console.log("newVal" + newVal)
				this.codeArr = String(newVal).split("")

				//输入完秘钥判断
				if (newVal.length == 6) {
					this.$http.post(this.$store.state.host + "/solic/getExpressDetail", {
							collectKey: newVal,
							type: 3
						}, {
							emulateJSON: true
						})
						.then(res => {
							//发送成功
							if (res.body.msg == 'success') {
                console.log(res.body.expressInfo);
								if (res.body.expressInfo != undefined || res.body.expressInfo != null) {
									this.$router.push({path:'/Jjsearch',query:{expressNo:res.body.expressInfo.expressNo}})
								} else {
									Toast("查无此单!");
								}
							}

						}, res => {
							//发送失败
							Toast("网络错误!")
						})
				}

			}
		},
		methods: {
			focus() {
				this.isFocus = true
			},
			blur() {
				this.isFocus = false
			},
			codeInputFun() {
				this.$refs.codeInput.focus()
			},
      //微信扫码
      wxScanCode() {
      	let purl = /(Android)/i.test(navigator.userAgent) ? window.location.href.split('#')[0] : encodeURI(window.location.href.split('#')[0]);
      	let dataForm = {
      	    'url': purl
          }
      	//alert(url)
      	this.$http.post(this.$store.state.host + "/weixin/getWxConfig", {
      			url:window.location.href.split('#')[0]
      		}, {
      			emulateJSON: true
      		})
      		.then(res => {
      			//发送成功
      			var timestamp = res.body.wxConfig.timestamp;
      			var noncestr = res.body.wxConfig.nonceStr;
      			var signature = res.body.wxConfig.signature;
      			var appId = res.body.wxConfig.appId;
      			wx.config({
      				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      				//debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      				appId: appId, // 必填，公众号的唯一标识
      				timestamp: timestamp, // 必填，生成签名的时间戳
      				nonceStr: noncestr, // 必填，生成签名的随机串
      				signature: signature, // 必填，签名，见附录1
      				jsApiList: [
      					"scanQRCode",
      				] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      			});
      			wx.ready(()=> {
      				wx.scanQRCode({
      					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
      					success:(res)=> {
      						//alert(res)
      						var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果

                  // alert(JSON.stringify(result));
      						if(result.indexOf(",") != -1){
      							let result1 = res.resultStr.split(",");
      							result = result1[result1.length-1];

      						}

                  // alert(result);result=单号
                  //2023/03/22
                  // if (result != undefined || result != null) {
                  // 	this.$router.push({path:'/Jjsearch',query:{expressNo:result}})
                  // } else {
                  // 	Toast("查无此单!");
                  // }
                  //扫完码判断
                  if (result != undefined || result != null) {
                  	this.$http.post(this.$store.state.host + "/solic/getExpressInfo", {
                  			expressNo: result
                  		}, {
                  			emulateJSON: true
                  		})
                  		.then(res => {
                  			//发送成功
                  			if (res.body.msg == 'success') {
                          console.log(res.body.expressInfo);
                  				if (res.body.expressInfo != undefined || res.body.expressInfo != null) {
                  					this.$router.push({path:'/Jjsearch',query:{expressNo:result}})
                  				} else {
                  					Toast("查无此单!");
                  				}
                  			}

                  		}, res => {
                  			//发送失败
                  			Toast("网络错误!")
                  		})
                  }

      					},
      					error: function(res) {
      						console.log(res);
      					}
      				});

      			});
      		}, res => {
      			//发送失败
      			Toast("网络错误!")
      		})
      },
		}
	}
</script>

<style scoped lang="less">
	@keyframes shan {
		to {
			opacity: 0;
		}

		from {
			opacity: 1;
		}
	}

	.content {
		width: 100%;
		min-height: 100vh;
		background: rgba(0, 0, 0, 0.6);
	}

	.verify-code-div {
		width: 6.5rem;
		margin: auto;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: none;

		.verify-code-input {
			width: 100%;
			height: 1rem;
			border: none;
			outline: none;
			color: transparent;
			caret-color: transparent;
			background: none;
		}

		.verify-code-num-list {
			width: 100%;
			height: 1rem;

			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			text-align: center;

			&:after {
				content: "";
				display: block;
				clear: both;
			}

			li {
				background: #fff;
				float: left;
				width: 1rem;
				height: 1rem;
				text-align: center;
				line-height: 1rem;
				display: inline-block;
				//background: rgba(0, 0, 0, .05);
				border-radius: 10px;
				margin-right: .1rem;
				font-size: 20px;
				overflow: hidden;

				.caret {
					margin-top: .2rem;
					display: inline-block;
					min-width: 2px;
					max-width: 2px;
					width: 2px;
					height: .6rem;
					background: rgba(0, 0, 0, .4);
					animation: shan 0.8s infinite;
				}

				&:last-child {
					margin-right: 0px;
				}
			}
		}
	}
</style>
