<script setup lang="ts">
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { useGetCurrentLocation } from '../composeabe/GetCurrentLocation';
import AppCofig from '@/common/config/AppCofig';
import LightMap from '../components/LightMap.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
import NavBar from '@/components/nav/NavBar.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Text from '@/components/basic/Text.vue';
import Image from '@/components/basic/Image.vue';
import BoxMid from '@/common/components/box/BoxMid.vue';

const { querys } = useLoadQuerys({
  latitude: AppCofig.defaultLonLat[1],
  longitude: AppCofig.defaultLonLat[0],
  city: ''
}, async (querys) => {
  currentLocation.setCurrentLocationWithCity(querys.city);
});

const currentLocation = useGetCurrentLocation({
  onCityChanged: (city) => {},
});

</script>

<template>
  <FlexCol position="absolute" :top="0" :left="0" :right="0" :zIndex="1000">
    <StatusBarSpace />
    <NavBar leftButton="back" />
    <FlexRow center>
      <BoxMid 
        :innerStyle="{
          width: '500rpx',
        }"
        center
      > 
        <Image src="https://xy.wenlvti.net/app_static/images/home/BadgeNew.png" :width="220" mode="widthFix" />
        <Text text="请选择您要点亮的村社" fontConfig="primaryTitle" />
      </BoxMid>
    </FlexRow>
  </FlexCol>
  <LightMap 
    full
    :city="querys.city"
    :lonlat="currentLocation.currentLonlat.value"
    :isLightMode="true" 
    @getCurrentLonlat="currentLocation.getCurrentExactLocation"
  />
</template>