<template>
	<view class="app">
		<view class="address" v-for="(item,index) in goodPatient" :key="index">
			<view class="addressinfo">
				<view class="item">
					{{item.receiveName}},{{item.receivePhone}}
				</view>
				<view class="item detail">
					{{item.receiveAddress}}
				</view>
				<view class="update">
					<view class="up ups" @tap='updata(item)'>
						修改
					</view>
					<view class="up" @tap='del(item)'>
						删除
					</view>

					<!-- 	<u-modal width="50%" v-model="delshow" style='background-color: rgba(118, 118, 118, 0.6);'
						@confirm='delconfirm' :content="content" show-cancel-button>
					</u-modal> -->
				</view>
			</view>
		</view>

		<view class="ADDress" @tap='add()'>
			<image src="../../static/add.png" mode=""></image>
			<span class="ADDtext">
				添加收货地址
			</span>
		</view>

		<!-- 弹框 -->

		<u-popup v-model="show" mode="center" width="80%" height="50%" border-radius="30">
			<view class="payment">
				添加收货地址
				<view class="cencel" @tap="cencel()">
					<image src="../../static/gb.png" mode=""></image>
				</view>
				<view class="addinfos">
					<u-field v-model="list.receiveName" label="收货人" placeholder="姓名" class="items">
					</u-field>
					<u-field v-model="list.receivePhone" label="手机号" placeholder="电话" class="items">
					</u-field>
					<view class="area">
						<u-field v-model="list.areaCode" label="地区" placeholder="请选择" class="items">
						</u-field>
						<image src="../../static/jiantou.png" mode=""></image>
					</view>

					<u-field v-model="list.receiveAddress" label-width="170" label="详细地址" placeholder="如街道、门牌号、小区等"
						class="items">
					</u-field>
				</view>
				<view class="save" @tap='submit()'>
					保存
				</view>
				<u-toast ref="uToast" />
			</view>

		</u-popup>
	</view>
</template>

<script>
	import {
		goodPatientInfo,
		addnursingStation,
		delnursingStation,
		nursingStationGoodsinfo,
		updatenursingStation,
	} from '@/api/modifyAddress/modifyAddress.js';
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				isedit: true, //标识
				delshow: false, //删除弹框
				content: '确认要删除信息吗？',
				show: false, //弹框
				list: {
					receiveName: '',
					receivePhone: '',
					receiveAddress: '',
					areaCode: '',
					patientId: 2,

				},
				goodPatient: [], // 查询地址信息
				patientId: 2,
				// delId: '',


			}
		},
		onLoad(options) {
			//获取传值
			this.goodsList()
		},
		methods: {
			// 查询地址信息
			goodsList() {
				goodPatientInfo(this.patientId).then(res => {
					this.goodPatient = res.data
					console.log(this.goodPatient)
				})
			},
			// 保存按钮
			submit() {
				let that=this  
				if (that.isedit == true) {
					addnursingStation(that.list).then(res => {
						if (res.code == 200) {
						that.$refs.uToast.show({
							title: '新增成功',
							duration: 20000000
						});
						that.show = false;
						// console.log(res)
						that.goodsList()
						that.list = {}
						}
					})
				} else {
					updatenursingStation(that.list).then(res => {
						uni.showToast({
							title: '修改成功',
							duration: 2000
						});
						that.show = false;
						// console.log(res)
						that.goodsList()
						// this.list = {}

					})
				}


			},
			// 修改按钮
			updata(item) {
				this.isedit = false
				nursingStationGoodsinfo(item.id).then(res => {
					console.log(item)
					this.list = res.data
					this.show = true
				})


			},
			// 新增
			add() {
				this.isedit = true
				this.show = true
			},
			// delconfirm() {
			// 	// console.log(1111)
			// 	delnursingStation(this.delId).then(res => {
			// 		if (res.code == 200) {
			// 			this.$refs.uToast.show({
			// 				title: '删除成功',
			// 				type: 'success',
			// 				duration: 2000
			// 			})
			// 			this.delshow = false;
			// 			console.log(res)
			// 			this.goodsList()
			// 		}
			// 	})
			// },
			// 删除
			del(item) {
				let that=this   
				uni.showModal({
					title: '提示',
					content: '确认要删除信息吗',
					success: function(res) {
						if (res.confirm) {
							delnursingStation(item.id).then(res => {
							
									uni.showToast({
										title: '删除成功',
										duration: 2000,
										
									});
									console.log(111),
									that.delshow = false;
									 that.goodsList()	
									// console.log(this)
									
								

							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
		
				// this.delId = item.id
				// this.delshow = true
			},
			// 取消
			cencel() {
				this.show = false
				this.list = {}
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .u-mask {
		background-color: rgba(118, 118, 118, 0.6);
	}

	.app {
		padding: 4%;

		.address {
			/* position: absolute; */
			width: 99%;
			height: 270rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 20rpx;
			margin: 0 auto;
			margin-bottom: 20rpx;

			.item {
				width: 90%;
				height: 101rpx;
				font-size: 36rpx;
				color: #000000;
				line-height: 101rpx;
				margin: 0 auto;
			}

			.detail {
				border-bottom: 5rpx solid #F4F5F7;
				margin-top: -20rpx;
			}

			.update {
				display: flex;
				margin: 18rpx 18rpx 18rpx 432rpx;
			}

			.up {

				width: 114rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #FFFFFF;
				border: 1rpx solid #969394;
				border-radius: 26px;
				font-size: 31rpx;
				color: #969394;
			}

			.ups {
				margin-right: 30rpx;
			}
		}

		.ADDress {
			width: 80%;
			height: 80rpx;
			line-height: 80rpx;
			background: #4C7BC9;
			border-radius: 26rpx;
			font-size: 34rpx;
			color: #FFFFFF;
			text-align: center;
			position: fixed;
			bottom: 5rpx;
			left: 10%;

			image {
				width: 41rpx;
				height: 41rpx;
				vertical-align: middle
			}

			.ADDtext {
				padding-left: 10rpx;
			}
		}

		// 弹框支付
		.payment {
			width: 90%;
			height: 110rpx;
			font-size: 36rpx;
			color: #000000;
			line-height: 110rpx;
			text-align: center;
			margin: 0 auto;
			border-bottom: 1rpx solid #D8D4D4;

			image {
				width: 31rpx;
				height: 31rpx;
				float: right;
				margin: -60rpx 20rpx 0 0;
			}

			.save {
				width: 226rpx;
				border-radius: 26px;
				height: 71rpx;
				line-height: 71rpx;
				background: #4C7BC9;
				border-radius: 26rpx;
				text-align: center;
				font-size: 34rpx;
				color: #FFFFFF;
				margin: 0 auto;
				margin-top: 10%;
			}
		}

		.area {
			image {
				width: 18rpx;
				height: 26rpx;
			}

		}

		.items {
			font-size: 32rpx;
			color: #030001;
			line-height: 40rpx;
		}

	}
</style>
