<template>
	<view class="location_view" v-if="locationShow" :style="{'top':headerHeight+38+'px'}">
		<view class="location_arrows"></view>
		<view class="location_content">
			<view class="location_close" @click="close()">
				<image class="location_close_img" src="../../static/close.png" mode="widthFix"></image>
			</view>
			<view class="location_text">为了更准确定位附近门店，建议您</view>
			<view class="location_btn" @click="handleGetLocation()">开启定位</view>
		</view>
	</view>
</template>

<script setup>
	import { computed,ref,onMounted } from 'vue';
	import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
	import { storeToRefs } from 'pinia';//实现解构付值
	import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
	import { frontstorelist } from '@/server/api';
	const counterStore = useCounterStore(); // 使用 Store
	//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
	const { headerHeight,locationShow,storeName,storeId,latitude,longitude,locationName } = storeToRefs(counterStore);
	const close = () => {
		locationShow.value = false
	}
	const handleGetLocation = () => {
	  // 1. 检查是否已授权
	  uni.getSetting({
	    success: (res) => {
	      if (res.authSetting['scope.userLocation']) {
	        // 已授权，直接获取定位
	        getLocation();
	      } else {
	        // 未授权，发起授权请求
	        uni.authorize({
	          scope: 'scope.userLocation',
	          success: () => getLocation(),
	          fail: () => showAuthGuide()
	        });
	      }
	    }
	  });
	};
	// 获取定位
	const getLocation = () => {
	  uni.getLocation({
	    type: 'gcj02', // 微信小程序必须用 gcj02 坐标系
	    success: (res) => {
			if(!storeName.value){
				locationShow.value = false;
				const params = {latitude:res.latitude,longitude:res.longitude,page:1,limit:1}
				return frontstorelist(params).then(({data}) => {
					storeName.value = data.list[0].name;
					storeId.value = data.list[0].id;
					latitude.value = res.latitude;
					longitude.value = res.longitude;
				})
			}
	    },
	    fail: (err) => {
		  storeName.value = '';
		  storeId.value = '';
		  latitude.value = '';
		  longitude.value = '';
		  locationName.value = "未获取到定位"
		  locationShow.value = true
	    }
	  });
	};
	
	// 引导用户手动开启授权
	const showAuthGuide = () => {
	  uni.showModal({
	    title: '提示',
	    content: '需要位置权限才能使用该功能，是否去设置？',
	    success: (res) => {
	      if (res.confirm) {
	         uni.openSetting(); // 跳转权限设置页
	      }
	    }
	  });
	};
	//生命周期钩子
	onMounted(() => {});
	onShow(() => {
		getLocation();
	});
</script>
<style lang="scss">
	.location_view{
		position: fixed;
		left: 10px;
		z-index: 99;
		.location_arrows{
			margin-left: 40rpx;
			width: 0;
			height: 0;
			border-left: 18rpx solid transparent;
			border-right: 18rpx solid transparent;
			border-bottom: 18rpx solid rgba(0, 0, 0, 0.70);
		}
		.location_content{
			background-color: rgba(0, 0, 0, 0.70);
			border-radius: 20rpx;
			padding: 15rpx;
			display: flex;
			align-items: center;
			justify-content:space-around;
			.location_close{
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.location_close_img{
					width: 35rpx;
					height: 35rpx;
				}
			}
			.location_text{
				font-size: 24rpx;
				color: #FFFFFF;
				margin-right: 20rpx;
			}
			.location_btn{
				background-color: #D9D9D9;
				border-radius: 30rpx;
				font-size: 24rpx;
				color: #000000;
				padding: 8rpx 20rpx 8rpx 20rpx;
			}
		}
	}
</style>