<template>
	<view class="address-page">
		<view class="nav" :style="{'padding-top': statusBarHeight}">
			<image src="@/static/mine/fh.png" mode="" class="nav-back" @click="goBack"></image>
			<view class="nav-title">收货地址</view>
			<view class="nav-back"></view>
		</view>
		<view style="padding-top: 300rpx;" v-if="list.length === 0">
			<empty title="您当前暂无收货地"></empty>
		</view>
		<!-- <emptyCom title="您当前暂无收货地">
			<view class="empty-btn" @click="goAddress">添加地址</view>
		</emptyCom> -->
		<scroll-view @scrolltolower="lowerBottom" scroll-y="true" class="main"  v-if="list.length > 0">
			<view class="address" v-for="(item,index) in list" :key="index" @click="selectAddress(item)">
				<view class="address-header">
					<view class="receiver">收货人:{{item.receiver}}</view>
					<view class="phone">{{item.phone}}</view>
				</view>
				<view class="address-detail">{{item.province}} {{item.city}} {{item.area}} {{item.address}}</view>
				<view class="address-footer">
					<view class="default" :class="{active:item.isDefault === 1}" @click.stop="setDefault(item)">
						<image src="@/static/mine/mr.png" class="default-img" v-if="item.isDefault === 1"></image>
						<image src="@/static/mine/mr-no.png" class="default-img" v-else></image>
						默认地址
					</view>
					<view class="footer-opc">
						<view class="btn" @click.stop="edit(item)">
							<image src="@/static/mine/bj.png" mode="" class="edit-img"></image>
							编辑
						</view>
						<view class="btn" @click.stop="del(item,index)">
							<image src="@/static/mine/sc.png" mode="" class="del-img"></image>
							删除
						</view>
					</view>
				</view>
				<!-- <view class="address-info">
					<view class="info">
						<view class="default-txt" v-if="item.isDefault === 1">默认</view>
						<view class="info-name">{{item.receiver}}</view>
						<view class="info-phone">{{item.phone}}</view>
					</view>
				</view>
				<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/order/edit.png" mode="" class="edit" @click.stop="edit(item)"></image> -->
			</view>
		<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
		</scroll-view>
		<view class="footer" @click="goAddress">添加新地址</view>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { userAddress,delAddress,editAddress } from '@/API/user.js'
	// import emptyCom from '@/pages/components/empyt.vue'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
	export default{
	mixins: [myMixins],
		data(){
			return {
				statusBarHeight,
				page:1,
				list:[],
				visible:true,//是否还有数据
				type:"",//type 为select时 点击返回页面
				total:0
			}
		},
		// components:{emptyCom},
		onShow() {
			this.visible = true;
			this.page = 1
			this.getAddress()
		},
		onLoad(opation) {
			this.type = opation.type
		},
		methods:{
			goBack(){
				uni.navigateBack()
			},
			// 获取地址列表
			getAddress(){
				// if(!this.visible){
				// 	return
				// }
				uni.showLoading()
				userAddress({page: this.page,size: 10}).then(res => {
					uni.hideLoading()
					console.log(res)
					if(res.code === 200){
						if(this.page > 1){
							this.list = [...this.list,...res.data.content]
						}else{
							this.list = res.data.content
						}
						this.total = res.data.total
					}else{
						this.$api.msg(res.message)
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			// 设置默认地址
			setDefault(item){
				let data = JSON.parse(JSON.stringify(item))
				data.isDefault = data.isDefault == 1 ? 0 : 1
				editAddress(item.id,data).then(res => {
					console.log(res)
					if(res.code === 200){
						this.getAddress()
					}else{
						this.$api.msg(res.message)
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			// 删除地址
			del(item,index){
				uni.showLoading()
				delAddress({id:item.id}).then(res => {
					uni.hideLoading()
					if(res.code === 200){
						this.list.splice(index,1)
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			// 返回地址
			selectAddress(item){
				if(this.type === 'select'){
					uni.setStorageSync('address',JSON.stringify(item))
					uni.navigateBack()
				}
			},
			// 编辑地址
			edit(item){
				uni.navigateTo({
					url:`/pages/mine/addAddress?id=${item.id}`
				})
			},
			// 上拉加载
			lowerBottom(){
				if(this.total == this.list.length){
					return
				}
				this.page += 1;
				this.getAddress()
			},
			goAddress(){
				uni.navigateTo({
					url:`/pages/mine/addAddress`
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}
	.address-page{
		
		.nav{
			z-index: 100;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 23rpx;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			left: 0;
			.nav-back{
				width: 19rpx;
				height: 34rpx;
			}
			.nav-title{
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
			}
		}
		.empty-btn{
			margin-top: 60rpx;
			width: 324rpx;
			height: 100rpx;
			background: #70E3DE;
			border-radius: 50rpx;
			font-size: 32rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.main{
			height: 100vh;
			padding-top: 130rpx;
			padding-bottom: 150rpx;
			box-sizing: border-box;
			.address{
				margin: 0 22rpx 25rpx 22rpx;
				width: 706rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				padding: 29rpx 39rpx 0rpx 21rpx;
				.address-header{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: #333333;
					.receiver{
						font-weight: 500;
						width: 430rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.phone{
						font-weight: 600;
					}
				}
				.address-detail{
					margin-top: 22rpx;
					font-size: 24rpx;
					color: #888888;
				}
				.address-footer{
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 27rpx;
					border-top: 1px solid #EEEEEE;
					.default{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #999999;
						.default-img{
							margin-right: 17rpx;
							width: 27rpx;
							height: 27rpx;
							
						}
					}
					.active{
						color: #F24F43;
					}
					.footer-opc{
						display: flex;
						align-items: center;
						.btn{
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #666666;
							margin-left: 54rpx;
							.edit-img{
								margin-right: 17rpx;
								width: 26rpx;
								height: 27rpx;
							}
							.del-img{
								margin-right: 17rpx;
								width: 24rpx;
								height: 28rpx;
							}
						}
					}
				}
				.address-info{
					.info{
						display: flex;
						align-items: center;
						width: 556rpx;
						overflow: hidden;
						font-size: 24rpx;
						color: #333;
						font-weight: bold;
						.default-txt{
							width: 60rpx;
							height: 30rpx;
							background: #F55C56;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 10rpx;
							margin-right: 6rpx;
							color: #fff;
							font-size: 24rpx;
							font-weight: normal;
						}
						.info-name{
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.info-phone{
							margin-left: 16rpx;
						}
					}
					// .address-detail{
					// 	margin-top: 24rpx;
					// 	width: 556rpx;
					// 	color: #333333;
					// 	font-size: 28rpx;
					// 	font-weight: 800;
					// 	overflow: hidden;
					// 	white-space: nowrap;
					// 	text-overflow: ellipsis;
					// }
				}
				.edit{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.no-data{
			font-size: 24rpx;
			text-align: center;
			padding: 10rpx 0 30rpx 0;
		}
		.footer{
			position: fixed;
			left: 22rpx;
			bottom: 54rpx;
			
			width: 706rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>