<template>
	
	<view class="flex-col pos">
		
	 <view class="flex-row items-center section_2" v-if="isShow">
	    <image
	      class="shrink-0 image"
	      :src="shoppingCartUrl + '/component/dw.png'"
	    />
	    <view class="flex-col flex-1 group">
	      <view class="flex-row items-baseline group_14">
	        <text class="font text" style="margin-right: 15rpx;">{{ addressInfo.name }}</text>
	        <text class="text_2">{{ addressInfo.phone }}</text>
	      </view>
	      <text class="font_2 text_3 mt-9">{{ addressInfo.region }} {{ addressInfo.detailAddress }}</text>
	    </view>
	    <image
	      class="shrink-0 image_2 image_3"
	      :src="shoppingCartUrl + '/component/yjt.png'"
	    />
	  </view>
	  
	  
	  <view class="flex-row justify-between items-center section_3 mt-9" v-if="!isShow">
	    <view class="flex-row items-center">
	      <image
	        class="shrink-0 image"
	        :src="shoppingCartUrl + '/component/dw.png'"
	      />
	      <text class="font text_4 ml-11">请选择收货地址</text>
	    </view>
	    <image
	      class="image_2"
	      :src="shoppingCartUrl + '/component/yjt.png'"
	    />
	  </view>
	</view>
</template>

<script setup>
	import {onMounted, onUnmounted, ref} from 'vue'
import emitter from '../../../utils/emitter';
import { JudgeIsNullity } from '../../../common/globalFunction';
import { shoppingCartUrl } from '../../../common/globalImagesUrl';
	const isShow = ref(false)
	const addressInfo = ref({})
	
	const getAddressInfoHandler = (val) => {
		addressInfo.value = val
		isShow.value = !JudgeIsNullity(addressInfo.value.name)
	}
	
	
	const delAddressByIdHandler = (val) => {
		if (addressInfo.value.id === val) {
			isShow.value = false
		}
	}
	
	const updateAddressInfoHandler = (val) => {
		if (addressInfo.value.id === val.id) {
			addressInfo.value = val
		}
	}
	
	onMounted(() => {
		emitter.on('getAddressInfo', getAddressInfoHandler)
		
		emitter.on('delAddressById', delAddressByIdHandler)
		
		emitter.on('updateAddressInfo', updateAddressInfoHandler)
	})
	
	onUnmounted(() => {
		
		emitter.off('getAddressInfo', getAddressInfoHandler)
		
		emitter.off('delAddressById', delAddressByIdHandler)
		
		emitter.off('updateAddressInfo', updateAddressInfoHandler)
	})
	
</script>

<style scoped lang="scss">
	.mt-9 {
	  margin-top: 5.88rpx;
	}
	.ml-11 {
	  margin-left: 20.63rpx;
	}
	.section_2 {
	  padding: 29.42rpx 20.63rpx 23.08rpx;
	  background-color: #ffffff;
	  border-radius: 18.75rpx;
	}
	.image {
	  width: 43.13rpx;
	  height: 43.13rpx;
	}
	.group {
	  margin-left: 21.45rpx;
	}
	.group_14 {
	  padding: 0 3.17rpx;
	}
	.font {
	  font-size: 30rpx;
	  font-family: FangZhengFonts;
	  line-height: 25.54rpx;
	}
	.text {
	  color: #323232;
	  line-height: 25.89rpx;
	}
	.text_2 {
	  color: #323232;
	  font-size: 30rpx;
	  font-family: FangZhengFonts;
	  line-height: 20.04rpx;
	}
	.font_2 {
	  font-size: 26.25rpx;
	  font-family: FangZhengFonts;
	  line-height: 25.54rpx;
	  color: #323232;
	}
	.text_3 {
	  color: #818181;
	  line-height: 31.88rpx;
	}
	.image_2 {
	  width: 24.38rpx;
	  height: 24.38rpx;
	}
	.image_3 {
	  margin-left: 38.55rpx;
	}
	.section_3 {
	  padding: 31.88rpx 20.63rpx 30rpx;
	  background-color: #ffffff;
	  border-radius: 18.75rpx;
	}
	.text_4 {
	  color: #818181;
	  line-height: 29.06rpx;
	}
	@import url(../../../common/css/global.css);
</style>