<!--
 * @Author: euzhi
 * @Description: 扫码绑定
-->
<template>
<view class="appCotent">
    <view class="scan">
        <view class="contentMoveCar">
            <view class="car_item__one">
                <view class="item__content">
					<view class="">
						您的专属二维码编号
					</view>
					{{moveCode}}
                </view>
            </view>
            <view class="car_item__three">
				<view class="">
					感谢您使用挪车二维码。 
				</view>
                <view style="">
					请完成<text>车辆信息</text>与<text>联系方式</text>的填写以便享受挪车服务。
				</view>
            </view>
        </view>
        <view class="car_info">
			<!-- <view class="select-car" @click="getCarList">
				请选择爱车  &gt;
			</view> -->
			<view class="info_list" style="padding:20rpx 0;">
				<view class="left">
					品牌车型：
				</view>
				<view class="right info" style="width:500rpx;" v-if="carInfo" @click="getCarList">
					<image :src="carInfo.logoUrl" mode=""></image>
					<view>
						<view>
							{{carInfo.brand + "-" + carInfo.seriesName}}
						</view>	
						{{carInfo.carModel}}
					</view>
					<image class="gt" src="@/static/move-car/move-car-code1.png">
				</view> 
				<view class="right" style="width:500rpx;" v-else @click="getCarList">
					<text style="margin-right:10rpx;color:#999;">请选择</text> 
					<image class="gt" src="@/static/move-car/move-car-code1.png">
				</view>
			</view>
			<!-- <view class="info_list">
				<view class="left">
					车型
				</view>
				<view class="right">
					{{carInfo.carModel}}
				</view>
			</view> -->
			<view class="info_list" style="padding:10rpx 0;">
				<view class="left">
					车牌号：
				</view>
				<view class="right" style="width:500rpx;">
					<!-- {{carInfo.carNo || ""}} -->
					<car-number class="car__input" v-model="model1.carNo"></car-number>
				</view>
			</view>
        </view>
		
		<view class="form-data">
			<view class="form-item">
				<view class="item-text">
					手机号：
				</view>
				<view class="item-input">
					<input type="number" placeholder="请输入手机号" v-model="model1.userMobile">
				</view>
			</view>
			<view class="form-item">
				<view class="item-text">
					验证码：
				</view>
				<view class="item-input flex align-center">
					<input type="number" placeholder="请输入" v-model="model1.verificationCode">
					<view class="code" style="color: #105DE9;" v-if="!smsbtn.status" @click="sendCode">
						{{smsbtn.text}}
					</view>
					<view class="code" v-else>
						{{smsbtn.text}}({{smsbtn.codeTime+'s'}})
					</view>
				</view>
			</view>
		</view>
		
        <view class="view__btn view__no__bind" @click="confirmBinding">
            绑定车辆
        </view>
        <!-- <view class="use__text" @click="gotoExplanation">使用说明</view> -->
		<view class="use__text" @click="goArticle(2)">挪车牌使用安全说明</view>
        
        <u-gap bgColor="transparent" v-if="carouselFlag" height="20"></u-gap>
        <view v-if="carouselFlag" style="width: 700rpx;margin: 0 auto;position: relative;">
            <u-swiper radius="12rpx" :height="120" :list="list5" circular @change="e => current = e.current"
                :autoplay="true" keyName="imageUrl" @click="goOtherLink">
            </u-swiper>
            
            <view style="position: absolute;right: 10rpx; top:10rpx;z-index: 99999;">
                <u--image src="/static/my/close.png" width="12px" height="12px" @click="closeCarouselFlag"></u--image>
            </view>
        </view>
		
		<!-- 爱车选择弹框 -->
		<u-popup :show="selectCar" mode="bottom" round="10" @close="selectCar = false">
			<view class="love_car_list">
				<view class="love_title">
					选择车辆
					<text @click.stop="selectCar = false">x</text>
				</view>
				<view class="love_list">
					<view v-if="carList.length != 0">
						<view class="love_item" v-for="(item,i) in carList" :key="i" @click="radioChange(item)">
							<image :src="item.logoUrl"></image>
							<view class="love_info">
								<view>
									{{item.brand + "-" + item.seriesName}}
								</view>
								<view>
									{{item.carModel}}
								</view>
							</view>
							<view class="radio">
								<image src="../../../static/move-car/radio-active.png" v-if="item.id === radioValue"></image>
								<image src="../../../static/move-car/radio.png" v-else></image>
							</view>
						</view>
					</view>
					<view style="padding-top:140rpx;text-align: center;" v-else>
						暂时没有车辆，请添加！
					</view>
				</view>
				<view class="love_btn">
					<button type="primary" @click="addCar">
						<image src="@/static/move-car/love-car5.png">添加车辆
					</button>
				</view>
			</view>
		</u-popup>
    </view>
</view>
</template>

<script>
import CarNumber from "@/common/codecook-carnumber/codecook-carnumber.vue";
import CryptoJS from "crypto-js";

export default {
    components: {
        CarNumber,
    },
    data() {
        return {
            model1: {
				moveCode:"",
                carNo:"",
				userMobile:"",
				verificationCode:"",
				carId:""
            },
			carInfo: null,
            //挪车码
            moveCode: '',
            //绑定挪车码信息
            moveCodeInfo: null,
            //选择车辆id
            carId: '',
			carList:[],
			checked:false,
			selectCar:false,
			radioValue:"",
			smsbtn:{
				text:'发送验证码',
				status:false,
				codeTime:60
			}, // 验证码
			clickStatus:false, // 节流
			key:null, // 加密key
			iv:null,  // 加密iv
            list5: [],
            current: 0,
            carouselFlag:false,
        }
    },
    methods: {
        closeCarouselFlag() {
            this.carouselFlag = false
        },
        // 轮播跳转其他页面
        goOtherLink(index) {
        	let item = this.list5[index]
        	this.$goToLocation(item)
        },
        getRotationList() {
        	let opts = {
        		url: '/app/index/adv/3',
        		method: 'get'
        	};
        	this.http.httpTokenRequest(opts, {}).then(res => {
        		if (res.data.code == 200 && res.data.data && res.data.data.length > 0) {
        			let data = []
        			data = res.data.data
        			let imgList = []
        			data.forEach(e => {
        				imgList.push(e)
        			})
        			this.list5 = imgList
                    this.carouselFlag = true
        		}
        	})
        },
		changeBtn() {
		    this.checked = !this.checked;
		},
        // 跳转到使用说明页面
        gotoExplanation() {
           uni.navigateTo({
               url: '/pagesD/pages/personal/instructions'
           }); 
        },
        goLoveCar() {
            uni.navigateTo({
                url: '/pagesB/pages/move-car/loveCar?price=1'
            });
        },
		// 选择爱车
		radioChange(item){
			this.carInfo = item
			this.radioValue = item.id
			this.selectCar = false
			this.model1.carNo = item.carNo
			this.model1.carId = item.id
		},
		// 获取爱车列表
		getCarList(){
			this.$http.request({
				url:'/app/vehicleAdmin/list',
				method:'get',
				data:{},
				isFactory:false,
			}).then(res => {
				this.carList = res.data || []
				this.selectCar = true
			})
		},
		// 添加车辆
		addCar() {
			this.selectCar = false
			uni.navigateTo({
				url: '/pages/transitionPage'
			});
		},
		// 发送验证码
		sendCode(){
			if(this.model1.userMobile.length == 0){
				uni.showToast({
				    title: "联系方式不能为空!",
				    icon: "none",
				});
				return;
			}
			let regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
			if (!regMobile.test(this.model1.userMobile)) {
				uni.showToast({
					icon: 'none',
					title: '请先填写正确的手机号'
				});
				return;
			}
			this.$http.request({
				url:'/app/smsCode/binding',
				method:'post',
				data:{
					phone: this.model1.userMobile
				},
				isFactory:false,
			}).then(res => {
				if (res.statusCode == 200) {
					uni.showToast({
						title: "别着急！短信已经发送了~",
						icon: 'none',
						duration: 1500
					});
					if(this.clickStatus == false){
						this.clickStatus = true
						let timer = setInterval(() => {
							if (this.smsbtn.codeTime > 0) {
								this.smsbtn.status = true
								this.smsbtn.text = "已发送";
								this.smsbtn.codeTime--;
							} else if (this.smsbtn.codeTime <= 0) {
								this.smsbtn.codeTime = 60;
								this.smsbtn.text = "重新获取";
								this.smsbtn.status = false
								this.clickStatus = false
								clearInterval(timer);
							}
						}, 1000);
					}
				}
			})
		},
        confirmBinding() {
			if(!this.carInfo){
				uni.showToast({
				    title: "请选择绑定的爱车!",
				    icon: "none",
				});
				return;
			}
			if(this.model1.userMobile.length == 0){
				uni.showToast({
				    title: "联系方式不能为空!",
				    icon: "none",
				});
				return;
			}
			if(this.model1.verificationCode.length == 0){
				uni.showToast({
				    title: "验证码不能为空!",
				    icon: "none",
				});
				return;
			}
			this.$http.request({
				url:'/app/moveCode/bind',
				method:'put',
				data:this.model1,
				isFactory:false,
			}).then(res => {
				if (res.data.code == 200) {
					//展示绑定成功
					uni.showToast({
					    title: "绑定成功",
					    icon: "success",
					});
					setTimeout(()=>{
						uni.navigateTo({
						    url: '/pagesB/pages/move-car/myMoveCar'
						})
					},500)
				} else if(res.data.code == 1000000002){
					uni.showToast({
						title: res.data.msg,
						icon: "none",
					});
					this.setAES(this.moveCode,this.key)
				}  else {
					//绑定失败，展示失败信息
					uni.hideLoading()
					uni.showToast({
						title: res.data.msg,
						icon: "none",
					});
				}
			})
        },
		// 跳转协议政策页面
		goArticle(index) {
			let url="";
			if (index == 1) {
				url = "/app/user/registerAgreement"
			} else {
				url = "/app/user/ofPrivacy"
			}
			this.$http.request({
				url:url,
				method:'get',
				data:{},
				isFactory:false,
			}).then(res => {
				if (res.data.code == 200) {
					let data = res.data.msg
					uni.setStorageSync("articelContent", data)
					uni.navigateTo({
						url: '/pages/binding/article'
					});
				}else {
					uni.showToast({
						title: res.data.msg,
						icon: "none",
					});
				}
			})
		},
		// 获取加密key
		getKey(){
			this.$http.request({
				url:'/app/user/c/i',
				method:'get',
				data:{},
				isFactory:false,
			}).then(res => {
				if (res.data.code == 200) {
					let data = res.data.data || {}
					try{
						let str = data.s3//.padStart(8,0)
						let ivs = data.s3
						let str2 = data.l1
						if(str2.length == 4){
							let str3 = str2.substring(0,2)
							let str4 = str2.substring(2,4)
							this.key = str.substring(str3,str4)
							let str5;
							if(ivs.length > 8){
								str5 = ivs.substring(ivs.length-8,ivs.length)
								this.iv = String(str2 + str5)//.padStart(16,0)
								while(this.iv.length<16){
									let num = ''
									num+='0'
									this.iv = num + this.iv;
								}
							}else{
								// str5 = ivs//.padStart(8,0)
								while(ivs.length<8){
									let num = ''
									num += '0'
									ivs = num + ivs;
								}
								if(ivs.length == 8){									
									this.iv = String(str2 + ivs)//.padStart(16,0)
									while(this.iv.length<16){
										let num2 = ''
										num2 += '0'
										this.iv = num2 + this.iv;
									}
								}
							}
							this.setAES(this.moveCode,this.key) 
						}
					}catch(err){
						
					}
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none",
					});
				}
			})
		},
		// 加密
		setAES(str,keys) {
			// const data = CryptoJS.enc.Utf8.parse(str);
			const key = CryptoJS.enc.Utf8.parse(keys);
			const iv = CryptoJS.enc.Utf8.parse(this.iv);
			var option = {
				iv: iv,
				mode: CryptoJS.mode['CBC'],//看需求变“CBC”
				padding: CryptoJS.pad['Pkcs7']//看需求变“ZeroPadding”
			};
			var encrypted = CryptoJS.AES.encrypt(str, key, option);
			const words = encrypted.ciphertext.toString();
			// console.log(words,'加密后222222')
			this.model1.moveCode = words 
		},
    },
    onLoad(option) {
		this.moveCode = option.moveCode
		this.getKey()
        this.getRotationList()
    }
}
</script>

<style lang="scss" scoped>
.scan {
    /deep/ .form-container .line .input {
        text-align: right !important;
        padding-right: 30rpx;
    }

    .use__text {
        text-align: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        text-decoration: underline;
        color: #3A86F7;
    }
	
	.add__user {
	    font-size: 28rpx;
	    font-family: PingFang SC;
	    font-weight: 500;
	    color: #999999;
	    padding-left: 40rpx;
	    margin-bottom: 20rpx;
	
	    span {
	        color: rgba(58, 134, 247, 1);
	        padding: 0 5rpx;
	    }
	}

    .view__btn {
        width: 670rpx;
        height: 86rpx;
        text-align: center;
        line-height: 70rpx;
        margin: 50rpx auto 0;
        font-size: 32rpx;
    }

    .view__no__bind {
        background: url('@/static/move-car/love-car4.png') no-repeat;
        margin-bottom: 30rpx;
        background-size: 100% 100%;
        color: rgba(255, 255, 255, 1);
    }

    /deep/ .p-l14 {
        padding-left: 0 !important;
    }

    .u-checkbox-group {
        display: inline-block !important;
    }

    /deep/.u-checkbox-group--row {
        display: inline-block !important;
    }

    .contentMoveCar {
		background-color: #fff;
        padding:40rpx 40rpx 10rpx;

        .item__label {
            font-size: 34rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 42rpx;
        }

        .item__label__one {
            padding-right: 34rpx;
        }

        .item__content {
            width: 500rpx;
			padding:15rpx 0;
            font-size: 40rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #105DE9;
            text-align: center;
            // background: url(@/static/move-car/move-car-code5.png) no-repeat;
            // background-size: 100% 100%;
			border: 2rpx solid #BFE2FF;
			border-radius:10rpx;
			letter-spacing:6rpx;
			view{
				font-size: 30rpx;
				font-weight: 500;
				margin-bottom:6rpx;
				letter-spacing:0;
			}
        }

        .car_item__one {
            display: flex;
            align-items: center;
            margin-bottom: 30rpx;
            justify-content: center;
        }

        .car_item__three {
            margin-top: 40rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #F88D28;
            line-height: 36rpx;
            // text-indent: 2em;
			text-align: center;
            box-sizing: border-box;
            padding:16rpx 30rpx 26rpx;
            background:#FEF4E9;
			border-radius:10rpx;
			text{
				font-size: 28rpx;
				font-weight: bold;
			}
        }
    }

	
	// 已绑定车辆信息
	.car_info{
		background: #FFFFFF;
		background-color: #fff;
		padding:0 40rpx;
		position: relative;
		top:-6rpx;
		.select-car{
			line-height:80rpx;
			text-align: right;
			font-size: 28rpx;
			color: #E1251B;
		}
		.info_list{
			line-height:90rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// border-bottom:2rpx solid rgba(0,0,0,.1);
			
			.left{
				font-size: 32rpx;
			}
			.right{
				font-size: 28rpx;
				color: #666;
				line-height: 1.8;
				word-wrap:break-word;
				text-align: right;
				&.info{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					text-align: left;
					// padding:20rpx 0;
					image{
						max-width:48rpx;height: 48rpx;
					}
					>view{
						margin:0 10rpx;
						line-height: 1.5;
						>view{
							font-weight:bold;
							font-size: 32rpx;
							color: #333;
						}
					}
				}
				.car__input{
				    width: 100%;
				}
				.gt{
					max-width:16rpx !important;height:20rpx !important;
				}
			}
		}	
		.car_btn{
			width: 400rpx;
			line-height: 76rpx;
			background: #FFFFFF;
			border: 2rpx solid #DDDDDD;
			border-radius: 10rpx;
			text-align: center;
			margin:30rpx auto 0;
			font-size: 32rpx;
			color: #666;
		}
	}
	
	.no-car-info{
		width:100%;
		background-color: #fff;
		text-align: center;
		padding:30rpx 0;
		.title{
			font-size:28rpx;
			color: #666;
		}
		image{
			width:130rpx;height:130rpx;
			margin:40rpx 0 20rpx;
		}
		.content{
			font-size:28rpx;
		}
		.no-car-btn{
			width:480rpx;
			font-size:32rpx;
			color: #E1251B;
			text-align: center;
			line-height:80rpx;
			border-radius:50rpx;
			border: 2rpx solid #F4B1AD;
			margin:30rpx auto 0;
		}
	}
	
	.form-data{
		position: relative;
		top:-6rpx;
		background-color: #fff;
		margin-bottom:40rpx;
		box-sizing: border-box;
		padding:0 40rpx;
		.form-item{
			height:100rpx;
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			&:first-child{
				border-bottom:2rpx solid rgba(0,0,0,.1);
			}
			.item-text{
				font-size: 32rpx;
			}
			.item-input{
				font-size: 28rpx;
				text-align: right;
				color: #333;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.code{
					height:50rpx;
					line-height:50rpx;
					font-size: 26rpx;
					padding-left:20rpx;
					border-left: 2rpx solid rgba(0,0,0,.1);
					margin-left:20rpx;
					color: #BBBBBB;
				}
			}
			.car-num{
				width:500rpx;
			}
		}
	}
	
	// 爱车列表
	.love_car_list{
		padding:30rpx 40rpx;
		.love_title{
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom:30rpx;
			position: relative;
			text{
				position: absolute;
				right:20rpx;
				top:-4rpx;
				font-size:40rpx;
				font-weight:500;
				color: #666;
			}
		}
		.love_list{
			height:400rpx;
			overflow: auto;
			.love_item{
				padding:20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 2rpx solid #E8E8E8;
				&:first-child{
					border:none;
				}
				image{
					width:100rpx;height:100rpx;
				}
				.love_info{
					width:450rpx;
					>view{
						&:first-child{
							font-size:34rpx;
							font-weight: bold;
							margin-bottom:10rpx;
						}
						&:last-child{
							font-size: 28rpx;
							color:#666;
						}
					}
				}
				.radio{
					width:60rpx;
					>image{
						width:48rpx;height:48rpx;
					}
				}
			}
		}
		.love_btn{
			padding:50rpx;
			button {
				height:80rpx;
				line-height:80rpx;
				border-radius:50rpx;
				// background: linear-gradient(150deg, #E1251B, #E14A1B);
				background: linear-gradient(-36deg, #1C81E8, #1CA2E8);
				box-shadow:2rpx 4rpx 6rpx 0 rgba(20, 68, 225, 0.29);
				// box-shadow: 0 6rpx 13rpx 2rpx rgba(225, 50, 27, 0.17);
				border:0;
				font-size:32rpx !important;
				>image{
					width:30rpx;height:30rpx;
					margin-right:10rpx;
					position: relative;
					top:4rpx;
				}
			}
		}
	}
}
</style>
