<template>
	<up-popup :show="show" closeable round="10" @close="close">
		<view class="address-popup">
			<view class="head-title">收货人与详细地址</view>
			<view class="list-admin">
				<view>常用地址</view>
				<view class="admin-btn">
					<view class="btn" @click="navTo('/pagesOrder/addressList/addressList')"><up-icon name="edit-pen"
							color="#20B128"></up-icon>管理</view>
					<view class="btn" @click="navTo('/pagesOrder/addressEdit/addressEdit')"><up-icon name="plus"
							color="#20B128"></up-icon>新增</view>
				</view>
			</view>
			<scroll-view style="height: 600rpx;padding-bottom: 20rpx;" scroll-y>
				<view class="row" v-for="(item,index) in list" :key="index" @click="addressType=item.address_id">
					<view class="content">
						<view class="top">
							<view class="name">{{item.real_name}}</view>
							<view class="phone">{{item.phone}}</view>
							<u-tag v-if="item.is_default" style="pointer-events: none;" text="默认" type="success" plain
								size="mini"></u-tag>
						</view>
						<view class="bottom u-line-2">{{item.detail}}</view>
					</view>
					<image v-if="addressType==item.address_id" src="@/static/icon/check.png"></image>
					<image v-else src="@/static/icon/n-check.png"></image>
				</view>
			</scroll-view>
			<up-button color="#20B128" shape="circle" @click="submitAddress">确认</up-button>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from "vue"

	const addressType = ref(-1)

	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: () => []
		},
	})

	const emit = defineEmits(['close', 'change']);
	const close = () => {
		emit('close');
	}

	const submitAddress = () => {
		let e = props.list.find(item => item.address_id == addressType.value);
		if (addressType.value <= 0 || !e) return uni.$u.toast('请选择地址');
		emit('change', e);
	}

	const navTo = (url) => {
		uni.navigateTo({
			url: url
		})
	}

	const setCheck = (e) => {
		addressType.value = e;
	}
	defineExpose({
		setCheck
	})
</script>

<style scoped lang="scss">
	.address-popup {
		padding: 30rpx;

		.head-title {
			font-weight: bold;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.list-admin {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.admin-btn {
				display: flex;
				color: #20B128;

				.btn {
					margin-left: 20rpx;
					display: flex;
					align-items: center;

					&:active {
						color: rgba(#20B128, 0.8);
						transition: background-color 0.5s;
						animation: disappear 0.5s 0.5s forwards;
					}
				}
			}
		}

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f6f6f6;
			margin-bottom: 20rpx;

			&:last-child {
				border-bottom: none;
				margin-bottom: 0;
			}

			.content {
				.top {
					display: flex;

					view {
						margin-right: 20rpx;
					}
				}

				.bottom {}
			}

			image {
				width: 40rpx;
				height: 40rpx;
				flex-shrink: 0;
			}
		}
	}

	@keyframes disappear {
		to {
			opacity: 0;
			/* 渐隐 */
			transform: scale(0);
			/* 缩小 */
		}
	}
</style>