<template>
	<view class="u-flex address-wrap">
		<w-navbar :customBack="customBack" title="收货地址"></w-navbar>
		<view class="lists">
			<view class="body" v-for="(item, index) in lists" :key="item.id">
				<w-address @editSite="toEditSite(item)" @selectSite="selectSite(item)" @setDefault="setDefault(item, index)" @remove="remove(item)" :info="item" :is-default="item.enable === 1" :showRemove="true" />
			</view>
		</view>
		
		<view class="addSite" @tap="toAddSite">
			<view class="add">
				新建收货地址
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
export default {
	data() {
		return {
			background: {
				backgroundColor: 'none'
			},
			lists: []
		};
	},
	computed: {
		editPen() {
			return process.uniEnv.qn_base_url + 'icon/edit-pen.png'
		},
		submitBtn() {
			return {
				color: '#FFFFFF',
				backgroundColor: '#2272FF'
			}
		}
	},
	onLoad(options) {
		getApp().trackPage('我的收获地址页')
	},
	onShow() {
		if(this.$u.test.isEmpty(this.vuex_token)) {
			this.$u.route({url: 'pages/login/index'})
		}
		this.getData();
	},
	methods: {
		customBack() {
			let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2]
      prevPage.$vm.loadAddress()
			this.$u.route({
				type: 'back'
			})
		},
		getData() {
			this.getMineSite()
		},
		getMineSite() {
			this.$u.api.getMyAddress().then((res) => {
				const data = res.data
				this.lists = data.length > 0 ? data.map(v => {
					let region = []
					if(v.provinceName && v.cityName && v.districtName) {
						region = [v.provinceName, v.cityName, v.districtName]
					}
					v.region = region
					return v
				}) : []
			})
		},
		toAddSite() {
			this.$u.route({
				url: 'pages/mine/address/addSite',
				params: {
					type: 'select'
				}
			})
		},
		setDefault(val) {
			this.$u.api.setDefaultAddress({id: val.id}).then((res) => {
				if (res.code === 200) {
					this.lists.forEach(v => {
						this.$set(v, 'enable', v.id === val.id ? 1 : 0)
					})
					this.getMineSite()
          let pages = getCurrentPages()
          let prevPage = pages[pages.length - 2]
          prevPage.$vm.loadAddress()
				}
			})
		},
		remove(val) {
			uni.showModal({
				title: '温馨提示',
				content: '确定要删除该收货地址？',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '加载中',
						})
						this.$u.api.deleteMyAddress({id: val.id}).then((res) => {
							uni.hideLoading()
							if (res.code === 200) {
								this.getMineSite()
							} else {
								uni.showToast({
									icon: "none",
									title: res.message,
								})
							}
						})
					}
				}
			})
		},
		selectSite(val) {
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2];  //上一个页面
      let address = val.address
      let site = {
        name: val.name,
        mobile: val.mobile,
        address: address,
        region: val.region,
        id: val.id
      }
      prevPage.$vm.updateSite(site)
      this.$u.route({
        type: 'back'
      })
		},
		toEditSite(val){
			const region = val.region.join('-')
			this.$u.route({
				url: 'pages/mine/address/addSite',
				params: {
					type: 'select',
					region: region,
					name: val.name,
					mobile: val.mobile,
					address: val.address,
					id: val.id
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.address-wrap {
	background-color: #F4F5F7;
	flex-direction:column;
	height: 100vh;
	.lists {
		width: 100%;
		flex: 1;
		overflow-y:auto;
	}
}
.body {
	padding: 30rpx;
	margin: 30rpx;
	border-radius: 12rpx;
	background-color: #FFFFFF;
}

.addSite {
	display: flex;
	justify-content: space-around;
	width: 600rpx;
	height: 100rpx;
	line-height: 100rpx;
	margin: 50rpx 0;
	background-color: #2272FF;
	border-radius: 60rpx;
	font-size: 30rpx;
	.add{
		display: flex;
		align-items: center;
		color: #ffffff;
		.icon{
			margin-right: 10rpx;
		}
	}
}
</style>
