<!-- 挪车码领取活动页面 -->
<template>
    <view style="background-color: #5797D5;">
        <view>
            <image style="width: 750rpx;height: 600rpx;" src="http://jdnc-oss.uzosp.com/2023/01/10/9da1c3c2d8374436bdf2782982090980.jpg"></image>
        </view>
        <view style="position: relative;top:-65rpx;margin: 0 auto; width: 706rpx;height: 545.8rpx; display: flex; justify-content: center;align-items: center;
            background: url('http://jdnc-oss.uzosp.com/2023/02/14/153d2fa24e13437595da1cebf9f25657.png') no-repeat; background-size: 100% 100%;">
            <view style="margin-top: 35rpx; width: 550rpx; height: 410rpx;">
                <view class="car_info">
                    <!-- <view class="info_list" style="padding:20rpx 0;"> -->
                    <view class="info_list">
                        <view class="left" style="width: 170rpx;">
                            品牌车型:
                        </view>
                        <view class="right info" style="width:400rpx;" v-if="carInfo" @click="getCarList">
                            <image :src="carInfo.logoUrl" mode=""></image>
                            <view>
                                <view>
                                    {{carInfo.brand + "-" + carInfo.seriesName}}
                                </view>	
                                {{carInfo.carModel}}
                            </view>
                            <view class="gt">
                                <u-icon name="arrow-right" color="#fff"></u-icon>
                            </view>
                        </view> 
                        <view class="right" style="width:400rpx;" v-else @click="getCarList">
                            <u--text suffixIcon="arrow-right" align="right" size="28rpx" color="#fff" iconStyle="font-size: 28rpx;color:#fff;" text="请选择"></u--text>
                        </view>
                    </view>
                </view>
                <view>
                    <u--form labelPosition="left" errorType="toast" :labelStyle="{'fontSize': '30rpx', color : '#fff'}" labelWidth="200rpx" :model="actInfo" :rules="rules"  ref="form1">
                        <u-form-item label="图形验证:" prop="vc" v-if="inputCodeShow">
                            <u--input v-model="actInfo.vc" maxlength="20" fontSize="28rpx" color="#fff" placeholderStyle="color:rgba(255,225,255,.6)" placeholder="请输入" border="bottom" inputAlign="right" ></u--input>
                            <image slot="right" :src="captchaImg" style="width: 101px; height: 38px;margin-left: 20rpx;" @click="getCaptchaImage"></image>
                        </u-form-item>
                    </u--form>
                    <view style="margin-top: 38rpx;display: flex; justify-content: center;">
                        <view style="background: url('http://jdnc-oss.uzosp.com/2023/01/11/6ca8d901b4654bfaaeb6c43e64010b9e.png') no-repeat; background-size: 100% 100%; width: 481rpx; height: 120rpx;"
                            @click="submitAct">
                            <view style="display: flex;justify-content: center;align-items: center;height: 120rpx; width: 481rpx;position: relative; top:-6rpx;">
                                <text style="font-size: 38rpx;color:#BE2D2D;font-weight: bold;line-height: 42rpx;">立即购买</text>
                                <!-- <image src="@/static/act/arrow-right.png" style="width:18rpx;height:28rpx; margin-left: 20rpx;"></image> -->
                            </view>
                        </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>
        </view>
        
        <view style="margin: 0 auto; width: 704rpx;">
            <image style="width: 704rpx;height: 427.4rpx;" src="http://jdnc-oss.uzosp.com/2023/02/14/c96367c6ad1d4914a6a25af82dfcdcb9.png"></image>
        </view>
        <view style="margin: 59rpx auto 0 auto; width: 710rpx;">
            <image style="width: 710rpx;height: 865rpx;" src="http://jdnc-oss.uzosp.com/2023/01/10/e4a7db688c274e76921025b0675a420c.png"></image>
        </view>
        <view style="margin: 59rpx auto 0 auto; width: 708rpx;padding-bottom: 87rpx;">
            <image style="width: 708rpx;height: 1429rpx;" src="http://jdnc-oss.uzosp.com/2023/01/10/f4c2093310604cf983b50b87f9ca99a4.png"></image>
        </view>
        
        
    </view>
</template>

<script>
export default {
    data() {
        return {
            inputCodeShow:false,
            
            //选择车辆相关  begin
            selectCar:false,
            radioValue:"",
            //选择车辆id
            carId: '',
            carList:[],
            carInfo: null,
            //选择车辆相关  end
            
            //是否要显示图形验证码
            captcha : false,
            captchaImg : '',
            
            actInfo: {
                carId:'',
                vc:'',
                vi: '',
            },
            rules: {
                'carId': [{
                    type: 'string',
                    required: true,
                    message: '请选择品牌车型',
                    trigger: ['blur', 'change']
                }],
                'vc': [{
                    type: 'number',
                    required: true,
                    message: '请输入图形验证码',
                    trigger: ['blur', 'change']
                }],
            },
            appName: '京东挪车牌领取',
            
            configData : {},
        }
    },
    methods: {
        goToIndex() {
            uni.reLaunch({
                url: '/pages/main'
            })
        },
        goToLogin() {
            uni.setStorageSync('routerLogin', '/pagesA/pages/popAct/index')
            uni.setStorageSync('routerLoginPageType', 'switchTab')
            //跳转到登录页
            let returnPage = '/pages/main';
            let pageType = "reLaunch"
            uni.navigateTo({
                url: "/pages/login/index/index?returnPage=" + returnPage + '&pageType=' + pageType
            })
        },
        // 选择爱车
        radioChange(item){
        	this.carInfo = item
        	this.radioValue = item.id
        	this.selectCar = false
        	this.actInfo.carId = item.id
        },
        // 获取爱车列表
        getCarList(){
            let token = uni.getStorageSync('userToken')
            if(!token) {  
                this.goToLogin()
                return
            }
            
            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'
        	});
        },
        //活动检查信息
        getCaptchaImage() {
            let that = this
            that.$http.request({
            	url:'/app/pop/act/captchaImage',
            	method:'get',
            	data:{ },
            	load:false
            }).then(res => {
            	that.actInfo.vi = res.uuid
            	that.captchaImg = 'data:image/gif;base64,' + res.img
            })
        },
        //活动检查手机信息
        async checkCaptchaInfo() {
            let that = this
            await that.$http.request({
            	url:'/app/pop/act/c',
            	method:'get',
            	data:{ },
            	load:false
            }).then(res => {
                that.captcha = res.captcha
                that.configData = res.config
                //为true的时候加载图形验证码
                if(that.captcha) {
                    that.getCaptchaImage()
                    this.inputCodeShow = true 
                    this.actInfo.vc = null
                } else {
                    this.inputCodeShow = false
                }
            	
            })
        },
        toJdPage() {
            let item = this.configData
            this.$goToLocation(item)
        },
        //活动检查信息
        submitAct() {
            let that = this
           let token = uni.getStorageSync('userToken')
           if(!token) {  
               that.goToLogin()
               return
           }
            that.$refs.form1.validate().then(res => {
                let opts = {
                	url: '/app/pop/act',
                	method: 'post'
                }
                that.http.httpTokenRequest(opts, that.actInfo).then(res => {
                    let code = res.data.code
                	if (code == 200) {
                		
                        that.checkCaptchaInfo()
                        //跳转到京东主站
                        that.toJdPage()
                	}  else{
                		uni.$u.toast(res.data.msg)
                        that.checkCaptchaInfo()
                	}
                })
            }).catch(errors => {
                if(!that.actInfo.carId) {
                    uni.$u.toast('请选择品牌车型')
                    return
                }
                if(errors && errors.length > 0) {
                    uni.$u.toast(errors[0].message)
                }
            })
           
        },
        
    },
    onReady() {
        this.$refs.form1.setRules(this.rules)
    },
    onShareAppMessage(res) {
    	if (res.from === 'menu') {
    		return {
    			title: this.appName,
    			path: '/pages/main?returnPage=/pagesA/pages/popAct/index'
    		};
    	}
    },
    onShareTimeline(res){
        return {
            title: this.appName,
            path: '/pages/main?returnPage=/pagesA/pages/popAct/index'
        };
    },
    onLoad(option) {
        uni.setNavigationBarTitle({
        	title: this.appName,
        });
        let that = this
        let token = uni.getStorageSync('userToken')
        if(token) {
            that.checkCaptchaInfo()
        } 
    },
}
</script>

<style lang="scss" scoped>
    .u-popup-slot {
        width: 750rpx;
        height: 300rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    // 爱车列表
    .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;
    			}
    		}
    	}
    }
    
    // 已绑定车辆信息
    .car_info{
    	//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(255,225,255,.1);
    		
    		.left{
    			font-size: 30rpx;
                color:#fff;
    		}
    		.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{
    					
    					line-height: 1.5;
                        color: #fff;
                        font-size: 26rpx;
                        white-space: nowrap;overflow: hidden; text-overflow:ellipsis;
    					>view{
    						font-weight:bold;
    						font-size: 30rpx;
    						color: #fff;
                            white-space: nowrap;overflow: hidden; text-overflow:ellipsis;
    					}
    				}
    			}
    			.car__input{
    			    width: 100%;
    			}
    			.gt{
                    width: 45rpx !important;
    				// 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;
    	}
    }
</style>