<!--
 * @Author: euzhi
 * @Description: 编辑地址
-->
<template>
<view class="appCotent">
<div class="editAddress">
    <u-gap bgColor="transparent" height="20"></u-gap>

    <div class="car_info">
        <u--form labelPosition="left" :model="model1" :rules="rules" ref="form1" labelWidth="100">
            <u-form-item label="收货人:" prop="addressInfo.userName" borderBottom ref="item1">
                <u--input v-model="model1.addressInfo.userName" placeholder="请填写收货人姓名" border="none"></u--input>
            </u-form-item>
            <u-form-item label="手机号码:" prop="addressInfo.telNumber" borderBottom ref="item1">
                <u--input v-model="model1.addressInfo.telNumber" placeholder="请填写收货人手机号码" border="none"></u--input>
            </u-form-item>
            <u-form-item label="收货地址:" prop="addressInfo.address" borderBottom ref="item1">
                <u--input v-model="model1.addressInfo.address"  placeholder="点击选择收货地址" border="none"></u--input>
                <span class="app__gps">
                    <image src="@/static/my/gps.png" >
                </span>
                <span class="app__right">
                    <image src="@/static/my/my6.png" >
                </span>
            </u-form-item>
            <u-form-item label="楼号门牌:" prop="addressInfo.detailInfo" borderBottom ref="item1">
                <u--input v-model="model1.addressInfo.detailInfo" placeholder="例如  2栋3单元101室" border="none"></u--input>
            </u-form-item>
            <u-form-item label="设置默认地址:" prop="addressInfo.defaultFlag" ref="item1">
                <u-switch class="del__address" v-model="model1.addressInfo.defaultFlag" activeColor="#5ac725" @change="change"></u-switch>
            </u-form-item>

        </u--form>
    </div>
    <div class="add__tips">为保证您的商品准确送达，请填写正确的地址！</div>
    <div class="love__btn" @click="editAddress">
        保存地址
    </div>
    <div class="view__btn view__back" @click="del">
        删除该地址
    </div>
</div>
</view>
</template>

<script>
export default {
    data() {
        return {
            carNumber: "",
            model1: {
                addressInfo: {},
                value: false,
            },
            rules: {
                "addressInfo.userName": {
                    type: "string",
                    required: true,
                    message: "收货人不能为空",
                    trigger: ["blur", "change"],
                },
            	"addressInfo.telNumber": {
            	    type: "string",
            	    required: true,
            	    message: "手机号不能为空",
            	    trigger: ["blur", "change"],
            	},
            	"addressInfo.address": {
            	    type: "string",
            	    required: true,
            	    message: "收货地址不能为空",
            	    trigger: ["blur", "change"],
            	},
            	"addressInfo.detailInfo": {
            	    type: "string",
            	    required: true,
            	    message: "门牌号不能为空",
            	    trigger: ["blur", "change"],
            	},
            },
			//收货地址id
			id: '',
        };
    },
    methods: {
		goBack() {
		    uni.navigateBack({
		        delta: 1
		    })
		},
        del(){
            uni.showModal({
                title: '提示',
                content: '确定删除该地址吗？',
                success: (res) => {
                    if (res.confirm) {
                        //提示删除成功
						let opts = { url: '/app/user/address/' + this.id, method: 'delete' };
						this.http.httpTokenRequest(opts, {}).then(res => {
							if (res.data.code == 200) {
								uni.showToast({
									title: '删除成功',
									icon: 'success',
									duration: 2000
								});
								this.goBack()
							}
						})
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },
		getAddress(){
			let opts = { url: '/app/user/address/info/' + this.id, method: 'get' };
			this.http.httpTokenRequest(opts, {}).then(res => {
				if (res.data.code == 200) {
					this.model1.addressInfo = res.data.data
				}
			})
		},
		editAddress(){
			this.$refs.form1.validate().then(res => {
				let opts = { url: '/app/user/address', method: 'put' };
				this.http.httpTokenRequest(opts, this.model1.addressInfo).then(res => {
					if (res.data.code == 200) {
						//添加成功
						uni.$u.toast('修改成功')
						this.goBack()
					}
				})
			}).catch(errors => {
				uni.$u.toast('请正确填写信息')
			})
		},
    },
	onLoad(option) {
	  this.id = option.id
	},
	onShow(){
	  this.getAddress()
	},
	
};
</script>

<style lang="scss" scoped>
.editAddress {
    .app__gps{
        image{
            width: 34rpx;
            height: 36rpx;
        }
    }
    .app__right{
        padding-left: 20rpx;
        padding-bottom: 10rpx;
        image{
            width: 11rpx;
            height: 18rpx;
        }
    }
    .love__btn {
        height: 76rpx;
        background: url('@/static/move-car/love-car4.png') no-repeat;
        background-size: contain;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 76rpx;
        text-align: center;
        width: 670rpx;
        margin: 0 auto;
        margin-top: 40rpx;
        margin-bottom: 30rpx;
        image {
            width: 30rpx;
            height: 30rpx;
            margin-right: 20rpx;

        }
    }

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

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

    .add__tips {
        padding-left: 40rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #E1251B;
        line-height: 42px;
    }

    width: 100%;
    height: 100%;

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

        /deep/ .u-form-item__body__right__content__slot {
            justify-content: flex-end;
        }
    }

}
</style>
