<template>
	<!-- 我的地址列表 -->
	<view>
		<u-navbar placeholder title="我的地址" bgColor="#fff" :autoBack="true"></u-navbar>
		<view class="mainBox">
			<view class="addressBox" v-for="item in addressList" :key="item.id" @click="checkAddress(item)">
				<view class="topBox flexJ">
					<view class="nameBox flexA">
						<image src="/static/mineIc/redAddress.png" mode=""></image>
						<view class="name">{{item.name}}</view>
						<text>{{item.mobile}}</text>
					</view>
					<view class="rightIc flexA">
						<image @click.stop="del(item.id)" src="/static/mineIc/delAddress.png" mode=""></image>
						<image @click.stop="newAdd(0,item.id)" src="/static/mineIc/edit.png" mode=""></image>
					</view>
				</view>
				<view class="area">
					{{item.diqu}}
				<test>{{item.address}}</test>
				</view>
			</view>
		</view>
		<!-- 地址列表为空 -->
		<view class="addressNull flexV" v-if="!addressList">
			<image src="/static/mineIc/addressNull.png" mode=""></image>
			<text>暂无收货地址</text>
		</view>
		<view class="btnBox  iosAuto">
			<view class="btn flexC" @click="newAdd(1)">新建收货地址</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import {onShow,onLoad} from '@dcloudio/uni-app'
	import { getAdressList,getDelAdres } from '@/api/'
	onShow(()=>{
		getAdressLists() //地址列表
	})
	onLoad((e)=> {
		isCheck.value = e.isCheck //是否选这地址
	})
	const addressList = ref([])
	//type==0 修改地址 - 新建地址
	const newAdd = (type,id)=> {
		uni.navigateTo({
			url:`/pages/mine/newAddress?id=${type == 0 ? id :''}`
		})
	}
	let isCheck = ref(0)
	// 选这地址
	const checkAddress = (item)=> {
		if(isCheck.value == 1) {
			const pop = getCurrentPages().pop();
			pop.$vm.getOpenerEventChannel().emit("steBack", item)
			uni.navigateBack()
		}
	}
	const del = (id)=> {
		uni.showModal({
			title: '提示',
			content: '确认删除此地址吗',
			success: function (res) {
				if (res.confirm) {
					getDelAdress(id)
				}
			}
		});
	}
	// 删除地址
	const getDelAdress = async (ids)=> {
	  try {
	    const res = await getDelAdres(ids)
		uni.showToast({ title:'删除成功！',icon:'none' })
		getAdressLists()
	    console.log('getDelAdres', res)
	    // 保存数据
	  } catch (err) {
	    console.log('getDelAdres', err)
	  }
	}
	// 获取地址列表
	const getAdressLists = async ()=>{
	  try {
	    const res = await getAdressList()
		addressList.value = res
		let defaultAdres = res.find(item=>item.is_default == 1) //默认地址
		uni.setStorageSync('defaultAdres',defaultAdres)
	    console.log('getAdressList', res)
	    // 保存数据
	  } catch (err) {
	    uni.showToast({ title:err,icon:'none' })
	    console.log('getAdressList', err)
	  }
	}
</script>

<style lang="scss">
	.mainBox {
		background: #f8f9feff;

		.addressBox {
			width: 100%;
			padding: 44rpx 32rpx;
			box-sizing: border-box;
			background: #fff;
			margin-bottom: 12rpx;
			
			.topBox {
				margin-bottom: 18rpx;
				
				.nameBox {
					image {
						width: 32rpx;
						height: 32rpx;
					}
					
					.name {
						 color: #000000cc;
						 font-size: 32rpx;
						 font-weight: 700;
						 margin: 0 20rpx;
					}
					
					text {
						 color: #000000cc;
						 font-size: 28rpx;
						 font-weight: 700;
					}
				}
				
				.rightIc {
					image {
						margin-left: 32rpx;
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
			
			.area {
				 color: #00000066;
				 font-size: 26rpx;
				 
				 text {
					 margin-left: 8rpx;
				 }
			}
		}
	}

	.addressNull {
		margin-top: 266rpx;

		image {
			width: 266rpx;
			height: 266rpx;
		}

		text {
			color: #00000066;
			font-size: 26rpx;
		}
	}

	.btnBox {
		position: fixed;
		left: 0;
		bottom: 0;
		background: #fff;
		width: 100%;
		height: 120rpx;

		.btn {
			width: 686rpx;
			height: 88rpx;
			border-radius: 12rpx;
			color: #ffffffff;
			font-size: 32rpx;
			font-weight: 700;
			margin: 0 auto;
			background: linear-gradient(139deg, #fb753cff 0%, #fb3e3cff 100%);
		}
	}
</style>