<template>
	<view class="page-container">
		<!-- 自定义导航栏 -->
		<!-- <u-navbar title="我的地址" :autoBack="true" :placeholder="true"></u-navbar> -->

		<z-paging ref="paging" bg-color="#f8f8f8" v-model="dataList" @query="queryList">
			<view class="main-list">
				<u-radio-group v-model="selected" placement="column" activeColor="#0879FF" @change="onChange">
					<template v-for="(item, i) in dataList">
						<view class="mitem" :key="i" v-if="item.type != 2" @click="selectedAddressFun(item)"
							:style="{ border: selectedAddressId == item.id ? '1px solid rgba(3, 193, 184, 1)' : 'none' }">
							<view class="info-box" @click="onClick(item)">
								<view class="item-line atext">
									<text class="name">{{ item.userName }}</text>
									<text>{{ item.phone }}</text>
									<template v-if="query.orderNo && item.type == 1">
										<view class="default">默认</view>
									</template>
								</view>
								<view class="btext" v-if="!!item.address">
									<text>{{ item.name }} - </text>
									<text>{{ item.address }}</text>
									<text>{{ item.atlasAdd }}</text>
								</view>
							</view>
							<u-line length="100%" color="#eee" margin="14rpx 0 18rpx"></u-line>
							<view class="actions">
								<template v-if="!query.orderNo">
									<u-radio :name="item.id" shape="square" label="设为常用地址" labelSize="26rpx"></u-radio>
								</template>
								<view class="right">
									<text @click.stop="onEdit(item)">编辑</text>
									<text @click.stop="onDel(item)">删除</text>
									<!-- <image src="/static/identify/edit.png" />
									<image src="/static/identify/delete.png" /> -->
								</view>
							</view>
						</view>
					</template>
				</u-radio-group>
			</view>

			<!-- 底部操作栏 -->
			<view class="footer-bar" slot="bottom">
				<u-button text="新增地址信息" @click="onAdd"></u-button>
			</view>
		</z-paging>
	</view>
</template>

<script>
import {
	getAddrList,
	defaultAddr,
	netAddressDel,
} from '@/api/address';
import { updateOrder } from '@/api/index';
export default {
	data() {
		return {
			query: {},
			dataList: [],
			selected: '',
			selectedAddressId: null,
			productId: null
		}
	},
	computed: {

	},
	onLoad(query) {
		this.query = query;
		//商品详情页传过来的id
		if (query.selectedAddressId) {
			this.selectedAddressId = query.selectedAddressId
		}
		if (query.productId) this.productId = query.productId
	},
	onShow() {
		this.canReset && this.$refs.paging.reload();
		this.canReset = true;
	},
	methods: {
		//选择地址
		selectedAddressFun(item) {
			this.selectedAddressId = item.id
			let pages = getCurrentPages();
			let prevPage = pages.length >= 2 ? pages[pages.length - 2] : null;
			// 传参
			if (prevPage) {
				// 赋值
				prevPage.$vm.selectedAddressId = this.selectedAddressId;
			}
			if (this.productId) {
				uni.navigateTo({
					url: `/points/productDetails/index?id=${this.productId}&selectedAddressId=${this.selectedAddressId}`
				});
			}

		},
		// 获取数据
		queryList(pageNo, pageSize) {
			let params = {
				current: pageNo,
				size: pageSize,
				openId: uni.getStorageSync('wx_copenid'),
			}
			getAddrList(params).then(res => {
				if (res.data.code === 200) {
					this.selected = res.data.data.find(item => item.type == 1)?.id;
					if (this.selectedAddressId) {
						let flag = res.data.data.some(element => {
							return this.selectedAddressId == element.id
						});
						let pages = getCurrentPages();
						let prevPage = pages.length >= 2 ? pages[pages.length - 2] : null;
						if (!flag) {
							// 传参
							if (prevPage) {
								// 赋值
								prevPage.$vm.selectedAddressId = null;
							}
						} else {
							if (prevPage) {
								// 赋值
								prevPage.$vm.selectedAddressId = this.selectedAddressId;
							}
						}
					}
					this.$refs.paging.complete(res.data.data);
				} else {
					this.$refs.paging.complete(false);
				}
			});
		},
		// 设置默认
		onChange(e) {
			defaultAddr({
				id: e,
				openId: uni.getStorageSync('wx_copenid'),
			}).then(res => {
				if (res.data.code === 200) {
					this.$refs.paging.reload();
				} else {
					uni.$u.toast(res.data.msg);
				}
			});
		},
		// 编辑
		onEdit(item) {
			let params = {
				id: item.id,
			};
			let str = uni.$u.queryParams(params);
			uni.navigateTo({
				url: `/pages/address/address-edit${str}`
			});
		},
		// 删除
		onDel(item) {
			uni.showModal({
				title: '确认删除',
				content: `确定要删除该条数据吗？`,
				success: (res) => {
					if (res.confirm) {
						netAddressDel({ idList: item.id }).then(res => {
							uni.$u.toast(res.data.msg);
							if (res.data.code == 200) {
								this.$refs.paging.reload();
							}
						});
					}
				}
			});
		},
		// 添加
		onAdd() {
			uni.navigateTo({
				url: `/pages/address/address-edit`
			});
		},
		// 点选
		onClick(item) {
			if (this.query.name === '支付订单' && this.query.orderNo) {
				let params = {
					cId: this.query.orderNo,
					cName: item.userName,
					cPhone: item.phone,
					name: item.name,
					address: item.address,
					atlasAdd: item.atlasAdd,
					latitude: item.latitude,
					longitude: item.longitude,
				}
				updateOrder(params).then(res => {
					if (res.data.code == 200) {
						uni.navigateBack();
					} else {
						uni.$u.toast(res.data.msg);
					}
				});
			}
		},
	}
}
</script>

<style scoped lang="scss">
.page-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.main-list {
	flex: 1;
	padding: 24rpx;

	.mitem {
		padding: 20rpx;
		margin-bottom: 24rpx;
		background: #FFFFFF;
		box-shadow: 0 4rpx 16rpx 0 rgba(176, 176, 176, 0.05);
		;
		border-radius: 12rpx;

		.item-line {
			display: flex;
			align-items: center;
		}

		.info-box {
			flex: 1;

			.atext {
				font-weight: 400;
				font-size: 30rpx;
				color: #333;
			}

			.btext {
				font-weight: 400;
				font-size: 28rpx;
				color: #2F3437;
				margin-top: 12rpx;
			}

			.name {
				font-weight: 500;
				margin-right: 10rpx;
			}
		}

		.actions {
			font-weight: 400;
			font-size: 28rpx;
			color: var(--theme-color);
			display: flex;
			align-items: center;
			justify-content: space-between;

			.right {
				gap: 24rpx;
				display: flex;
				align-items: center;
			}
		}

		.default {
			font-weight: 400;
			font-size: 28rpx;
			color: #F35031;
			margin-left: 20rpx;
			padding: 2rpx 12rpx;
			background: rgba(243, 80, 49, 0.1);
			border-radius: 8rpx;
		}
	}
}

.footer-bar {
	::v-deep .u-button {
		height: 76rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		margin: 0;
		background: var(--theme-color);
		border-radius: 8rpx;
	}
}
</style>