<template>
	<view class="page">
		<view class="box">
			<view class="item" v-for="(item,index) in addresslist" :key="index" @click="selectaddress(item)">
				<view class="left">
					<view class="top">
						<text class="name">{{item.name}}</text>
						<text class="tel">{{item.phone}}</text>
					</view>
					<view class="address">{{item.province_name}}{{item.city_name}}{{item.county_name}}{{item.address}}</view>
				</view>
				<view class="flexone">
					<view class="delimg" @click.stop="deleteaddress(item)">
						<image src="../../static/del.png" mode=""></image>
					</view>
					<view class="right" @click.stop="editaddress(item)">
						<image src="../../static/edit.png" mode="widthFix" />
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="addaddress">新增收货地址</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				addresslist: [],
				showaddress: []
			}
		},
		onLoad() {

		},
		methods: {
			addaddress() {
				uni.navigateTo({
					url: "/pages/usercenter/addAddress"
				})
			},
			// 获取地址列表
			getaddresslist() {
				let that = this;

				var url = 'user_address/get_list';
				var params = {
					page: that.page,
					pageNum: 10

				}
				console.log(params)
				app.post(url, params, "post").then((res) => {
					console.log(res);
					this.addresslist = this.addresslist.concat(res.data.data);
					this.showaddress = res.data.data;
					console.log(that.addresslist)

				}).catch((err) => {
					console.log(err)

				})
			},
			// 删除地址
			deleteaddress(item){
				uni.showModal({
				    title: '提示',
				    content: '是否删除该地址',
				    success: function (res) {
				        if (res.confirm) {
							let that = this;
							
							var url = 'user_address/delete';
							var params = {
								user_address_id:item.id
							
							}
							console.log(params)
							app.post(url, params, "post").then((res) => {
								uni.showTotast({
									title:'删除成功',
									icon:'none'
								})
							
							}).catch((err) => {
								console.log(err)
							
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			// 选择地址
			selectaddress(item) {
				
				uni.setStorageSync("addressitem",item)
				uni.navigateBack({
					checked:true
				})
			},
			// 编辑地址
			editaddress(item) {
				var newitem = JSON.stringify(item);
				console.log(item)
				uni.navigateTo({
					url: '/pages/usercenter/addAddress?id=' + item.id + '&type=' + 1 + '&item=' + newitem
				})
			},
		},

		onShow() {
			this.page = 1;
			this.addresslist = []
			this.getaddresslist();
		},
		onReachBottom: function() {
			let newpage = this.data.page;
			newpage++;
			this.setData({
				page: newpage
			})

			if (this.showaddress.length == 0) {
				uni.showToast({
					title: '没有更多了~',
					icon: "none"
				})
			} else {
				this.getaddresslist();
			}


		},
	}
</script>

<style>
	page {
		background: #F7F7F7;
	}

	.box {
		background: #fff;
		margin-top: 16rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
	}
	.delimg{
		width:32rpx;
		height:32rpx;
		font-size: 0;
		margin-right:10rpx;
	}

	.item {
		padding: 34rpx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #EDEDED;

	}

	.left {
		width: 590rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(8, 18, 31, 1);
	}

	.top {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.name {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(6, 18, 32, 1);
	}

	.tel {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(61, 69, 76, 1);
		margin-left: 48rpx;
	}

	.address {
		width: 100%;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(61, 69, 76, 1);
		margin-top: 20rpx;
	}

	.right {
		width: 90rpx;
		font-size: 28rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(61, 69, 76, 1);
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.right image {
		width: 32rpx;
	}

	.btn {
		width: 686rpx;
		height: 84rpx;
		background: rgba(194, 148, 69, 1);
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 30rpx;
		left: 32rpx;

		/* margin: 300rpx auto; */
	}
</style>