<template>
	<view class="content">
		<uni-list class="custom-uni-list" v-if="hiddenDate">
			<uni-list-item :title="$t('index.delivery-address')" showArrow>
				<template v-slot:footer>
					<picker mode="date" style="flex: auto" :value="deliveryDate" @change="onDateChange">
						<view class="custom-uni-value">{{deliveryDate}}</view>
					</picker>
				</template>
			</uni-list-item>
		</uni-list>
		<view class="list-box" v-for="item in addressList" :key="item.id">
			<view>
				<view class="message">
					<text class="tag" v-if="item.isDefault">{{$t("index.default")}}</text>
					<text @tap="setDefault(item)" class="tag-1"
						v-if="!item.isDefault">{{$t("index.set-default")}}</text>
					<text class="text">{{item.receivePerson}}</text>
					<text class="text phone">{{item.receivePersonPhone}}</text>
				</view>
				<view class="address">{{item.warehouseAddress}}</view>
			</view>
			<block v-if="orderId === '-1'">
				<uni-icons type="compose" color="#99A0AF" size="24" @click="editAddress(item)"></uni-icons>
			</block>
			<block v-else>
				<view class="radio" @click="choseAddress(item)">{{$t('index.address-choose')}}</view>
			</block>
		</view>
		<view class="btn-box">
			<button type="default" class="btn" @click="addAddress">
				<uni-icons type="plusempty" color="#fff" size="16"></uni-icons>
				<text class="text">{{$t('index.address-new')}}</text>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		getAddressList,
		updateDelivery,
		saveDelivery
	} from '@/config/api.js'
	import {
		Moment
	} from '@/utils/moment.js'
	export default {
		name: 'address',
		data() {
			return {
				orderId: '-1', // 进入方式。-1：'我的'页面进入；-2：'填写订单'页面进入；当从'订单详情'进入时等于订单id
				deliveryDate: '',
				addressList: [],
				// startDate: new Moment().format('YYYY-MM-DD')
			}
		},
		computed: {
			hiddenDate() {
				return !['-1', '-2'].includes(this.orderId)
			}
		},
		methods: {
			onDateChange(e) {
				this.deliveryDate = e.detail.value
			},
			handleChoiceAddress() {
				// 1 获取权限状态
				uni.getSetting({
					success(res) {
						//2 获取权限状态 当属性名比较怪异时，都要使用[]形式来获取属性值
						const scopeAddress = res.authSetting['scope.address']
						if (scopeAddress || scopeAddress == undefined) {
							wx.chooseAddress({
								success(e) {
									console.log(e)
								}
							})
						} else {
							//用户曾经取消过授权
							uni.openSetting({
								success(res) {
									//用户从新授权后，再次调用获取收货地址
									uni.chooseAddress({
										success(address) {
											console.log(address)
											// cityName: "广州市"
											// countyName: "海珠区"
											// detailInfo: "新港中路397号"
											// errMsg: "chooseAddress:ok"
											// nationalCode: "510000"
											// postalCode: "510000"
											// provinceName: "广东省"
											// telNumber: "020-81167888"
											// userName: "张三"										
										}
									})
								}
							})
						}
					}
				})
			},
			getAddressList() {
				getAddressList().then(({
					content
				}) => {
					this.addressList = content
				})
			},
			editAddress(item) {
				uni.navigateTo({
					url: `/pages/addAddress/index?addressId=${item.id}&name=${item.receivePerson}&phone=${item.receivePersonPhone}&address=${item.warehouseAddress}&default=${item.isDefault}&version=${item.lockVersion}`
				})
			},
			choseAddress(item) {
				if (this.orderId === '-2') {
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];
					prevPage.$vm.receive = item
					uni.navigateBack();
				} else {
					updateDelivery({
						cartOrderReceiveId: item.id,
						deliveryDate: this.deliveryDate,
						orderId: this.orderId
					}).then(res => {
						setTimeout(() => {
							uni.showToast({
								title: this.$t('index.msg-success')
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1500)
						}, 30)
					})
				}
			},
			addAddress() {
				if (this.orderId !== '-1') {
					uni.navigateTo({
						url: `/pages/addAddress/index?id=${this.orderId}&time=${this.deliveryDate}`
					})
				} else {
					uni.navigateTo({
						url: '/pages/addAddress/index'
					})
				}
			},
			setDefault(item) {
				const params = {
					id: item.id,
					isDefault: true,
					lockVersion: item.lockVersion,
					receivePerson: item.receivePerson,
					receivePersonPhone: item.receivePersonPhone,
					warehouseAddress: item.warehouseAddress,
				}
				let that = this
				saveDelivery(params).then(({
					content
				}) => {
					that.addressList.forEach(address => {
						if (address.isDefault == true) {
							address.isDefault = false
						}
					})
					item.isDefault = true
				})
			}
		},
		onLoad(options) {
			if (options.id) { // 订单详情选择配送、自提地址
				this.orderId = options.id
				this.deliveryDate = options.time || new Moment().format('YYYY-MM-DD')
				uni.setNavigationBarTitle({
					title: this.$t('index.address-choose')
				});
			}
			if (options.type) { // 填写订单选择地址
				this.orderId = '-2'
				uni.setNavigationBarTitle({
					title: this.$t('index.address-choose')
				});
			}
		},
		onShow() {
			this.getAddressList()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 120rpx;
	}

	.list-box {
		height: 108rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 30rpx 0 30rpx;
		padding: 30rpx 30rpx;
		background-color: #FFFFFF;
		box-shadow: 0px 1px 8px 0px rgba(22, 119, 255, 0.08);

		.message {
			display: flex;
			align-items: center;

			.text {
				font-size: 30rpx;
				color: #191A23;

				&.phone {
					margin-left: 30rpx;
				}
			}

			.tag {
				padding: 4px 16rpx;
				color: #fff;
				background: #B60001;
				border: 1rpx solid #B60001;
				font-size: 13px;
				line-height: 1;
				margin-right: 20rpx;
			}

			.tag-1 {
				padding: 4px 16rpx;
				color: #B60001;
				background: rgba(224, 0, 1, 0.1);
				border: 1rpx solid #B60001;
				font-size: 13px;
				line-height: 1;
				margin-right: 20rpx;
			}
		}

		.address {
			font-size: 26rpx;
			color: #99A0AF;
			line-height: 1;
			margin-top: 20rpx;
		}

		.radio {
			font-size: 28rpx;
			color: #B60001;

			// &.disabled {
			// 	color: #99A0AF;
			// }
			// width: 32rpx;
			// height: 32rpx;
			// border: 1rpx solid #D5E2F3;
			// border-radius: 50%;
			// position: relative;
			// transition: border .3s;

			// &::after {
			// 	content: ' ';
			// 	position: absolute;
			// 	width: 16rpx;
			// 	height: 16rpx;
			// 	top: 8rpx;
			// 	left: 8rpx;
			// 	border-radius: 50%;
			// 	transition: background .3s;
			// }

			// &.active {
			// 	border: 1rpx solid #DE0000;

			// 	&::after {
			// 		background-color: #DE0000;
			// 	}
			// }
		}
	}

	.btn-box {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 1;
		padding: 0 30rpx 20rpx;

		.btn {
			height: 96rpx;
			background-color: #086DCA;
			display: flex;
			justify-content: center;
			align-items: center;

			.text {
				font-size: 28rpx;
				color: #FFFFFF;
				margin-left: 20rpx;
			}
		}
	}
</style>