<script setup lang="ts">
import { useUserStore } from "@/store";
import useEventEmit from "@/hooks/useEventEmit";
import {EventEnum} from "@/constant/enums";
const userStore = useUserStore();
const { t } = useI18n();

// 允许位置访问
const allowLocationAccess = () => {
  userStore.getLocation();
  uni.navigateTo({
    url: '/pages-login/pages/guide-page/notice'
  })
};

// 手动选择位置
const selectLocation = () => {
  uni.navigateTo({
    url: '/pages-user/pages/search-address/index'
  })
};

useEventEmit(EventEnum.CHOOSE_ADDRESS, (data) => {
  console.log('搜索的地址信息', data)
  if(data) {
    userStore.userSetLocation = {
      location: data.displayName,
      longitude: data.location.lng,
      latitude: data.location.lat,
    }
    setTimeout(()=> {
      uni.navigateTo({
        url: '/pages-login/pages/guide-page/notice'
      })
    }, 300)
  }
})
</script>

<template>
  <view class="bg-white flex flex-col">
    <!-- 主要内容区域 -->
    <view
      class="flex-1 flex flex-col items-center justify-center px-40rpx pt-216rpx pb-120rpx"
    >
      <!-- 位置图标 -->
      <image
        src="@img-login/100218.png"
        class="w-256rpx h-256rpx rounded-full"
      />

      <!-- 标题 -->
      <view class="text-center mt-84rpx">
        <text class="text-50-bold">{{ t('pages-login.guide-page.location.title') }}</text>
      </view>

      <!-- 描述文本 -->
      <view class="text-center mt-36rpx mb-86rpx">
        <text class="text-30rpx lh-30rpx text-#999 leading-30rpx">
          {{ t('pages-login.guide-page.location.description') }}
        </text>
      </view>

      <!-- 主要按钮 -->
      <view class="mb-46rpx w-full">
        <button
          class="w-full h-108rpx bg-#14181B rounded-16rpx border-none"
          @click="allowLocationAccess"
        >
          <text class="text-white text-36rpx lh-108rpx"
            >{{ t('pages-login.guide-page.location.allowLocationAccess') }}</text
          >
        </button>
      </view>

      <!-- 次要链接 -->
      <view class="text-center">
        <text class="text-36rpx text-#333" @click="selectLocation">
          {{ t('pages-login.guide-page.location.selectLocation') }}
        </text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #ffffff;
}
</style>
