<template>
	<!-- 收货地址 -->
	<view class="container">
		<!-- <u-loading-page :loading="pageLoading"></u-loading-page> -->
		<view class="list">
			<scroll-view scroll-y style="height: 100%;" @scrolltolower="scrolltolower">
				<view v-for="(item, index) in 5" :key="index" class="address-item">
					<!-- 从下单页 选择收货地址时使用 -->
					<view v-if="origin === 'confirmorder'">
						<image v-if="currentSelectAddressId == item.id" class="w-32 h-32 mr-20" src="@/static/is-select.png"></image>
						<image v-else @click="onEditConfirmPageAddress(item)" class="w-32 h-32 mr-20" src="@/static/select.png"></image>
					</view>
					<view class="address-info">
						<!--个人信息-->
						<view class="info">
							<text class="fw-600">姓名</text>
							<text class="ml-12">手机号</text>
						</view>
						
						<!--详细地址-->
						<view class="mt-8 mb-36 address">
							<text class="fs-28">详细地址</text>
						</view>
						
						<!--地址操作-->
						<view class="operation-wapper">
							<view class="default-address">
								<image v-if="item.default === '1'" src="@/static/is-select.png"></image>
								<image v-else @click="onEditDefaultAddress(item)" src="@/static/select.png"></image>
								<text :style="{'color': item.default === '1'? '#EB7318': '#000'}">默认地址</text>
							</view>
							<view class="operation-btn">
								<!--删除-->
								<view @click="delAddress(item)">
									<image src="@/static/my/del.png"></image>
									<text>删除</text>
								</view>
								<!--修改-->
								<view @click="$wskj.to('/pages/my/addaddress?item=' + JSON.stringify(item))" class="ml-40">
									<image src="@/static/my/edit.png"></image>
									<text>编辑</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<!-- 暂无收货地址 -->
			<!-- <emptydata v-else></emptydata> -->
		</view>
		
		<view @click="$wskj.to('/pages/my/addaddress')" class="addbtn">
			<text>添加地址</text>
		</view>

		<!-- 删除地址弹窗 -->
		<wskj-modal :show="delShow" confirmText="确定删除" confirmColor="#EB7318" :showCancelButton="true"
			@close="delShow = false" @cancel="delShow = false" @confirm="onConfirmDel">
			<view class="center ptb-40">
				<text>确认要删除该地址吗？</text>
			</view>
		</wskj-modal>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				pageLoading: false,
				origin: '',
				currentSelectAddressId: '', // 从确认订单页跳转使用
				delShow: false,
				addressList: [],
				currentAddressId: ''
			}
		},
		onLoad(options){
			// console.log(options)
			if(options.origin) {
				this.origin = options.origin
			}
			if(options.id){
				// console.log(options.id)
				this.currentSelectAddressId = options.id
			}
		},
		onShow(){
			this.addressList = []
			this.getAddressList()
		},
		methods: {
			...mapMutations('cart', ['setPayhasAddress']),
			// 获取收货地址列表
			getAddressList(){
				this.pageLoading = true
				const params = {
					url: '/api/user/addlist',
					data: {
						
					}
				}
				this.$request(params).then(res => {
					// console.log(res)
					this.addressList = res.data.add
					this.pageLoading = false
				}).catch(err => {
					this.pageLoading = false
				})
			},
			delAddress(item) {
				this.currentAddressId = item.id
				this.delShow = true
			},
			// 确认删除地址
			onConfirmDel() {
				const params = {
					url: '/api/user/deladd',
					data: {
						id: this.currentAddressId
					}
				}
				this.$request(params).then(res => {
					// console.log(res)
					this.delShow = false
					if(res.code === 1) {
						this.getAddressList()
						this.$u.toast('删除成功')
					} else {
						this.$u.toast('删除失败')
					}
				}).catch(err => {
					this.delShow = false
					this.$u.toast('删除失败')
				})
			},
			// 修改默认地址
			onEditDefaultAddress(item) {
				const params = {
					url: '/api/user/mradd',
					data: {
						id: item.id
					}
				}
				this.$request(params).then(res => {
					// console.log(res)
					if(res.code === 1) {
						this.addressList.map(item => {
							item.default = '0'
						})
						item.default = '1'
					}
				}).catch(err => {
					
				})
			},
			// 修改确认订单页的收货地址
			// 或绑定积分商城得收货地址
			onEditConfirmPageAddress(item){
				if(this.origin === 'confirmorder') {
					this.setPayhasAddress({
						id: item.id,
						name: item.name,
						mobile: item.mobile,
						province: item.province,
						city: item.city,
						district: item.district,
						address: item.address
					})
					// 返回
					uni.navigateBack({
						delta: 1
					})
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		height: 100%;
		background-color: #F5F5F5;
		padding: 20rpx;
	}

	.list {
		height: calc(100% - 200rpx);
	}

	/* 单个 */
	.address-item {
		width: 100%;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.address-info {
		flex: 1;
		padding: 32rpx;
		background-color: #FFF;
		border-radius: 16rpx;
	}

	.address>text {
		word-wrap: break-word;
	}

	.operation-wapper {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.default-address {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	.default-address>image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}

	.operation-btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.operation-btn>view {
		display: flex;
		align-items: center;
	}

	.operation-btn>view>image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 4rpx;
	}

	.operation-btn>view>text {
		font-size: 28rpx;
	}

	.addbtn {
		width: 90%;
		height: 80rpx;
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		margin-left: -45%;
		text-align: center;
		line-height: 80rpx;
		background-color: #EB7318;
		border-radius: 8rpx;
		color: #FFF;
	}
</style>