<template>
	<view class="addressStyle" v-if="!isloading" :style="{ height: contentHeight }">
		<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" :style="{ height: '100%' }">
			<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-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,
			msg: {
				Name: '',
				IsDefault: 0,
				Mobile: ''
			},
			source: '',
			defaultId: 0,
			currentAddress: {},
			list: [],
			mc: '',
			addressmsg: {
				Id: 0,
				Name: '',
				Mobile: '',
				Province: '',
				City: '',
				District: '',
				Address: ''
			}
		};
	},
	components: {
		auth
	},
	created() {
		this.contentHeight = this.$utils.calcContentHeight(-40) + 'px';
		this.mainColor = this.$uiConfig.mainColor;
	},
	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'
			});
		}
	}
};
</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-left: 3%;
	margin-top: 30rpx;
}
.addressStyle .bottom_btn .bottom_btn_item {
	width: 48%;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
</style>
