<!--
 * @Author: euzhi
 * @Description: 新增车辆
-->
<template>
<view class="appCotent">
    <div class="editCar">
        <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="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><span>KM</span>
                        </div>
                    </u-form-item>
                    <u-form-item label="车牌号" prop="carInfo.carNo" ref="item1"> </u-form-item>
                    <car-number v-if="model1.carInfo.carNo" v-model="model1.carInfo.carNo"></car-number>
                    <car-number v-else v-model="model1.carInfo.carNo"></car-number>
                </u--form>
            </div>
        </div>
		
		<div class="add__user">
		    <u-checkbox-group placement="row">
		        <u-checkbox :checked='checked' @change="changeBtn"></u-checkbox>
		    </u-checkbox-group>
		    请先阅读并同意<span @click="goArticle">《京东汽车挪车牌隐私权政策》</span>
		</div>

        <div class="add__btn add__no__bind" @click="editCarInfo">
            保存
        </div>
        <div class="add__btn add__back" @click="delModal">
            删除
        </div>
        <u-modal :show="deleteShow" :title="deleteTitle" :content='deleteContent' @confirm="confirmModal" @cancel="cancelModal" showCancelButton="true"></u-modal>
    </div>
</view>
</template>

<script>
import CarNumber from "@/common/codecook-carnumber/codecook-carnumber.vue";
export default {
    components: {
        CarNumber,
    },
    data() {
        return {
            //车辆id
            id: '',
            model1: {
                carInfo: {
                    carNo: '',
                },
            },
            deleteShow: false,
            deleteTitle: '删除车辆',
            deleteContent: '确定删除车辆？',
            rules: {
                "carInfo.brand": {
                    type: "string",
                    required: false,
                    message: "请填写品牌",
                    trigger: ["blur", "change"],
                },
                "carInfo.carModel": {
                    type: "string",
                    required: false,
                    message: "请填写车型",
                    trigger: ["blur", "change"],
                },
                "carInfo.mileage": {
                    type: "number",
                    required: false,
                    message: "请填写正确的里程数",
                    trigger: ["blur", "change"],
                },
                "carInfo.carNo": [{
                        min: 7,
                        max: 8,
                        message: '车牌长度在7-8个字符之间'
                    },

                    {
                        type: "string",
                        required: true,
                        message: "请填写车牌号",
                        trigger: ["blur", "change"],
                    },
                ]
            },
            items: [],
			checked:false
        };
    },
    methods: {
		changeBtn() {
		    this.checked = !this.checked;
		},
        goBack() {
            uni.navigateBack({
                delta: 1
            })
        },
        getCarInfo() {
            let opts = {
                url: '/app/vehicleAdmin/' + this.id,
                method: 'get'
            };
            this.http.httpTokenRequest(opts, {}).then(res => {
                if (res.data.code == 200) {
                    this.$nextTick(() => {
                        this.model1.carInfo = res.data.data;
                        this.model1.carInfo.carNo = res.data.data.carNo;
                        this.$set(this.model1.carInfo, 'carNo', res.data.data.carNo);
                    });

                }
            })
        },
        editCarInfo() {
            this.$refs.form1.validate().then(res => {
				if (!this.checked) {
				    uni.showToast({
				        title: "请同意京东汽车挪车牌隐私权政策",
				        icon: 'none',
				        duration: 2000,
				    });
				    return
				}
                let opts = {
                    url: '/app/vehicleAdmin/edit',
                    method: 'put'
                };
                this.http.httpTokenRequest(opts, this.model1.carInfo).then(res => {
                    if (res.data.code == 200) {
                        //添加成功
                        uni.$u.toast('修改成功')
                        this.goBack()
                    }
                })
            }).catch(errors => {
                uni.$u.toast('校验失败')
            })
        },
        //确认删除车辆
        confirmModal() {
            let opts = {
                url: '/app/vehicleAdmin/remove/' + this.id,
                method: 'delete'
            };
            this.http.httpTokenRequest(opts, {}).then(res => {
                if (res.data.code == 200) {
                    uni.showToast({
                        title: '删除成功',
                        icon: "success",
                    });
                    this.goBack()
                } else {
                    uni.showToast({
                        title: res.data.msg,
                        icon: "error",
                    });
                }
            })
            this.deleteShow = false
        },
        cancelModal() {
            this.deleteShow = false
        },
        delModal() {
            this.deleteShow = true
        },
		// 跳转协议政策页面
		goArticle(){
			let opts = { url: '/app/user/ofPrivacy', method: 'get' };
			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.id = option.id
    },
    onReady() {
        // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
        this.$refs.form1.setRules(this.rules)
    },
    onShow() {
        this.getCarInfo()
    },
}
</script>

<style lang="scss" scoped>
.editCar {
    padding: 40rpx 0rpx;

    /deep/ .u-input__content__field-wrapper__field {
        text-align: right !important;
        justify-content: space-evenly;
    }

    .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__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__btn {
        width: 670rpx;
        height: 76rpx;
        text-align: center;
        line-height: 76rpx;
        margin: 0 auto;
        font-size: 32rpx;
    }

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

    .add__back {
        background: url('@/static/move-car/move-car-view1.png') no-repeat;
        background-size: contain;
        color: rgba(153, 153, 153, 1);
    }
}
</style>
