<template>
	<view class="nav" :style="{ height: navBarHeight + 'px' }">
		<view class="capsule-box"
			:style="{height: menuHeight + 'px',minHeight: menuHeight + 'px',lineHeight: menuHeight + 'px',bottom: menuBottom + 'px'}">
			<view class="nav-handle">
				<view class="back" style="display: flex;flex-direction: row;align-items: center;">
					<!-- 返回按钮 -->
					<u-icon name="map-fill" color="#e34369" size="18"></u-icon>
					<span style="font-size: 26rpx;color: #333333;">{{city}}</span>
				</view>
			</view>
			<view class="nav-title">
				<image class="init_image" src="../../static/logo.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import QQMapWX from '../../common/qqmap-wx-jssdk.js'
	export default {
		data() {
			return {
				navBarHeight: getApp().globalData.navBarHeight + 7,
				menuBottom: 10,
				menuHeight: getApp().globalData.menuHeight,
				city: '定位中',
				longitude: '',
				latitude: ''
			};
		},
		created() {
			this.getuserlocation()
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			getuserlocation() {
				//获取城市
				let that = this
				// 实例化腾讯API核心类
				let qqmapsdk = new QQMapWX({
					key: "FGWBZ-M3DR4-D62UT-KY2AM-ZEUJ7-DGBYM"
				});
				//如果本地没有存储就通过uni.getLocation获取当前位置的经纬度
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						console.log(res)
						// 通过经纬度获取当前城市信息
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: function(res1) {
								that.city = res1.result.ad_info.city;
								uni.setStorageSync('city', res1.result.ad_info.city)
							},
							fail: function(res) {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						})
					},
					fail: function() {
						uni.showToast({
							title: "当前位置信息获取失败",
							icon: 'none'
						})
					}
				})

			},
		}
	}
</script>

<style>
	.nav {
		width: 100%;
		background-color: #f3d4d7;
	}


	.back {
		margin-left: 30rpx;
	}

	/* // 胶囊栏 */
	.capsule-box {
		width: 100%;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.nav-handle {
		position: absolute;
		left: 0;
	}

	/* // 标题文字 */
	.nav-title {
		height: 44rpx;
		width: 96rpx;
		/* // 标题栏横向居中 */
		margin: 0 auto;
		/* // 文字超出隐藏 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.logoInit {
		height: 44rpx;
		width: 96rpx;
	}
</style>