<!--
 * @Author: euzhi
 * @Description: 新增车辆
-->
<template>
<view class="appCotent">
<div class="addCar">
    <div class="add__content">
        <div class="add__title">
            填写车辆信息
        </div>
        <div>
            <u--form labelPosition="left" :model="model1" :rules="rules" 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="item1">
                    <u--input v-model="model1.carInfo.carModel" placeholder="请输入" border="none"></u--input>
                </u-form-item>
                <u-form-item label="行驶里程" prop="carInfo.mileage" borderBottom ref="item1">
                  <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>
    </div>
    <div class="add__user">
        <u-checkbox-group placement="row">
            <u-checkbox v-model="checked"></u-checkbox>
        </u-checkbox-group>
        勾选同意<span>《用户服务协议》</span>
    </div>
    <div class="add__btn add__no__bind" @click="addCarInfo()">
        完成
    </div>
</div>
</view>
</template>

<script>
import CarNumber from "@/common/codecook-carnumber/codecook-carnumber.vue";
export default {
    components: {
        CarNumber,
    },
    data() {
        return {
            checked:false,
            model1: {
                carInfo: {
                    brand: '',
                },
            },
            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"],
            	},
            },
            items: [{
                    title: "挪车码编号",
                    value: "NC683723293239"
                },
                {
                    title: "车牌号",
                    value: "京A123456"
                },
                {
                    title: "品牌",
                    value: "宝马"
                },
                {
                    title: "车型",
                    value: "SUV"
                }, {
                    title: "绑定手机号",
                    value: "156****9633"
                }
            ]
        };
    },
    methods: {
        goBack() {
            uni.navigateBack({
                delta: 1
            })
        },
		addCarInfo(){
			//表单验证
			this.$refs.form1.validate().then(res => {
				let opts = { url: '/app/vehicleAdmin/add', method: 'post' };
				this.http.httpTokenRequest(opts, this.model1.carInfo).then(res => {
					if (res.data.code == 200) {
						//添加成功
						uni.$u.toast('添加成功')
						this.goBack()
					}
				})
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		},
    },
	onReady() {
		// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
		this.$refs.form1.setRules(this.rules)
	},
}
</script>

<style lang="scss" scoped>
.addCar {
    padding: 40rpx 0rpx;
  /deep/.u-input__content__field-wrapper__field{
        text-align: right !important;
        padding-right: 30rpx;
    }

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

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

    .add__content {
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
        border-radius: 20rpx;
        padding: 40rpx;

        .add__title {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
            margin-bottom: 20rpx;
        }
    }

    .add__btn {
        width: 670rpx;
        height: 76rpx;
        text-align: center;
        line-height: 76rpx;
        margin: 0 auto;
        font-size: 32rpx;
    }

    .add__user {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        padding-left: 40rpx;
        margin-top: 30rpx;
        margin-bottom: 60rpx;

        span {
            color: rgba(58, 134, 247, 1);
            padding: 0 5rpx;
        }
    }

    .add__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);
    }
}
</style>
