<template>
	<view class="address-page">
		<HeaderCom></HeaderCom>
		<view style="padding-top: 300rpx;" v-if="list.length === 0">
			<empty title="您当前暂无收货地"></empty>
		</view>
		<scroll-view @scrolltolower="lowerBottom" scroll-y="true" class="main"  v-if="list.length > 0">
			<view class="list" v-for="(item,index) in list" :key="index" @click="selectAddress(item)">
				<view class="header">
					<view class="name">{{item.receiver}}</view>
					<view class="phone">{{item.phone}}</view>
				</view>
				<view class="address">{{item.province}} {{item.city}} {{item.area}} {{item.address}}</view>
				<view class="set">
					<view class="left" :class="{active:item.isDefault === 1}" @click.stop="setDefault(item)">
						<image src="@/static/new/address/s.png" mode="aspectFit" class="default-icon" v-if="item.isDefault === 1"></image>
						<image src="@/static/new/address/no.png" mode="aspectFit" class="default-icon" v-else></image>
						默认地址
					</view>
					<view class="right">
						<view class="item" @click.stop="edit(item)">
							<image src="@/static/new/address/edit.png" mode="aspectFit" class="item-icon"></image>
							编辑
						</view>
						<view class="item" @click.stop="del(item,index)">
							<image src="@/static/new/address/del.png" mode="aspectFit" class="item-icon"></image>
							删除
						</view>
					</view>
				</view>
			</view>
			<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
		</scroll-view>
		<view class="footer">
			<view class="footer-btn" @click="goAddress">添加新地址</view>
		</view>
		
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/address"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { userAddress,delAddress,editAddress } from '@/API/user.js'
	import HeaderCom from '@/pages/components/header.vue'
	// 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:{HeaderCom},
		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()
					uni.$emit('backAddressParams', item);
				}
			},
			// 编辑地址
			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-color: #F5F5F5;
	}
	.address-page{
		padding-top: 112rpx;
		.main{
			height: calc(100vh - 256rpx);
			padding: 0 32rpx;
			.list{
				width: 686rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 24rpx 32rpx 30rpx 32rpx;
				margin-bottom: 24rpx;
				.header{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.name{
						width: 260rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: bold;
						font-size: 32rpx;
						color: #000000;
					}
					.phone{
						font-size: 32rpx;
						color: #000000;
					}
				}
				.address{
					margin-top: 16rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					padding-bottom: 24rpx;
					border-bottom: 1px solid #E6E6E6;
				}
				.set{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
					.left{
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 28rpx;
						color: #999999;
						.default-icon{
							width: 32rpx;
							height: 32rpx;
							margin-right: 8rpx;
						}
					}
					.active{
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
					}
					.right{
						display: flex;
						align-items: center;
						.item{
							display: flex;
							align-items: center;
							font-weight: 500;
							font-size: 28rpx;
							color: #999999;
							margin-left: 40rpx;
							.item-icon{
								width: 32rpx;
								height: 32rpx;
								margin-right: 8rpx;
							}
						}
					}
				}
			}
		}
		.footer{
			width: 100%;
			height: 144rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			.footer-btn{
				width: 686rpx;
				height: 96rpx;
				background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
				border-radius: 16rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>