<template>
	<view class="index">
		<!-- <navbar :Background='Background' :navtitle='navtitle' :navboxshow="navboxshow" @fatherMethod='fatherMethod'>
		</navbar> -->
		<view class="content">
			<view class="content_item flex-between" v-for="(item,index) in list" :key="index" @click="eeInfo(item)">
				<view class="content_itemone flex-start">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view class="content_itemonetext flex-colum-start">
						<view class="content_itemonetextone">
							{{item.title}}
						</view>
						<!-- <view class="content_itemonetexttow">
							<text>5.0分</text>
							<text>销量</text>
						</view> -->
						<view class="content_itemonetextthere">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="content_itemtow">
					{{item.distance}}
				</view>
			</view>
			<view v-if="list.length==0 && is_end == true" class="flex-colum">
				<image :src="bgnothave" mode="aspectFill">
				</image>
			</view>
			<u-loadmore :status="form.status" />

		</view>
		<bottombbar :valuebbar='0'></bottombbar>
	</view>
</template>
<!-- https://cdn.uviewui.com/uview/resources/3c56cbc6216b47db61e37090fdb6619.jpg -->
<script>
	import navbar from '@/components/navbar.vue'
	import bottombbar from '@/components/bottombbar.vue'
	export default {
		components: {
			navbar,
			bottombbar
		},
		data() {
			return {
				navtitle: '美发店', //名称
				navboxshow: '0', //显示
				Background: '#fff',
				list: [],
				bgnothave:uni.getStorageSync('bgnothave'),
				is_end: false,
				lng: '108.95399',
				lat: '34.30997',
				form: {
					page: 1,
					status: 'loadmore',
				},
			}
		},
		async onLoad(e) {
			await this.$onLaunched
			// #ifdef MP-WEIXIN
			this.getAuthorizeInfo() //获取位置请求  金纬度
			// #endif
			uni.pro.navigateTo('index/indexInfo')
			if (!uni.getStorageSync('loginuser')) { //未登录状态
				this.userlogin()
			}
		},
		onShow() {
			
			this.positionindex()
		},
		onReachBottom() {
			this.positionindex()
		},
		methods: {
			// 用户授权
			getAuthorizeInfo() {
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						// 允许授权
						this.getLocationInfo();
					},
					fail: () => {
						// 拒绝授权
						this.openConfirm();
					}
				})
			},
			eeInfo(e) { //跳转
				console.log(e)
				uni.cache.set('store_id', e.id) // 判断显示哪家的作品
				uni.cache.set('details_id', e)
				uni.pro.navigateTo('index/indexInfo')
			},
			// 获取地理位置
			getLocationInfo() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.lng = res.longitude
						this.lat = res.latitude
						this.positionindex()
					},
					fail: (err) => {
						this.positionindex()
						console.log(err, '获取错误')
					}
				});
			},
			// 再次获取授权。当用户第一次拒绝后再次请求授权
			openConfirm() {
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting(); // 打开地图权限设置
						} else if (res.cancel) {
							uni.showToast({
								title: '你拒绝了授权，无法获得周边位置信息',
								icon: 'none',
								duration: 1000
							})
							this.positionindex()
						}
					}
				});
			},
			async userlogin() {
				let res = await this.api.userlogin({
					code: uni.cache.get('weixincode'),
					// #ifdef H5
					code: '0c3KOzFa1lkuMF0enAHa1Eu2xG1KOzFJ'
					// #endif
				})
				try {
					if (res) {
						uni.cache.set('loginuser', res);
						this.positionindex()
					} else {
						uni.cache.set('loginuser', 0);
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			async positionindex() {
				let res = await this.api.positionindex({
					lng: this.lng,
					lat: this.lat,
					page: this.form.page,
				})
				if (res.length == 0) {
					this.is_end = true
					this.form.status = 'nomore'
					return false;
				} else {
					this.form.status = 'loading';
					this.form.page = ++this.form.page;
					setTimeout(() => {
						this.list = [...this.list, ...res];
						if (res.length == 10) {
							this.form.status = 'loading';
						} else {
							this.is_end = true;
							this.form.status = 'nomore';
						}
					}, 500)

				}
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #f9f9f9;
	}

	.index {
		.content {
			padding: 0 28rpx;

			.content_item {
				border-radius: 12rpx;
				background: #fff;
				margin-top: 20rpx;
				padding: 28rpx 24rpx;

				.content_itemone {
					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 20rpx;
					}

					.content_itemonetext {
						width: 300rpx;
						margin-left: 16rpx;
						height: 140rpx;
						justify-content: space-evenly;

						.content_itemonetextone {
							max-width: 300rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 28rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #333333;
						}

						.content_itemonetexttow {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

							text:nth-child(1) {
								font-size: 28rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #f37f2f;
							}

							text:nth-child(2) {
								margin-left: 20rpx;
								font-size: 28rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: 500;
								color: #585858;
							}
						}

						.content_itemonetextthere {
							max-width: 300rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 24rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: 500;
							padding: 5rpx 8rpx;
							border-radius: 10rpx;
							border: 1rpx solid #b1b1b1;
							color: #b1b1b1;
						}
					}
				}

				.content_itemtow {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}

			.flex-colum_image {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;

				text {
					margin-top: 30rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #666666;
				}
			}
		}
	}
</style>