<template>
	<zj-page-layout
		:hasFooter="true"
		:isScroll="true"
		:refresherTriggered="refresherTriggered"
		@refresherrefresh="refresherrefresh">
		<view class="list-container">
			<block v-for="(item, index) in dataList" :key='index'>
				<view class="item" @tap="chooseAddress(item)">
					<view class="main">
						<view class="top">
							<view class="default" v-if="item.defaultAddr">默认</view>
							<view class="text">{{item.province}} {{item.city}} {{item.area}} {{item.street}}</view>
						</view>
						<view class="address">{{item.address}}{{item.houseNo}}</view>
						<view class="name">{{item.name}} {{item.phone}}</view>
					</view>
					<text class="iconfont icon-bianji" @tap.stop="toEdit(item)"></text>
				</view>
			</block>
		</view>

		<Loading
			:type="2"
			:loadStatus="loadStatus"
			:dataList="dataList"
		/>

		<template slot="footer">
			<view class="footer-btn-group">
				<!-- <u-button text="获取地址" @click="getWxAddress"></u-button> -->
				<u-button text="新增地址" type="primary" @click="toAdd"></u-button>
			</view>
		</template>
	</zj-page-layout>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [], // 收货地址列表
				loadStatus: 0,
				refresherTriggered: false, // 下拉刷新状态
				isChoose: false, // 是否进来选择地址
			}
		},

		onShow() {
			// this.getList();
		},
		onLoad({isChoose}) {
			this.isChoose = isChoose;
      this.getList();

      this.crossPage.$on('refreshAddressList', async data => {
        this.dataList = [];
        await this.getList();
        if(this.isChoose && data) {
          uni.showLoading();
          this.chooseAddress(data, true);
        }
      });
		},
		methods: {
			// 触发下拉刷新
			async refresherrefresh(e) {
				this.refresherTriggered = true;
				this.dataList = [];
				this.getList();
			},

			// 获取收货地址列表
			getList() {
        return new Promise((r, j) => {
          this.loadStatus = 1;
          this.$api.get('/user/address/list', {
            pageNum: 1,
            pageSize: -1,
            userId: this.$store.state.user.userId
          }).then(res => {
          	this.loadStatus = 0;
          	let list = res.data.records;
          	if(list.length < 1){
          		this.loadStatus = 2;
          	}
          	this.dataList = list;
          }).catch(() => {
          	this.loadStatus = 2;
          }).finally(res => {
          	this.refresherTriggered = false;
            r(1);
          })
        })
			},

			// 选择地址
			chooseAddress(item, timeout = false) {
				if(!this.isChoose) return false;
        if(timeout) {
          setTimeout(() => {
            uni.hideLoading();
            this.crossPage.$emit('chooseAddress', item);
            this.$navToPage({
            	delta: 1
            }, 'navigateBack')
          }, 500)
        }else {
          this.crossPage.$emit('chooseAddress', item);
          this.$navToPage({
          	delta: 1
          }, 'navigateBack')
        }
			},

      toAdd() {
        this.$navToPage({
          url: '/packageMine/pages/address/form'
        })
      },

      toEdit(item) {
        this.$navToPage({
          url: '/packageMine/pages/address/form?id=' + item.userAddressId
        })
      },

			// 获取微信收货地址
			getWxAddress() {
				let that = this;
				uni.chooseAddress({
					success(res) {
						let params = {
							userId: that.$store.state.user.userId,
							name: res.userName,
							phone: res.telNumber,
							province: res.provinceName,
							city: res.cityName,
							area: res.countyName,
							address: res.detailInfo,
							houseNo: '',
						}
						that.$navToPage({
              url: '/packageMine/pages/address/form?addressData=' + JSON.stringify(params)
            });
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.list-container {
		background: #FFFFFF;
		.item {
			padding: 40rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1px solid #f5f5f5;
			.main {
				.top {
					display: flex;
					align-items: center;
					.default {
						font-size: 22rpx;
						color: $theme-color;
						background: #E6F0FF;
						padding: 6rpx 8rpx;
						line-height: 20rpx;
						margin-right: 12rpx;
					}
					.text {

					}
				}
				.address {
					font-size: 32rpx;
					color: #333333;
					line-height: 38rpx;
					margin-top: 16rpx;
				}
				.name {
					font-size: 24rpx;
					color: $sec-font;
					margin-top: 16rpx;
				}
			}
			.iconfont {
				font-size: 44rpx;
				color: $sec-font;
			}
		}
	}
</style>
