<!--
 * @Author: euzhi
 * @Description: 领取优惠卷
-->
<template>
<view class="appCotent">
	<view class="get_price">
		<view class="content__code">
			<view class="code__img">
				<image :src="freeCode.mainImgUrl" class="code__img"></image>
			</view>
			<view class="code__money">
				<view class="money__title">
					<text>{{freeCode.title}}</text>
				</view>
				<view class="code__tips" style="margin:6rpx 0 20rpx;">
					<text>{{freeCode.spec}}</text>
				</view>
				<view class="money__num">
					<text class="num__one">￥0.00</text>
				</view>
			</view>
		</view>
		<!--  未绑定车辆信息 -->
		<view class="no_car_info" v-if="!carInfoState">
			<view class="no_title">
				添加绑定车辆信息
			</view>
			<view class="no_content">
				暂无任何车辆信息
			</view>
			<view class="no_btn" @click="selectCar = true">
				从爱车选择
			</view>
		</view>
		
		<!-- 已绑定车辆信息 -->
		<view class="car_info" v-else>
			<view class="info_list">
				<view class="left">
					品牌
				</view>
				<view class="right">
					{{carInfo.brand}}
				</view>
			</view>
			<view class="info_list">
				<view class="left">
					车型
				</view>
				<view class="right">
					{{carInfo.carModel}}
				</view>
			</view>
			<view class="info_list">
				<view class="left">
					车牌号
				</view>
				<view class="right">
					{{carInfo.carNo}}
				</view>
			</view>
			<view class="info_list">
				<view class="left">
					行驶里程
				</view>
				<view class="right">
					{{carInfo.mileage || 0}}KM
				</view>
			</view>
			
			<view class="car_btn" @click="selectCar = true">
				从爱车选择
			</view>
		</view>
		
		<view class="bind_car_btn" @click="getCarCode">
			绑定车辆
		</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">
					<radio-group @change="radioChange">
						<view class="love_item" v-for="(item,i) in carList" :key="i">
							<image src="@/static/move-car/love-car6.png"></image>
							<view class="love_info">
								<view>
									{{item.brand}}
								</view>
								<view>
									{{item.carModel}}
								</view>
							</view>
							<view class="radio">
								<radio :value="i" :checked="i === radioValue " color="#3A86F7"/>
							</view>
						</view>
					</radio-group>
				</view>
				<view class="love_btn">
					<u-button type="primary" icon="plus"  text="添加车辆" @click="addCar"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</view>
</template>

<script>
import CarNumber from "@/common/codecook-carnumber/codecook-carnumber.vue";
import util from '@/pages/login/util.js';
export default {
    components: {
        CarNumber,
    },
    data() {
        return {
			carInfoState:false,
            carId: '',
            //免费挪车码
            freeCode: {},
			selectCar:false, //爱车选择弹框
			carList:[]  ,// 爱车列表
			carInfo:{}, // 车辆信息
			radioValue:null
        };
    },
    methods: {
		radioChange(e) {
			let index = e.detail.value
			this.radioValue = index
			this.carInfo = this.carList[index];
			this.selectCar = false
			this.carInfoState = true
		},
		// 获取爱车列表
        getCarList(){
			uni.showLoading({
				title: '加载中'
			});
        	let opts = { url: '/app/vehicleAdmin/list', method: 'get' };
        	this.http.httpTokenRequest(opts, {}).then(res => {
        		if (res.statusCode == 200) {
					uni.hideLoading()
        			this.carList = res.data
        		}
        	})
        },
		// 调到领取优惠券页面
        getCarCode() {
            //跳转到获取挪车码页面
			if (!this.carInfoState) {
				uni.showToast({
					title: "请选择车辆信息！",
					icon: 'none',
					duration: 2000,
				});
				return
			}
			// let opts = {
			// 	url: '/app/vehicleAdmin/add',
			// 	method: 'post'
			// };
			// this.http.httpTokenRequest(opts, this.model1.carInfo).then(res => {
			// 	if (res.data.code == 200) {

			// 	}
			// })
			uni.showToast({
				title: "绑定成功！",
				icon: 'none',
			});
			setTimeout(()=>{
				uni.navigateTo({
					url: '/pagesA/pages/index/getCoupon'
				});
			},500)
			
        },
        getCarInfo() {
            const that = this
            if (that.carId) {
                let opts = {
                    url: '/app/vehicleAdmin/' + this.carId,
                    method: 'get'
                };
                that.http.httpTokenRequest(opts, {}).then(res => {
                    if (res.data.code == 200) {
                        that.$nextTick(() => {
                            that.model1.carInfo = res.data.data;
                            that.model1.carInfo.carNo = res.data.data.carNo;
                            that.$set(that.model1.carInfo, 'carNo', res.data.data.carNo);
                        })
                    }
                })
            }

        },
        getMoveCode() {
            let opts = {
                url: '/app/index/free/code',
                method: 'get'
            };
            this.http.httpRequest(opts, {}).then(res => {
                if (res.data.code == 200) {
                    this.freeCode = res.data.data
                }
            })
        },
		addCar() {
			this.selectCar = false
			let url = "car.m.jd.com/h5/list.html?source=managerprocedure"
			util.redirectToH5({page:url})
		},
    },
    onReady() {
        // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
        // this.$refs.form1.setRules(this.rules)
    },
    onShow() {
        this.$nextTick(() => {
            // this.getCarInfo()
            this.getMoveCode()
			this.getCarList()
        })

    },
    onLoad(e) {
        this.orderId = e.orderId
    },
};
</script>

<style lang="scss" scoped>
.get_price{
	padding:40rpx;
	.content__code {
	    padding: 28rpx;
	    box-sizing: border-box;
	    width: 100%;
	    height: 216rpx;
	    background: #fff;
	    box-shadow: 0rpx 0rpx 28rpx 2rpx rgba(232, 232, 232, 0.16);
	    border-radius: 20rpx;
	    display: flex;
	    align-items: center;
	    position: relative;
	
	    .code__img {
	        width: 160rpx;
	        height: 160rpx;
	        background: #3699ff;
	        border-radius: 10rpx;
	    }
	
	    .code__money {
	        margin: 0 20rpx;
	
	        .money__title {
	            font-size: 32rpx;
	            font-family: PingFang SC;
	            font-weight: bold;
	            color: #333333;
	            line-height: 42rpx;
	        }
			.code__tips {
			    font-size: 26rpx;
			    font-family: PingFang SC;
			    font-weight: 500;
			    color: #666666;
			    line-height: 42rpx;
			}
	
	        .money__num {
	            .num__one {
	                font-size: 26rpx;
	                font-family: PingFang SC;
	                font-weight: 500;
	                color: #e1251b;
	                line-height: 42rpx;
	            }
	
	            .num__two {
	                font-size: 22rpx;
	                font-family: PingFang SC;
	                font-weight: 500;
	                color: #999999;
	                line-height: 42rpx;
	            }
	        }
	    }
	
	    .code__get {
	        position: absolute;
	        right: -45rpx;
	        width: 90rpx;
	        height: 90rpx;
	        font-size: 28rpx;
	        font-family: PingFang SC;
	        font-weight: 500;
	        color: #ffffff;
	        padding-top: 10rpx;
	        box-sizing: border-box;
	        text-align: center;
	        background: url("@/static/index/index26.png") no-repeat;
	        background-size: contain;
	    }
	}
	// 未绑定车辆信息
	.no_car_info{
		width:100%;height: 358rpx;
		background: #FFFFFF;
		box-shadow: 0 0 28rpx 2rpx rgba(232, 232, 232, 0.16);
		border-radius: 20rpx;
		background-color: #fff;
		text-align: center;
		margin-top:30rpx;
		padding:30rpx 0;
		.no_title{
			font-size: 36rpx;
		}
		.no_content{
			font-size: 30rpx;
			color:#666;
			margin:80rpx 0 100rpx;
		}
		.no_btn{
			width: 400rpx;height: 76rpx;
			line-height:72rpx;
			background: linear-gradient(180deg, #E1251B, #E15C1B);
			box-shadow: 0 6rpx 13rpx 2rpx rgba(225, 50, 27, 0.17), 2rpx -5rpx 8rpx 0 rgba(225, 41, 27, 0.46);
			border-radius: 10rpx;
			margin:0 auto;
			color: #fff;
		}
	}
	// 已绑定车辆信息
	.car_info{
		background: #FFFFFF;
		box-shadow: 0 0 28rpx 2rpx rgba(232, 232, 232, 0.16);
		border-radius: 20rpx;
		background-color: #fff;
		margin-top:30rpx;
		padding:0 30rpx 30rpx;
		.info_list{
			line-height:90rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom:2rpx solid #ccc;
			&:nth-child(4){
				border:none;
			}
			.left{
				font-size: 32rpx;
			}
			.right{
				font-size: 28rpx;
				color: #666;
			}
		}	
		.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;
		}
	}
	
	.bind_car_btn{
		width:100%;
		line-height:80rpx;
		margin:60rpx auto 0;
		text-align: center;
		color:#fff;
		font-size: 32rpx;
		border-radius:50rpx;
		background: linear-gradient(to right, #E2241B , #E14A1B);
	}
	
	// 爱车列表
	.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;
				}
			}
		}
		.love_btn{
			padding:50rpx;
			/deep/ .u-button {
				border-radius:50rpx;
				background: linear-gradient(150deg, #E1251B, #E14A1B);
				box-shadow: 0 6rpx 13rpx 2rpx rgba(225, 50, 27, 0.17);
				border:0;
			}
			/deep/ .u-button__text{
				font-size:32rpx !important;
			}
		}
	}
}
</style>
