<template>
	<view class="flex-col page">
		<view class="flex-row justify-center items-center relative group">
			<text class="text">收货地址</text>
			<image class="image pos" @click="close"
				src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=4bb5072c88795ed4234ff0c7f7a35a23.png" />
		</view>
		<view class="flex-col list">
			<radio-group @change="radioChange">
				<view class="flex-col list-item_1" v-for="(item, index) in addressList" :key="index">
					<view class="flex-row justify-between items-center self-stretch">
						<view class="flex-row items-center">
							<!-- <image
	            class="shrink-0 image_2"
	            src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=77acc0c7f94beb4408728eee129ffe97.png"
	          /> -->
							<radio color="#00ba9c" :value="index" :checked="index === current"></radio>
							<text class="font ml-9">{{ item.name }}</text>
							<text class="font_2 ml-9">{{ item.phone }}</text>
						</view>
						<view class="flex-row group_3">
							<image class="image_3"
								src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=dea6c36cff62ddc7551d1917f90fb560.png" />
							<image class="image_3 ml-12"
								src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=ce0e844eea3b34834f6a6293bc01a3ed.png" />
						</view>
					</view>
					<text class="self-center font_3 text_2 mt-12">{{ item.detailAddress }}</text>
				</view>
				</radio-group>
		</view>
		
		<view class="flex-col justify-start items-center section">
			<view class="flex-col justify-start items-center text-wrapper"><text class="text_3">添加新地址</text></view>
		</view>
		
	</view>
</template>

<script setup>
import { onMounted , ref } from 'vue'
import emitter from '../../utils/emitter';
import { testUrl } from '../../../api/request';
import { userStore } from '../../../store/userStore';
const items = ref([null, null])
const addressList = ref([])
const store = userStore()  //获取登录用户的信息
onMounted(() => {
	getAddressList()
})
//根据登录用户获取地址列表
const getAddressList = async () =>{
	const res = await uni.request({
		url: testUrl + '/address/list' ,
		method: 'POST',
		data: {
			id : store.userInfo.id
		}
	})
	addressList.value = res.data.data
	// console.log(addressList.value);
}
const close = () => {
	emitter.emit('close')
}
//当选项发生改变时
const radioChange = ( event ) => {
	const index = event.detail.value
	const temp = addressList.value[index] //通过emitter传入暂时的地址信息
	// console.log('temp',temp);
	emitter.emit('addressInfo', temp )
	emitter.emit('close')
}
</script>

<style lang="scss" scoped>
	.ml-9 {
		margin-left: 16.88rpx;
	}

	.page {
		padding-top: 18.75rpx;
		background-color: #f5f5dc;
		border-radius: 28.13rpx 28.13rpx 0rpx 0rpx;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding: 11.47rpx 24.38rpx 6.26rpx;
	}

	.text {
		color: #323232;
		font-size: 37.5rpx;
		font-family: Open Sans;
		line-height: 34.76rpx;
	}

	.image {
		width: 52.5rpx;
		height: 52.5rpx;
	}

	.pos {
		position: absolute;
		right: 24.38rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.list {
		margin-top: 30rpx;
	}

	.list-item_1 {
		padding: 26.27rpx 16.8rpx 24.98rpx;
		background-color: #fffef8;
		border-bottom: solid 1.88rpx #c8c8c8;
	}

	.image_2 {
		width: 33.75rpx;
		height: 33.75rpx;
	}

	.font {
		font-size: 30rpx;
		font-family: Open Sans;
		line-height: 27.19rpx;
		color: #323232;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: Open Sans;
		line-height: 22.05rpx;
		color: #323232;
	}

	.group_3 {
		margin-right: 10.97rpx;
	}

	.image_3 {
		width: 39.38rpx;
		height: 39.38rpx;
	}

	.font_3 {
		font-size: 26.25rpx;
		font-family: Open Sans;
		line-height: 31.88rpx;
		color: #818181;
	}

	.text_2 {
		width: 601.88rpx;
	}

	.section {
		margin-top: 202.5rpx;
		padding: 18.75rpx 0;
		background-color: #fffef8;
	}

	.text-wrapper {
		padding: 27.9rpx 0 29.01rpx;
		background-color: #fbb612;
		border-radius: 75rpx;
		width: 639.38rpx;
	}

	.text_3 {
		color: #ffffff;
		font-size: 33.75rpx;
		font-family: Open Sans;
		line-height: 31.22rpx;
	}

	@import url(../../../common/css/global.css);
</style>