<template>
	<view class="add_box">
		<view class="address_box" >
			<view class="address_item" v-for="item in addressData" :key="item.name">
				<view class="top_box">
					<view class="top_item">
						<view class="top">
							<span class="name_txt">{{item.name}}</span>
							<span class="phone_txt">{{item.phone}}</span>
						</view>
						<view class="bottom">
							{{item.address}}
						</view>
					</view>
					<view class="edit_box">
						<view class="img_box">
							<image class="img" src="../../../static/image/edit.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="bottom_item">
					<view v-if="item.status == 0" class="no_checked"></view>
					<view  v-if="item.status == 1" class="checked">
						<p class="item"></p>
					</view>
					<p class="no_default"  v-if="item.status == 0">设为默认</p>
					<p  v-if="item.status == 1" class="default_txt">默认地址</p>
				</view>
			</view>
		</view>
		<view class="btn_box">
			<p class="btn" @click="handleAdd">添加新地址</p>
		</view>
		<view class="pop_box">
			<uni-popup ref="popup" style="width: 100%;" background-color="#fff" >
				<view class="popup-content" >
					<view class="title_box">
						<view class="tit_txt">
							新增地址
						</view>
						<view class="image_box">
							<image class="img" src="../../../static/image/cancel.png" mode=""></image>
						</view>
					</view>
					<view class="content_box">
						<view class="content_item">
							<view class="left_item">
								收货人：
							</view>
							<view class="right_item">
								张三
							</view>
						</view>
						<view class="content_item">
							<view class="left_item">
								联系电话：
							</view>
							<view class="right_item">
								15612345678
							</view>
						</view>
						<view class="content_item">
							<view class="left_item">
								位置：
							</view>
							<!-- <view class="right_item">
								山东省青岛市市北区
							</view> -->
							<!-- <view class="right_icon" @click="changeAddress">
								<image src="../../../static/image/icon-arrow-right.png"></image>
							</view> -->
							<picker class="picker_box" :range="locationArr" @change="cityChange" mode="multiSelector"
								@columnchange="columnchange" :value="multiIndex">
								<view class="city_box" v-if="province !== '' && city !== ''">
									{{province}} / {{city}} {{district ? '/' : ''}} {{district}}
								</view>
								<view class="city_box" v-if="province == '' && city == '' && district == ''">
									<span style="color: #999;">请选择地区</span>
								</view>
							</picker>
						</view>
						<view class="content_item">
							<view class="left_item">
								详细地址：
							</view>
							<view class="right_item">
								大港街道大港三路8号铁路住宅小区6号楼大港街道大港三路8号铁路住宅小区6号楼
							</view>
							<view class="right_icon" @click="handlePosition">
								<image src="../../../static/image/position.png"></image>
							</view>
						</view>
					</view>
					<view class="button_box">
						<p class="btn">删除</p>
						<p class="btn">保存</p>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- <uni-load-more iconType="circle" :status="status" @clickLoadMore="loadMore"
			:content-text="contentText"></uni-load-more> -->
	</view>
</template>

<script>
	import allCityData from "../../../util/all_city.json"
	export default {
		data() {
			return {
				imgPrefix: getApp().globalData.imgPrefix,
				locationArr: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				province:'',
				city:'',
				district:'',
				addressData: [
					{name:'张三',phone:'15612345678',address:'山东省青岛市市北区大港街道大港三路8号铁路住宅小区6号楼6单元666室',status:1},
					{name:'张三',phone:'15612345678',address:'山东省青岛市市北区大港街道大港三路8号铁路住宅小区6号楼6单元666室',status:0},
				],
				allCityData,
				current: 0,
				size: 10,
				hasMore: true,
				status: '',
				contentText: {
					contentdown: "点击查看更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了",
				}
			}
		},
		onLoad() {
			this.getData()
			let userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.userInfo = JSON.parse(userInfo);
				if (this.userInfo.id != undefined) {
					this.loadMore();
				}
			}
		},
		methods: {
			// 获取地区数据
			getData() {
				console.log(this.allCityData)
				this.allCityData.map(item => {
					this.locationArr[0].push(item.province);
				})
				this.allCityData[0].citys[0].areas.map(item => {
					this.locationArr[1].push(item.area)
				})
			
				console.log(this.locationArr)
			},
			cityChange(e) {
				console.log(e)
				this.multiIndex = e.detail.value;
				console.log(this.locationArr)
				this.province = this.locationArr[0][this.multiIndex[0]]
				this.city = this.locationArr[1][this.multiIndex[1]]
				this.district = this.locationArr[2][this.multiIndex[2]]
			},
			columnchange(e) {
				let value = e.detail.value;
				console.log(e.detail)
				if (e.detail.column == 0) {
					this.locationArr[1] = [];
					this.locationArr[2] = []
					let tmp = this.allCityData.find(item => item.province == this.locationArr[0][value])
					console.log(tmp)
					if (tmp.citys.length == 1) {
						tmp.citys[0].areas.map(item => {
							this.locationArr[1].push(item.area)
						})
					} else {
						tmp.citys.map(item => {
							this.locationArr[1].push(item.city)
						})
						tmp.citys[0].areas.map(item => {
							this.locationArr[2].push(item.area);
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex = [value, 0, 0]
			
				}
				if (e.detail.column == 1) {
					this.locationArr[2] = [];
					this.multiIndex[1] = value;
					if (this.allCityData[this.multiIndex[0]].citys.length !== 1) {
						this.allCityData[this.multiIndex[0]].citys[value].areas.map(item => {
							this.locationArr[2].push(item.area)
						})
					}
					this.multiIndex.splice(2, 1, 0)
					console.log(this.multiIndex)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					this.multiIndex[2] = e.detail.value
				}
			},
			// 添加地址
			handleAdd(){
				this.$refs.popup.open('bottom')
			},
			// 定位
			handlePosition(){
				uni.getLocation({
					type:" wgs84",
					isHighAccuracy:true,
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						uni.request({
							url:`https://restapi.amap.com/v3/geocode/regeo?location=${res.longitude},${res.latitude}&key=b8e2796701c731e4a97f4d0bc4e51385&radius=1000&extensions=all`,
							method:"get",
							success: res => {
								console.log(res.data)
								this.province = res.data.regeocode.addressComponent.province;
								this.city = res.data.regeocode.addressComponent.city;
								this.district = res.data.regeocode.addressComponent.district;
								console.log(this.province)
								this.allCityData.map(item1 =>{
									if(item1.province == this.province){
										item1.citys.map(item2 =>{
											this.locationArr[1].push(item2.city)
											if(item2.city == this.city){
												item2.areas.map(item3 =>{
													this.locationArr[2].push(item3.area)
												})
											}
										})
									}
								})
								console.log(this.locationArr)
								this.locationArr[0].map((item,index) =>{
									if(item == this.province){
										this.multiIndex[0] = index
									}
								});
								this.locationArr[1].map((item,index) =>{
									if(item == this.city){
										this.multiIndex[1] = index
									}
								});
								this.locationArr[2].map((item,index) =>{
									if(item == this.district){
										this.multiIndex[2] = index
									}
								})
							}
						})
					}
				})
			},
			//加载更多
			loadMore() {
				console.log('loadmore')
				if (this.hasMore) {
					this.current = this.current + 1;
					this.staus = 'loading';
					uni.request({
						url: getApp().globalData.baseUrl + '/address/list?userId=' + this.userInfo.id + '&current=' + this
							.current + '&size=' + this.size,
						method: 'GET',
						success: (res) => {
							if (res.data.code == 200) {
								this.addressData = this.addressData.concat(res.data.data.records);
								if (res.data.data.records.length == 0 || res.data.data.total < this.size) {
									this.hasMore = false;
									this.status = 'nomore';
								} else {
									this.status = 'more';
								}
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						},
					})
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.add_box {
		width: 100%;
		height: 100%;

		.address_box {
			height: 82%;
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			margin: 0 auto;
			margin-top: 30rpx;

			.address_item {
				width: 100%;
				height: 255rpx;
				border-bottom: 1rpx solid #F2F2F2;
				display: flex;
				flex-direction: column;
				
				.bottom_item{
					width: 100%;
					height: 25%;
					display: flex;
					align-items: center;
					.no_checked{
						width: 28rpx;
						height: 28rpx;
						background: #FFFFFF;
						border: 1rpx solid #666666;
						border-radius: 50%;
						margin: 0 30rpx;
					}
					
					.checked{
						width: 28rpx;
						height: 28rpx;
						background: #FFFFFF;
						border: 1rpx solid #D73232;
						border-radius: 50%;
						margin: 0 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.item{
							width: 16rpx;
							height: 16rpx;
							background: #D73232;
							border-radius: 50%;
						}
					}
					
					.default_txt{
						font-size: 22rpx;
						color: #D73232;
					}
					.no_default{
						color: #B8B8B8;
						font-size: 22rpx;
					}
				}
				
				.top_box{
					width: 100%;
					height: 75%;
					display: flex;
					.top_item{
						width: 85%;
						margin-left: 30rpx;
						.top{
							margin-top: 30rpx;
							display: flex;
							height: 40rpx;
							align-items: flex-end;
							
							.name_txt{
								font-size: 28rpx;
								color: #333;
								font-weight: bold;
							}
							
							.phone_txt{
								font-size: 22rpx;
								color: #999;
								margin-left: 20rpx;
							}
						}
						
						.bottom {
							width: 484rpx;
							height: 74rpx;
							font-size: 26rpx;
							color: #333;
							margin-top: 20rpx;
							line-height: 40rpx;
						}
					}
				}
				.edit_box{
					height: 100%;
					display: flex;
					align-items: center;
					
					.img_box{
						width: 44rpx;
						height: 44rpx;
					}
					
					.img{
						width: 100%;
						height: 100%;
					}
				}
				
			}
		}
		.btn_box{
			width: 100%;
			height: 150rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: center;
			
			.btn{
				width: 690rpx;
				height: 78rpx;
				background: #D73232;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 28rpx;
				margin-top: 30rpx;
			}
		}
		.pop_box{
			width: 100%;
			/deep/ .uni-popup{
				width: 100%;
			}
			.popup-content{
				width: 100%;
				background: #fff;
				padding-top: 40rpx;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				
				
				.title_box{
					width:100%;
					height: 50rpx;
					display: flex;
					align-items: center;
					// justify-content: space-between;
					
					.tit_txt{
						width: 90%;
						text-align: center;
						font-weight: bold;
						font-size: 36rpx;
						color: #000;
					}
					
					.image_box{
						width: 44rpx;
						height: 44rpx;
						
						.img{
							width: 100%;
							height: 100%;
						}
					}
				}
				
				.content_box{
					width: 100%;
					margin-top: 20rpx;
					.content_item{
						width: 100%;
						padding: 30rpx 0;
						display: flex;
						align-items: center;
						border: 1rpx solid #F2F2F2;
						
						.left_item{
							width:140rpx;
							height: 100%;
							display: flex;
							align-items: center;
							margin-left: 30rpx;
							font-size: 26rpx;
							color: #333;
						}
						
						.right_item{
							width: 406rpx;
							height: 100%;
							display: flex;
							align-items: center;
							margin-left: 30rpx;
							font-size: 26rpx;
							color: #333;
						}
						
						.right_icon{
							width: 44rpx;
							height: 44rpx;
							margin-left: 66rpx;
							
							image{
								width: 100%;
								height: 100%;
							}
						}
					}
				}
				
				.button_box{
					width: 100%;
					height: 120rpx;
					display: flex;
					margin-top: 20px;
					align-items: center;
					justify-content: center;
					
					.btn{
						width: 320rpx;
						height: 78rpx;
						background: #FFFFFF;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						border: 1rpx solid #D73232;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;
						color: #D73232;
						
						&:last-child{
							background: #D73232;
							margin-left: 50rpx;
							color: #FFFFFF;
						}
					}
				}
			}
			
		}
	}
</style>