<!--
 * @Author: euzhi
 * @Description: 扫码绑定
-->
<template>
<view class="appCotent">
    <div class="scan">
        <div class="contentMoveCar">
            <div class="car_item__one">
                <div class="item__content">
					{{moveCode}}
                </div>
            </div>
            <div class="car_item__three">
                感谢您使用挪车二维码，请完成车牌号与手机的绑定以便享受挪车服务
            </div>
        </div>
        <div class="moveCarMsg">
            <div class="scan__tips">
                <div>请填写以下信息</div>
                <div @click="goLoveCar">从爱车选择<span>
                        <image src="@/static/move-car/scan_right.png" /></span></div>
            </div>
            <div class="car__num__self">
                <div class="car__num">车牌号：</div>
                <car-number class="car__input" v-model="model1.carInfo.carNo"></car-number>
            </div>
            <active-form :formDate.sync="formData"></active-form>
			
			<div class="add__user">
			    <u-checkbox-group placement="row">
			        <u-checkbox :checked='checked' @change="changeBtn"></u-checkbox>
			    </u-checkbox-group>
			    请先阅读并同意<span @click="goArticle(2)">《京东挪车牌隐私权政策》</span>
			</div>
        </div>
        <div class="view__btn view__no__bind" @click="confirmBinding">
            确认绑定
        </div>
        <div class="use__text" @click="gotoExplanation">使用说明</div>
    </div>
</view>
</template>

<script>
import CarNumber from "@/common/codecook-carnumber/codecook-carnumber.vue";
export default {
    components: {
        CarNumber,
    },
    data() {
        return {
            model1: {
                carInfo: {},
            },
            formData: [
                // {
                //     id: "kjjns", //id必须唯一 可以是数字
                //     placeholder: "请输入",
                //     label: "车牌号", // 提示输入名
                //     type: "text", //类型
                //     rules: {
                //         name: "carNo", //字段名 即提交给后端的字段
                //         value: "",
                //         verify: false, //是否开启校验
                //         errMess: "车牌号未填写", //校验不通过的错误提示
                //     },
                // },
                // {
                //     id: "kjjns", //id必须唯一 可以是数字
                //     placeholder: "请输入",
                //     label: "品牌：", // 提示输入名
                //     type: "text", //类型
                //     rules: {
                //         name: "brand", //字段名 即提交给后端的字段
                //         value: "",
                //         verify: false, //是否开启校验
                //         errMess: "品牌未填写", //校验不通过的错误提示
                //     },
                // },
                // {
                //     id: "kjjns", //id必须唯一 可以是数字
                //     placeholder: "请输入",
                //     label: "车型：", // 提示输入名
                //     type: "text", //类型
                //     rules: {
                //         name: "carModel", //字段名 即提交给后端的字段
                //         value: "",
                //         verify: false, //是否开启校验
                //         errMess: "车型未填写", //校验不通过的错误提示
                //     },
                // },
                {
                    id: "kjjns", //id必须唯一 可以是数字
                    placeholder: "请输入",
                    label: "手机号：", // 提示输入名
                    type: "text", //类型
                    rules: {
                        name: "phone", //字段名 即提交给后端的字段userMobile
                        value: "",
                        verify: false, //是否开启校验
                        errMess: "手机号未填写", //校验不通过的错误提示
                    },
                },
                {
                    id: "uisdfjks",
                    placeholder: "请输入验证码",
                    label: "验证码：",
                    type: "text",
                    //   oneKeyPhone:true,
                    rules: {
                        name: "yzm",
                        value: "", //字段值
                        verify: false,
                        errMess: "验证码未填写",
                    },
                },
            ],
            //挪车码
            moveCode: '',
            //绑定挪车码信息
            moveCodeInfo: {},
            //选择车辆id
            carId: '',
			checked:false
        }
    },
    methods: {
		changeBtn() {
		    this.checked = !this.checked;
		},
        // 跳转到使用说明页面
        gotoExplanation() {
           uni.navigateTo({
               url: '/pagesD/pages/personal/help'
           }); 
        },
        goLoveCar() {
            uni.navigateTo({
                url: '/pagesB/pages/move-car/loveCar?price=1'
            });
        },
        confirmBinding() {
            for (let i in this.formData) {
                let name = this.formData[i].rules.name
                if (name == 'yzm') {
                    this.moveCodeInfo.verificationCode = this.formData[i].rules.value
                } else if (name == 'phone') {
                    this.moveCodeInfo.userMobile = this.formData[i].rules.value
                } else {
                    this.moveCodeInfo[name] = this.formData[i].rules.value
                }
            }
            this.moveCodeInfo.carId = this.model1.carInfo.carId
            this.moveCodeInfo.carNo = this.model1.carInfo.carNo
            this.moveCodeInfo.moveCode = this.moveCode
			if (!this.checked) {
			    uni.showToast({
			        title: "请同意京东挪车牌隐私权政策",
			        icon: 'none',
			        duration: 2000,
			    });
			    return
			}
            let opts = {
                url: '/app/moveCode/binding/',
                method: 'put'
            };
            this.http.httpTokenRequest(opts, this.moveCodeInfo).then(res => {
                if (res.data.code == 200) {
                    //展示绑定成功
                    uni.showToast({
                        title: "绑定成功",
                        icon: "success",
                    });
                    uni.navigateTo({
                        url: '/pagesB/pages/move-car/myMoveCar'
                    })
                } else {
                    //绑定失败，展示失败信息
                    uni.showToast({
                        title: res.data.msg,
                        icon: "error",
                    });
                }
            })
        },
        getCarInfo() {
            if (this.carId) {
                uni.showLoading({
                    title:"加载中"
                })
                let opts = {
                    url: '/app/vehicleAdmin/' + this.carId,
                    method: 'get'
                };
                this.http.httpTokenRequest(opts, {}).then(res => {
                    if (res.data.code == 200) {
                        this.model1.carInfo = res.data.data
                        uni.hideLoading()
                        this.formData.forEach(e => {
                            if (e.label == '品牌：') {
                                e.rules.value = this.model1.carInfo.brand
                            } else if (e.label == '车型：') {
                                e.rules.value = this.model1.carInfo.carModel
                            }
                        })
                    }
                })
            }
        },
		// 跳转协议政策页面
		goArticle(index) {
			let opts = {
				url: '',
				method: 'get'
			};
			if (index == 1) {
				opts.url = "/app/user/registerAgreement"
			} else {
				opts.url = "/app/user/ofPrivacy"
			}
			this.http.httpTokenRequest(opts, {}).then(res => {
				if (res.data.code == 200) {
					let data = res.data.msg
					uni.setStorageSync("articelContent", data)
					uni.navigateTo({
						url: '/pages/binding/article'
					});
				}
			})
		}
    },
    onLoad(option) {
		this.moveCode = option.moveCode
    },
    onShow:function(){
        this.getCarInfo()
        //console.log( this.$store.state.selectedCar);
    }
}
</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: 76rpx;
        text-align: center;
        line-height: 76rpx;
        margin: 0 auto;
        font-size: 32rpx;
    }

    .view__no__bind {
        background: url('@/static/move-car/move-car-view2.png') no-repeat;
        margin-bottom: 30rpx;
        background-size: contain;
        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 {

        padding: 40rpx;

        .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;
            font-size: 40rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #F1251B;
            line-height: 42rpx;
            text-align: center;
            line-height: 100rpx;
            height: 100rpx;
            background: url(@/static/move-car/move-car-code5.png) no-repeat;
            background-size: contain;
        }

        .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;
            padding: 30rpx;
            box-sizing: border-box;
            background: url(@/static/move-car/move-car-code6.png) no-repeat;
            background-size: contain;
        }
    }

    .moveCarMsg {
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
        border-radius: 20rpx;
        padding: 32rpx 40rpx;
        position: relative;
        top: -56rpx;

        .car__num__self {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .car__num {
                width: 160rpx;
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;
            }
            .car__input{
                width: 100%;
            }
        }

        .scan__tips {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 30rpx;

            >div:nth-of-type(1) {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;
            }

            >div:nth-of-type(2) {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #F88D28;

                span {
                    image {
                        width: 11rpx;
                        height: 18rpx;
                    }

                    margin-left: 10rpx;
                }
            }
        }
    }
}
</style>
