<template>
	<view class="addressStyle" v-if="!isloading" :style="{ height: contentHeight + 'px'}">
		<view style="width: 100%;height: 50px;background: #FFF;padding: 9px 15px;" @click='show=true'>
			<u-search placeholder="根据相关内容搜索" v-model="val" :show-action="false" :disabled='true' ></u-search>
		</view>
		
		<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" :style="{height:(contentHeight-50)+'px'}  ">
			<view v-for="(item, index) in list" :key="index" class="addresbox" @click="chosenHandler(item)">
				<view class="addresclo">
					<Text>收件人：{{ item.Name }}</Text>
					<Text>{{ item.Mobile }}</Text>
				</view>
				<Text style="width: 100%;">收货地址：{{ item.DistrictAddress }}{{ item.Address }}</Text>
				<view style="width: 100%;height: 2rpx;background: #f5f5f5;margin-top: 15rpx;"></view>
				<view class="addresclo">
					<u-checkbox-group @change="isdefault(item)">
						<u-checkbox v-model="item.IsDefault == 1 ? true : false" shape="circle" :active-color="mainColor">
							<Text :style="{ color: item.IsDefault == 1 ? mainColor : '#c8c9cc' }">{{ item.IsDefault == 1 ? '已设为默认' : '设为默认' }}</Text>
						</u-checkbox>
					</u-checkbox-group>
					<view style="display: flex;flex-direction: row;align-items: center;">
						<view style="display: flex;flex-direction: row;align-items: center;" @click.stop="btn_edit(item)">
							<u-icon name="edit" color="#c8c9cc" size="40"></u-icon>
							<Text style="color:#c8c9cc;">编辑</Text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;margin: 0 30rpx" @click.stop="btn_delete(item)">
							<u-icon name="delete" color="#c8c9cc" size="40"></u-icon>
							<Text style="color:#c8c9cc;">删除</Text>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom_btn">
				<view class="bottom_btn_item" :style="{ background: mainColor }" @click="ManualAdd">
					<u-icon name="add-o" color="#fff" size="30"></u-icon>
					<Text style="color:#fff;margin-left: 10rpx;">手动添加</Text>
				</view>
				<!-- TODO 自动获取 -->
				<view class="bottom_btn_item" style="background: #5CBF39;" @click="automatic">
					<u-icon name="location" color="#fff" size="30"></u-icon>
					<Text style="color:#fff;margin-left: 10rpx">自动获取</Text>
				</view>
			</view>
		</scroll-view>
		<u-popup v-model="show"
			mode="right"
			length="70%"
			height='100%'
		>
				<view class="popupbox">
					
					<text class="popupbox_text" style="margin-top: 15px;">收货人</text>
					<view class="popup_item">
						<input class="uni-input inputM" v-model="msg.Name" />
					</view>
					<text class="popupbox_text" style="margin-top: 15px;">手机号码</text>
					<view class="popup_item">
						<input type="number" class="uni-input inputM" v-model="msg.Mobile" />
					</view>
					<text class="popupbox_text" style="margin-top: 15px;">详细地址</text>
					<view class="popup_item">
						<input class="uni-input inputM" v-model="msg.Address" />
					</view>
					
					<view class="popup_b" :style="{height:cHeight+'px'}">
						<view class="popup_b_item" style="background: #FAF8F9;color: #000000;" @click="goreset()">
							<text>重置</text>
						</view>
						<view class="popup_b_item" :style="{background:mainColor }" @click="determine()">
							<text>确定</text>
						</view>
					</view>
				</view>
		</u-popup>
		<!-- 删除的弹框 -->
		<u-modal v-model="showModal" content="确实删除收货地址" :show-cancel-button="true" :show-title="false" @confirm="confirm"></u-modal>
		<u-toast ref="uToast" />
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	</view>
</template>

<script>
import auth from '../../components/auth/index.vue';

export default {
	data() {
		return {
			pageTitle: '收货地址',
			loading: true,
			list: [],
			showAuth: false,
			mainColor: '',
			u: {},
			contentHeight: 0,
			showModal: false,
			deleteID: 0,
			val:'',
			show:false,
			cHeight:0,
			msg: {
				Name: '',
				IsDefault: 0,
				Mobile: '',
				Address:'',
			},
			source: '',
			defaultId: 0,
			currentAddress: {},
			list: [],
			mc: '',
			addressmsg: {
				Id: 0,
				Name: '',
				Mobile: '',
				Province: '',
				City: '',
				District: '',
				Address: ''
			}
		};
	},
	components: {
		auth
	},
	created() {
		this.contentHeight = this.$utils.calcContentHeight(-40) ;
		this.mainColor = this.$uiConfig.mainColor;
		this.cHeight = this.$uiConfig.is_bang ? 60 : 52;
		
	},
	mounted() {
		let currentPages = getCurrentPages();
		let u = '/' + currentPages[currentPages.length - 1].route;
		let pages = wx.getStorageSync('basedata') ? wx.getStorageSync('basedata').bar_title : [];
		pages.forEach(x => {
			if (x.value == u) {
				this.pageTitle = x.new_name ? x.new_name : x.name;
			}
		});
		uni.setNavigationBarTitle({
			title: this.pageTitle
		});
	},
	onLoad(option) {
		this.u = uni.getStorageSync('mall_UserInfo');
		if (!this.u) {
			this.u = {
				nickName: '未登录',
				avatarUrl: ''
			};
			this.showAuth = true;
		} else {
			this.init();
		}
		if (option && option.form) {
			(this.source = option.form), (this.defaultId = option.id);
		}
	},
	methods: {
		chosenHandler(item) {
			console.log('chosenHandler', item);
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2];
			prevPage.$vm.formData.address_id = item.Id;
			prevPage.$vm.formdata.AddressId = item.Id;
			prevPage.$vm.adressInfo = item;
			uni.navigateBack({
				delta: 1
			});
		},
		init() {
			this.loading = false;
			uni.showNavigationBarLoading();

			this.request2(
				{
					url: '/api/AppletUser/GetUserShippingAddressList',
					data: this.msg
				},
				res => {
					uni.hideNavigationBarLoading();
					if (res.resultCode == 1) {
						this.isloading = false;
						this.list = res.data;
					}
				}
			);
		},
		reloadUserinfo() {
			this.u = uni.getStorageSync('mall_UserInfo');
			// this.showAuth = false;
			this.init();
		},
		//关闭登录窗口
		gbAuth() {
			uni.navigateBack();
		},
		isdefault(item) {
			//设置默认地址
			uni.showNavigationBarLoading();
			this.request2(
				{
					url: '/api/AppletUser/SetUserShippingAddressDefault',
					data: {
						AddressId: item.Id
					}
				},

				res => {
					this.init();
					uni.hideNavigationBarLoading();
				}
			);
		},
		btn_edit(item) {
			uni.navigateTo({
				url: '/pages/address/AddAddress?AddressId=' + item.Id
			});
		},
		btn_delete(item) {
			this.deleteID = item.Id;
			this.showModal = true;
		},
		confirm() {
			uni.showNavigationBarLoading();
			this.request2(
				{
					url: '/api/AppletUser/DelUserShippingAddress',
					data: {
						AddressId: this.deleteID
					}
				},

				res => {
					this.init();
					uni.hideNavigationBarLoading();
				}
			);
		},
		automatic() {
			// this.$refs.uToast.show({
			//   title: "正在开发,敬请期待！"
			// });

			let that = this;
			if (wx.chooseAddress) {
				wx.chooseAddress({
					success: function(res) {
						console.log(res);
						let nameList = [res.provinceName, res.cityName, res.countyName];
						that.addressmsg.Name = res.userName;
						that.addressmsg.Mobile = res.telNumber;
						that.addressmsg.Address = res.detailInfo;
						that.getDestination(nameList);
					},
					fail: function(err) {
						that.$refs.uToast.show({
							title: '授权失败，请重新点击自动获取',
							type: 'error'
						});
					}
				});
			} else {
				that.$refs.uToast.show({
					title: '当前微信版本不支持自动获取收货地址',
					type: 'error'
				});
			}
		},
		getDestination(nameList) {
			this.request2(
				{
					url: '/api/AppletUser/GetDestinationListByNames',
					data: {
						area: nameList
					}
				},

				res => {
					console.log('res', res);
					this.addressmsg.Province = res.data[0].ID;
					this.addressmsg.City = res.data[1].ID;
					this.addressmsg.District = res.data[2].ID;
					if (res.data.length > 0) {
						this.request2(
							{
								url: '/api/AppletUser/SetUserShippingAddress',
								data: this.addressmsg
							},
							res => {
								uni.showToast({ title: '保存成功', icon: 'none' });
								this.init();
							}
						);
					}
				}
			);
		},
		ManualAdd() {
			//手动添加
			uni.navigateTo({
				url: '/pages/address/AddAddress'
			});
		},
		
		goreset(){//重置
		
			this.show=false;
			this.msg.Name='';
			this.msg.Mobile='';
			this.msg.Address='';
			
			this.init()
		},
		determine(){//确认
			
			this.show=false
			this.init()
		},
	}
};
</script>

<style>
.addressStyle {
	background: #f3f4f6;
}
.addressStyle .addresbox {
	width: 94%;
	margin-left: 3%;
	border-radius: 10rpx;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	padding: 0 20rpx;
	margin-top: 30rpx;
}
.addressStyle .addresclo {
	display: flex;
	flex-direction: row;
	width: 100%;
	padding: 20rpx 0;
	align-items: center;
	justify-content: space-between;
}
.addressStyle .bottom_btn {
	width: 94%;
	height: 90rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	
	margin: 30rpx 3%;
}
.addressStyle .bottom_btn .bottom_btn_item {
	width: 48%;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.addressStyle .popupbox{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		
	}
	.addressStyle .popupbox_text{
		font-size: 12px;
		color: #111111;
		margin-left: 5%;
	}
	.addressStyle .popup_item{
		width: 90%;
		height: 35px;
		margin-left: 5%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 5px;
		margin-top: 10px;
		background: #F1F1F1;
	}
	.addressStyle .inputM{
		width: 100%;
	}
	.addressStyle .popup_b{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #FFFFFF;
		
	}
	.addressStyle .popup_b_item{
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		font-size: 14px;
		padding-top: 15px;
	}
</style>
