<template>
<view class="flex-col page">
  <view class="flex-row justify-center items-center self-stretch relative section_2">
    <text class="text">收货地址</text>
    <image
			@click="closeWindow"
      class="image pos_2"
      :src="orderUrl + '/component/cha.png'"
    />
  </view>
  <view class="flex-col self-stretch list">
		<radio-group @change="radioChange">
    <view class="flex-col list-item mt-10" v-for="(item, index) in addressList" :key="item.id">
      <view class="flex-row justify-between items-center self-stretch">
        <view class="flex-row items-center">
          <radio color="#E79EA1" :value="index"></radio>
          <text class="font ml-8">{{ item.name }}</text>
          <text class="font_2 ml-8">{{ item.phone }}</text>
        </view>
        <view class="flex-row group">
          <image
            class="image_2"
            :src="orderUrl + '/component/edit.png'"
						@click="editAddress(item)"
          />
          <image
            class="image_2 ml-11"
            :src="orderUrl + '/component/delete.png'"
						@click="confirmDelete(item.id)"
          />
        </view>
      </view>
      <text class="self-center font_3 text_2 mt-14">{{ item.region }}{{ item.detailAddress }}</text>
    </view>
		</radio-group>
  </view>
  <view class="flex-col justify-start items-center self-center text-wrapper" @click="toNewAddress">
    <text class="text_3">添加新地址</text>
  </view>
</view>
</template>

<script setup>
import {nextTick, onMounted , onUnmounted, ref } from 'vue'
import  emitter  from '../../../utils/emitter'
import { testUrl , baseUrl , suiUrl } from '../../../api/request';
import { onShow, onLoad } from "@dcloudio/uni-app";
import { getFonts } from '../../../common/globalFont';
const addressList = ref([])
const userInfo = wx.getStorageSync('userInfo')
import { orderUrl } from '../../../common/globalImagesUrl';
//页面跳转回来之后，刷新一次地址列表  onShow就是在页面显示后执行

const updateAddresssListHandler = () => {
	getAddressList()
}


onLoad(() => {
	getFonts()
})

onMounted(() => {
	getAddressList()
	emitter.on('updateAddressList', updateAddresssListHandler)
})


onUnmounted(() => {
	emitter.off('updateAddressList', updateAddresssListHandler)
})






//根据登录用户获取地址列表
const getAddressList = async () =>{
	const res = await uni.request({
		url: baseUrl + '/address/list' ,
		method: 'POST',
		header: {
			'cookie': wx.getStorageSync('cookie')
		}
	})
	console.log('组件的地址信息---->',res.data);
	addressList.value = res.data.data
}
//当选项发生改变时
const radioChange = ( event ) => {
	const index = event.detail.value
	console.log(index)
	const temp = addressList.value[index] //通过emitter传入暂时的地址信息
	emitter.emit('getAddressInfo', temp)
	emitter.emit('addressInfo', temp)
	emitter.emit('closeAddress')
}
//跳转到新建地址页面
const toNewAddress =()=>{
	uni.navigateTo({
		url: '/pages/Shopping-cart/newaddress_Info/newaddress_Info'
	})
}
//编辑地址方法
const editAddress =(value)=>{
	console.log('地址信息',value);
	uni.navigateTo({
		url: '/pages/Shopping-cart/newaddress_Info/newaddress_Info?editInfo=' + JSON.stringify(value)
	})
}
const confirmDelete =(id)=> {  //确定删除地址按钮
	uni.showModal({
			title: '提示',
			content: '是否删除地址?',
			success: (e) => {
				if (e.confirm) {
					deleteAddress(id)
				} else if (e.cancel)
					return;
			}
		})
}
//删除地址方法
const deleteAddress = async( id ) =>{
	const res = await uni.request({
		url: baseUrl + '/address/delete',
		method: 'POST',
		header: {
			'cookie': wx.getStorageSync('cookie')
		},
		data: { id: id }
	})
	// console.log(res.data);
	if( res.data.code === 1 ) {
		await getAddressList()
		emitter.emit('delAddressById', id)
		emitter.emit('delMyAddress', id)
	}
}
//关闭按钮
const closeWindow =()=> {
	emitter.emit('closeAddress')
}

</script>

<style lang="scss" scoped>
.ml-11 {
  margin-left: 20.57rpx;
}
.page {
  background-color: #f5f5dc;
  border-radius: 28.05rpx 28.05rpx 0rpx 0rpx;
  background-image: url(http://123.249.108.160:8888/api/file/downloadFile?objectKey=feiyi/miniProgram/order/component/bkg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.section_2 {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1;
  padding: 28.88rpx 26.18rpx 21.21rpx;
  background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQfLHXSAU-feiyigongfangbeijin.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.text {
  color: #323232;
  font-size: 37.41rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 35.95rpx;
}
.image {
  width: 52.37rpx;
  height: 52.37rpx;
}
.pos_2 {
  position: absolute;
  right: 26.18rpx;
  top: 50%;
  transform: translateY(-50%);
}
.list {
  margin: 100.96rpx 14.96rpx 0 16.83rpx;
  height: 580rpx;
  padding-bottom: 20rpx;
  overflow-y: auto;
}
::-webkit-scrollbar {
	display: none;
}
.list-item {
  padding: 26.18rpx 16.01rpx 30.41rpx 16.03rpx;
  background-color: #ffffff;
  border-radius: 28.05rpx;
}
.list-item:first-child {
  margin-top: 0;
}
.image_3 {
  width: 31.8rpx;
  height: 33.67rpx;
}
.font {
  font-size: 29.93rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 25.83rpx;
  color: #323232;
}
.font_2 {
  font-size: 29.93rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 19.99rpx;
  color: #323232;
}
.group {
  margin-right: 10.72rpx;
}
.image_2 {
  width: 37.41rpx;
  height: 39.28rpx;
}
.font_3 {
  font-size: 26.18rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 31.8rpx;
  color: #818181;
}
.text_2 {
  width: 572.32rpx;
}
.text-wrapper {
  padding: 26.75rpx 0 29.61rpx;
  background-color: #ffb6b9;
  border-radius: 74.81rpx;
  width: 637.78rpx;
  position: fixed;
  bottom: 40rpx;
}
.text_3 {
  color: #ffffff;
  font-size: 33.67rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 31.57rpx;
}
	@import url(../../../common/css/global.css);
</style>