<template>
	<view class="page">
		<u-navbar title="车牌开锁" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar" :custom-back="btnfh">
		</u-navbar>
		<view class="title">
			车牌号开锁
		</view>
		<view class="shuom">
			请输入车牌车牌号
		</view>
        <view class="img">
        	<image src="https://api.ccttiot.com/smartmeter/img/static/uX29DoZzt2iTzWzASa8v" mode=""></image>
        </view>
		<view class="shuru">
			<input type="text" v-model="sn" placeholder="请输入车牌号"/>
		</view>
		<view class="anniu" @click="btnkaisuo">
			确认开锁
		</view>
		<view class="logotc" v-if="logoflag">
			<view class="imgbox">
				<view class="ts">
					温馨提示
				</view>
				<view class="cont">
					您当前未登录，是否登录？
				</view>
				<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					style="margin-top: 30rpx;">
					快捷登录
				</button>
				<view class="zb" @click="logoflag = false">
					暂不登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "",
				},
                sn:'',
				areaId:'',
				logoflag:false
			}
		},
		onLoad(option) {
			console.log(option);
			if(option.q){
				function getQueryParam(url, paramName) {
					let regex = new RegExp(`[?&]${paramName}=([^&]*)`)
					let results = regex.exec(url)
					return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
				}
				let sceneValue = option.q
				let decodedValue = decodeURIComponent(sceneValue)
				this.areaId = getQueryParam(decodedValue, 'i')
				console.log(this.areaId,'ararar');
			}else if(option.areaId){
				this.areaId = option.areaId
			}
		},
		methods: {
			btnfh(){
				uni.reLaunch({
					url:'/pages/nearbystores/index'
				})
			},
			getlogo(){
				let taht = this
				wx.login({
					success(res) {
						if (res.code) {
							let data = {
								loginCode: res.code,
								appId:taht.$store.state.appid
							}
							taht.$u.post('/wxLogin', data).then(res => {
			                    if (res.code == 200) {
									uni.setStorageSync('token', res.token)
									taht.getinfo()
								}else{
									taht.getinfo()
								}
							})
						}
					},
				})
			},
			// 获取个人信息
			getinfo(){
				this.$u.get("/getInfo").then(res => {
					if(res.code == 200){
						uni.setStorageSync('user',res.user)
					}else if(res.code == 401){
						this.logoflag = true
					}
				})
			},
			// 点击进行登录
			getPhoneNumber(e) {
				let that = this
				const wxLoginAsync = () => {
					return new Promise((resolve, reject) => {
						wx.login({
							success(res) {
								if (res.code) {
									let data = {
										jscode: res.code,
										mobileCode: e.detail.code,
									};
									resolve(data)
								} else {
									reject(res.errMsg)
								}
							},
							fail(err) {
								reject(err)
							}
						})
					})
				}
				wxLoginAsync().then(async (data) => {
					let datas = {
						mobileCode: data.mobileCode,
						loginCode: data.jscode,
						appId: this.$store.state.appid
					}
					this.$u.post("/wxLogin", datas).then((res) => {
						if (res.code == 200) {
							wx.setStorageSync('token', res.token);
							this.logoflag = false
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				})
			},
            // 确认开锁
			btnkaisuo(){
				this.$u.get("/app/orderDevice/mineUsing").then(res =>{
					if(res.code == 200){
						if(res.data && res.data.length > 0){
							uni.switchTab({
								url:'/pages/nearbystores/index'
							})
						}else{
							this.$u.get("/app/device/availableDetail?vehicleNum=" + this.sn + '&areaId=' + this.areaId).then((res) => {
								if (res.code == 200) {
									if(res.data){
										console.log(res,'resres');
										uni.navigateTo({
											url:'/page_fenbao/storedlist/trueorder?modelId=' + res.data.modelId + '&sn=' + res.data.sn
										})
									}else{
										uni.showToast({
											title:'当前车辆不可用',
											icon: 'none',
											duration:2000
										})
									}
								}else if(res.code == 401){
										uni.showModal({
											title: '提示',
											content: '您当前未登录，是否前去登录？',
											showCancel: true,
											success: function (res) {
												if (res.confirm) {
													uni.reLaunch({
														url:'/pages/login/login'
													})
												} else if (res.cancel) {
													
												}
											}
										})
								} else{
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration:2000
									})
								}
							})
						}
					}else if(res.code == 401){
						uni.showModal({
							title: '提示',
							content: '您当前未登录，是否前去登录？',
							showCancel: true,
							success: function (res) {
								if (res.confirm) {
									uni.reLaunch({
										url:'/pages/login/login'
									})
								} else if (res.cancel) {
									
								}
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.logotc {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .3);
	
		.button {
			margin-top: 200rpx;
			width: 586rpx;
			height: 90rpx;
			background: #4C97E7;
			border-radius: 54rpx 54rpx 54rpx 54rpx;
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
		}
	
		.imgbox {
			.ts{
				font-size: 36rpx;
				font-weight: 600;
				width: 100%;
				text-align: center;
			}
			.cont{
				font-size: 26rpx;
				margin-top: 30rpx;
			}
			.zb{
				margin-top: 30rpx;
				color: #ccc;
				font-size: 32rpx;
			}
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 35%;
			border-radius: 20rpx;
			padding:40rpx 20rpx;
			box-sizing: barcode;
			text-align: center;
			width: 680rpx;
			z-index: 0;
			background-color: #fff;
		}
	}
	.anniu{
		width: 658rpx;
		height: 86rpx;
		background: #4297F3;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		margin: auto;
		margin-top: 82rpx;
		line-height: 86rpx;
	}
	.shuru{
		margin: auto;
		width: 658rpx;
		height: 80rpx;
		background: #F3F3F3;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid rgba(187,187,187,0.5);
		text-align: center;
		margin-top: 48rpx;
		input{
			width: 658rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
		}
	}
	.img{
		width: 658rpx;
		height: 224rpx;
		margin: auto;
		margin-top: 36rpx;
		image{
			width: 658rpx;
			height: 224rpx;
		}
	}
	.shuom{
		width: 100%;
		text-align: center;
		font-size: 36rpx;
		color: #3D3D3D;
		margin-top: 36rpx;
	}
    .title{
		width: 100%;
		text-align: center;
		font-weight: 600;
		font-size: 48rpx;
		color: #3D3D3D;
		margin-top: 48rpx;
	}
	
</style>