<!-- 收件地址列表 -->
<template>
	<s-layout title="收货地址" :bgStyle="{ color: '#FFF' }">
		<view v-if="state.list.length">
			<view class="list" v-for="item in state.list" :key="item.id" :item="item" @tap="onSelect(item)">
				<view>
					{{ item.detailAddress }}
				</view>
				<view>
					{{ item.areaName }}
				</view>
			</view>
		</view>
		<s-empty v-if="state.list.length === 0 && !state.loading" text="暂无收货地址" icon="/static/data-empty.png" />
	</s-layout>
</template>

<script setup>
	import {
		reactive,
		onBeforeMount
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import {
		isEmpty
	} from 'lodash';
	import AreaApi from '@/sheep/api/system/area';
	import AddressApi from '@/sheep/api/member/address';

	const state = reactive({
		list: [], // 地址列表
		loading: true,
	});

	// 选择收货地址
	const onSelect = (pickUpInfo) => {
		uni.$emit('SELECT_ADDRESS1', {
			pickUpInfo,
		});
		sheep.$router.back();
	};

	// 导入微信地址
	// TODO 芋艿：未测试

	onShow(async () => {
		state.list = (await AddressApi.pickUpList()).data;
		state.loading = false;
	});
</script>

<style lang="scss" scoped>
	.list {
		margin: 2vw;
		background-color: #fff;
		border-radius: 3vw;

		view {
			padding: 1vw;
			font-size: 1.3rem;
		}
	}

	.footer-box {
		.add-btn {
			flex: 1;
			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
			border-radius: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 80rpx;
			color: $white;
			position: relative;
			z-index: 1;
		}

		.sync-wxaddress {
			flex: 1;
			line-height: 80rpx;
			background: $white;
			border-radius: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: $dark-6;
			margin-right: 18rpx;
		}
	}
</style>