<!--
 * @Author: euzhi
 * @Description: 领取优惠卷
-->
<template>
<view class="appCotent">
    <div class="getPrice">
        <u-gap bgColor="transparent" height="30"></u-gap>
        <div class="content__code">
            <div class="code__img">
				<image :src="freeCode.mainImgUrl" class="code__img"></image>
			</div>
            <div class="code__money">
                <div class="money__title">
                    <text>{{freeCode.title}}</text>
                </div>
                <div class="code__tips">
                    <text>{{freeCode.spec}}</text>
                </div>
                <div class="money__num">
                    <text class="num__one">￥0.00</text>
                </div>
            </div>
        </div>
        <u-gap bgColor="transparent" height="30"></u-gap>
        <div class="car_info">
            <div class="car_info__title">填写车辆信息</div>
            <u--form labelPosition="left" :model="model1" ref="form1" labelWidth="100">
                <u-form-item label="品牌" prop="carInfo.brand" borderBottom ref="item1">
                    <u--input v-model="model1.carInfo.brand" placeholder="请输入" border="none"></u--input>
                </u-form-item>
                <u-form-item label="车型" prop="carInfo.carModel" borderBottom ref="item2">
                    <u--input v-model="model1.carInfo.carModel" placeholder="请输入" border="none"></u--input>
                </u-form-item>
                <u-form-item label="行驶里程" prop="carInfo.mileage" borderBottom ref="item3">
                  <div class="self__input__km">
                    <u--input v-model="model1.carInfo.mileage" placeholder="请输入" border="none"></u--input>KM
                  </div>
                </u-form-item>
                <u-form-item label="车牌号" prop="carInfo.carNo" ref="item1"> </u-form-item>
                <car-number v-model="model1.carInfo.carNo"></car-number>
            </u--form>
            <div class="select__car" @click="goLoveCar">
                从爱车选择 <image src="@/static/index/zhankai.png" alt="">
            </div>
        </div>
        <div class="price__bottom">
            <div class="price">
                <div class="price__num">
                    共<span>1</span>件
                </div>
                <div class="price__all">
                    合计<span>￥00.00</span>
                </div>
            </div>
            <div class="price__next" @click="getCarCode">
                下一步
            </div>
        </div>
        <div class="price__bottom">
            <div class="price">
                ￥0.00
            </div>
            <div class="price__next" @click="getCarCode">
                下一步
            </div>
        </div>
    </div>
</view>
</template>

<script>
import CarNumber from "@/common/codecook-carnumber/codecook-carnumber.vue";
export default {
    components: {
        CarNumber,
    },
    data() {
        return {
            carNumber: "",
            model1: {
                carInfo: {},
            },
            rules: {
                "carInfo.brand": {
                    type: "string",
                    required: true,
                    message: "请填写品牌",
                    trigger: ["blur", "change"],
                },
            	"carInfo.carModel": {
            	    type: "string",
            	    required: true,
            	    message: "请填写车型",
            	    trigger: ["blur", "change"],
            	},
            	"carInfo.carNo": {
            	    type: "string",
            	    required: true,
            	    message: "请填写车牌号",
            	    trigger: ["blur", "change"],
            	},
            },
			carId: '',
			//免费挪车码
			freeCode: {},
        };
    },
    watch: {
        carNumber(num) {
            console.log(num);
        },
    },
    methods: {
        goLoveCar(){
            uni.navigateTo({
                url: '/pagesB/pages/move-car/loveCar?price=1' 
            });   
        },
        getCarCode() {
            //跳转到获取挪车码页面
			this.$refs.form1.validate().then(res => {
				if(!this.model1.carInfo.id){
					let opts = { url: '/app/vehicleAdmin/add', method: 'post' };
					this.http.httpTokenRequest(opts, this.model1.carInfo).then(res => {
						if (res.data.code == 200) {
							
						}
					})
				}
				uni.navigateTo({
					url: '/pagesA/pages/index/getCarCode'
				});
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
            
        },
		getCarInfo(){
			if(this.carId){
				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
					}
				})
			}
			
		},
		getMoveCode(){
			let opts = { url: '/app/mall/free/code', method: 'get' };
			this.http.httpTokenRequest(opts, {}).then(res => {
				if (res.data.code == 200) {
					this.freeCode = res.data.data
				}
			})
		},
    },
	onReady() {
	  // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
	  this.$refs.form1.setRules(this.rules)
	},
	onShow() {
		this.getCarInfo()
		this.getMoveCode()
	},
	onLoad(e) {
	  this.orderId = e.orderId
	},
};
</script>

<style lang="scss" scoped>
.getPrice {
    width: 100%;
    height: 100%;

     /deep/.uni-input-input,
    .uni-input-placeholder {
        text-indent: 300rpx;
        text-align: right;
    }

    .self__input__km {
        display: flex;
        align-items: center;
    }

    .content__code {
        padding: 28rpx;
        box-sizing: border-box;
        width: 670rpx;
        height: 216rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        margin: 0 auto;
        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;
        }
    }

    .car_info {
        padding: 40rpx;
        background: #fff;

        .car_info__title {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
            line-height: 42rpx;
        }
    }

    .select__car {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #f1251b;
        text-align: right;
        margin-top: 40rpx;
		margin-bottom: 200rpx;
        image {
            width: 10rpx;
            height: 20rpx;
            margin-left: 10rpx;
        }
    }

    .price__bottom {
        width: 100%;
        height: 156rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 8rpx 19rpx 2rpx rgba(215, 215, 215, 0.21);
        border-radius: 20rpx 20rpx 0rpx 0rpx;
        position: fixed;
        bottom: 0;
        padding: 32rpx 40rpx;
        box-sizing: border-box;
        clear: both;

        .price {
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #E1251B;
        }

        .price__next {
            width: 240rpx;
            height: 98rpx;
            background: url('@/static/index/border-btn.png') no-repeat;
            background-size: contain;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            opacity: 0.96;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0;
            top: -10rpx;
        }
    }
}
</style>
