<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">
				<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" v-for="(areaObj, index) in item.area">
							{{areaObj.name}}</view>
					</view>
					<view class="text-lg margin-tb-sm">{{item.address}}</view>
					<view class="text-gray">
						<text class="margin-right">{{item.person2Contact}}</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, index)"></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">新增地址</button>
		</view>
		<!-- 模态框 -->
		<view class="cu-modal" :class="modalName=='delAddress'?'show':''">
			<view class="cu-dialog">
				<view class="padding-xl">
					是否删除该地址？
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-black" @tap="hideModal">取消</view>
					<view class="action margin-0 flex-sub text-main-color solid-left" @tap="hideModal"
						@click="delAddress">确定</view>
				</view>
			</view>
		</view>
		<confirm-modal ref="confirmModal" :content="'是否确定删除？'" :confirm="delAddress.bind(this, 1)"></confirm-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myAddressList: [],
				modalName: '',
				delAddressInfo: {},
				delAddressIndex: 0,
				chooseMode: false
			}
		},
		onLoad(options) {
			if (Boolean(options)) {
				this.chooseMode = options.chooseMode === 'true' ? true : false;
			}
			this.loadData();
			this.bindEvent();
		},
		onUnload() {
			this.offBindEvent();
		},
		methods: {
			async loadData() {
				this.myAddressList = await this.$api.data('myAddressList');
			},
			bindEvent() {
				uni.$on(this.$globalFun.CONFIRM, this.delAddress);
			},
			offBindEvent() {
				uni.$off(this.$globalFun.CONFIRM);
			},
			addEditAddress(addressInfo) {
				let url = null;
				let params = null;
				if (addressInfo) {
					// 修改
					params = {
						addressInfo: addressInfo,
						mode: 0
					}
				} else {
					// 新增
					params = {
						mode: 1
					}
				}
				uni.navigateTo({
					url: '/pages/my/edit-address?params=' + encodeURIComponent(JSON.stringify(params))
				})
			},
			confirm2DelAddress(addressInfo, index) {
				this.delAddressInfo = addressInfo;
				this.delAddressIndex = index;
				this.$refs.confirmModal.showModal();
			},
			delAddress() {
				this.myAddressList = this.myAddressList.slice(0, this.delAddressIndex).concat(this.myAddressList.slice(++this.delAddressIndex));
			},
			showModal(e) {
				this.modalName = typeof e === 'string' ? e : e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			chooseAddress(addressInfo) {
				if (this.chooseMode) {
					uni.$emit(this.$globalFun.CHOOSE_ADDRESS, addressInfo);
					uni.navigateBack({
						delta: -1
					})
				}
			}
		}
	}
</script>

<style scoped>
</style>
