<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">地址列表</block>
		</cu-custom>
		<!-- 地址列表 -->
		<view class="margin-bottom-with-bar">
			<view class="padding margin-lr-sm margin-top-sm bg-white flex justify-between align-center" v-for="(item, index) in myAddressList" :key="index">
				<view @click="chooseAddress(item)">
					<view class="flex justify-start align-center">
						<view class='cu-tag bg-yellow margin-right-sm' v-if="item.isDefault">默认</view>
						<view class="text-gray margin-right-xs">{{item.provinceName}}</view>
						<view class="text-gray margin-right-xs">{{item.cityName}}</view>
						<view class="text-gray margin-right-xs">{{item.countryName}}</view>
						<view class="text-gray margin-right-xs">{{item.streetName || ''}}</view>
					</view>
					<view class="text-lg margin-tb-sm">{{item.address}}</view>
					<view class="text-gray">
						<text class="margin-right">{{item.name}}</text>
						<text>{{item.phone}}</text>
					</view>
				</view>
				<view class="oper-column text-xl flex justify-end">
					<view class="cuIcon-edit padding-lr-xs padding-tb" @click="addEditAddress(item)"></view>
					<view class="cuIcon-close padding-lr-xs padding-tb" @click="confirm2DelAddress(item)"></view>
				</view>
			</view>
		</view>
		<!-- 底部新增地址按钮 -->
		<view class="cu-bar tabbar border shop fixed-bottom-bar bg-back">
			<button class="cu-btn bg-main-color long-btn margin-lr-sm shadow-blur" @click="addEditAddress(null)">新增地址</button>
		</view>
		<!-- 模态框 -->
		<confirm-modal ref="confirmModal" :content="'是否确定删除？'" @confirm="delAddress"></confirm-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myAddressList: [],
				modalName: '',
				delAddressInfo: {},
				chooseMode: false
			}
		},
		onLoad(options) {
			if (Boolean(options)) {
				this.chooseMode = options.chooseMode === 'true' ? true : false;
			}
		},
		onShow() {
			this.loadData();
		},
		methods: {
			async loadData() {
				// this.myAddressList = await this.$api.data('myAddressList');
				let res = await this.$request.getAddressList({
					customerId: this.$request.getCurUserInfo().customerId
				});
				this.myAddressList = res.data;
			},
			addEditAddress(addressInfo) {
				let url = null;
				let params = null;
				if (addressInfo) {
					// 修改
					addressInfo.area = [{
						areaId: addressInfo.countryId,
						areaName: addressInfo.countryName
					}, {
						areaId: addressInfo.provinceId,
						areaName: addressInfo.provinceName
					}, {
						areaId: addressInfo.cityId,
						areaName: addressInfo.cityName
					}]
					params = {
						addressInfo: addressInfo,
						mode: 0
					}
				} else {
					// 新增
					params = {
						mode: 1
					}
				}
				uni.navigateTo({
					url: '/pages/my/edit-address?params=' + encodeURIComponent(JSON.stringify(params))
				})
			},
			confirm2DelAddress(addressInfo) {
				this.delAddressInfo = addressInfo;
				this.$refs.confirmModal.showModal();
			},
			async delAddress() {
				let res = await this.$request.delAddressList(this.delAddressInfo.customerAddressId);
				if (res.code === 0) {
					this.loadData();
					uni.showToast({
						title: '删除成功',
						icon: 'success',
						mask: true
					})
				} else {
					uni.showToast({
						title: '删除失败',
						icon: 'error',
						mask: true
					})
				}
			},
			chooseAddress(addressInfo) {
				if (this.chooseMode) {
					uni.$emit(this.$globalFun.CHOOSE_ADDRESS, addressInfo);
					uni.navigateBack({
						delta: -1
					})
				}
			}
		}
	}
</script>

<style scoped>
</style>
