<template>
  <!-- #ifdef H5 -->
	<zj-page-layout :hasFooter="true">
		<view class="top-container">
			<u-icon name="info-circle" color="rgb(249, 174, 61)" size="28"></u-icon>
			<text>修改后可能会影响上门服务时效，只能修改一次。若因服务人员已上门签到导致修改失效的，敬请谅解！</text>
		</view>

		<view class="now-container">
			<view class="title">原地址</view>
			<view class="address">{{detail.province}}{{detail.city}}{{detail.area}}{{detail.street}}{{detail.receAddress}}{{detail.houseNo || ''}}</view>
			<view class="name">{{detail.receUserName}}<text>{{detail.recePhone}}</text></view>
		</view>

		<view class="list-container">
			<view class="title">
				<view class="tit">选择新的地址</view>
				<view class="right" @click="toAdd">添加新地址</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in dataList" :key="index" @click="activeIndex = index">
					<view class="main">
						<view class="name">{{item.name}}<text>{{item.phone}}</text></view>
						<view class="address">{{item.province}}{{item.city}}{{item.area}}{{item.street}}{{item.address}}{{item.houseNo || ''}}</view>
					</view>
					<text class="iconfont" :class="activeIndex === index ? 'icon-dagou':'icon-danxuan'"></text>
				</view>
			</view>
		</view>

		<template slot="footer">
			<view class="footer-btn-group">
				<u-button text="提交修改" type="primary" @click="submitData()"></u-button>
			</view>
		</template>
	</zj-page-layout>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageMine/pages/order/changeAddress`, pam,crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
	export default {
		data() {
			return {
				orderId: null,
				detail: {}, // 订单详情

				activeIndex: '',
				dataList: [],
			}
		},

		onLoad({orderId}) {
			this.orderId = orderId;
			this.getOrderDetail();
			this.getList();
		},

		onShow() {
			if(this.orderId) {
				this.getList();
			}
		},

		methods: {
			getOrderDetail() {
				this.$api.get('/order/detail', {
					orderId: this.orderId
				}).then(res => {
					this.detail = res.data;
					this.loadStatus = 0;
				}).catch(res => {
					this.errorText = res.message;
					this.loadStatus = 2;
				}).finally(res => {
					this.refresherTriggered = false;
				})
			},

			// 获取收货地址列表
			getList() {
				this.$api.get('/user/address/list', {
          pageNum: 1,
          pageSize: -1,
          userId: this.$store.state.user.userId
				}).then(res => {
					res.data.records.forEach(item => {
						item.receUserName = item.name;
						item.recePhone = item.phone;
						item.receAddress = item.address;
						delete item.createTime;
					})
					console.log(res.data.records);
					this.dataList = res.data.records;
				})
			},

			submitData() {
				if(this.activeIndex === '') return this.$toast('请选择地址');
				this.$api.postJson('/order/rece/info/update', {
          orderId: this.orderId,
          ...this.dataList[this.activeIndex]
				}).then(res => {
					this.$successToast();
					this.crossPage.$emit('refreshOrderList');
					this.crossPage.$emit('refreshOrderDetail');
					this.$navToPage({
						delta: 1
					}, 'navigateBack')
				})
			},

      toAdd() {
        this.$navToPage({
          url: '/packageMine/pages/address/form'
        })
      }
		}
	}
  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },

    onLoad(pam) {
      this.pam = pam;
    },
  }
  // #endif
</script>

<style lang="scss" scoped>
	.top-container {
		display: flex;
		align-items: center;
		background: #ffffff;
		padding: 20rpx;
		margin-top: 20rpx;
		text {
			margin-left: 20rpx;
			color: rgb(249, 174, 61);
			font-size: 30rpx;
			line-height: 34rpx;
		}
	}

	.now-container {
		background: #ffffff;
		padding: 30rpx 20rpx;
		margin-top: 20rpx;
		.title {
			font-size: 32rpx;
			font-weight: 500;
		}
		.address {
			margin-top: 24rpx;
			line-height: 36rpx;
		}
		.name {
			margin-top: 20rpx;
			color: $sec-font;
		}
	}

	.list-container {
		background: #ffffff;
		padding: 30rpx 20rpx;
		margin-top: 20rpx;
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.tit {
				font-size: 32rpx;
				font-weight: 500;
			}
			.right {
				color: $theme-color;
			}
		}
		.list {
			margin-top: 10rpx;
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f5f5f5;
				padding: 30rpx 0;
				&:last-child {
					border: none;
				}
				.name {
					font-size: 32rpx;
					text {
						color: $sec-font;
						margin-left: 8rpx;
						font-size: 28rpx;
					}
				}
				.address {
					margin-top: 20rpx;
					line-height: 36rpx;
				}
				.iconfont {
					font-size: 44rpx;
					&.icon-dagou {
						color: $theme-color;
					}
				}
			}
		}
	}
</style>
