<template>
  <div 
    class="mini-village-map" 
    :style="{
      borderColor: themeContext.resolveThemeColor('primary'),
    }"
  >
    <map 
      id="prevMap"
      map-id="prevMap"
      class="mini-village-map-map"
      :markers="markers"
      :scale="15"
      :longitude="lonlat.longitude"
      :latitude="lonlat.latitude"
    />

    
    <FlexCol v-if="!isValidLonlat" 
      gap="gap.xl" 
      position="absolute" 
      inset="0" 
      center 
    > 
      <FlexCol center gap="gap.md" padding="padding.md" backgroundColor="white" radius="radius.md">
        <Text fontConfig="importantTitle" textAlign="center">经纬度无效，无法显示地图</Text>
      </FlexCol>
    </FlexCol>

    <NoticeBar 
      v-if="currentNoticeContent"
      :content="currentNoticeContent"
      :innerStyle="{
        position: 'absolute',
        top: '20rpx',
        left: '20rpx',
        right: '20rpx',
        zIndex: 100,
        borderRadius: '30rpx',
      }"
      :textStyle="{
        fontSize: '26rpx',
      }"
      icon="https://xy.wenlvti.net/app_static/images/home/IconLightActive.png"
      :iconProps="{
        size: 34,
      }"
      textColor="#C9211F"
      backgroundColor="#D9492E10"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance } from 'vue';
import { useTheme } from '@/components/theme/ThemeDefine';
import NoticeBar from '@/components/display/NoticeBar.vue';
import type { MapMarker } from '@/types/Map';
import ImagesUrls from '@/common/config/ImagesUrls';
import FlexCol from '@/components/layout/FlexCol.vue';
import Text from '@/components/basic/Text.vue';

const emit = defineEmits(['getedCurrentLonlat']);
const props = withDefaults(defineProps<{
  markers?: MapMarker[];
  currentNoticeContent?: string;
  lonlat?: { longitude: number, latitude: number } | undefined;
}>(), {
  currentNoticeContent: '目前厦门市已被点亮一个社区，刚刚小亮贡献了10个光源，让湖里区点亮了一个社区',
  lonlat: () => ({
    longitude: 0,
    latitude: 0,
  }),
});

const isValidLonlat = computed(() => {
  return (
    props.lonlat && props.lonlat.longitude && props.lonlat.latitude &&
    !isNaN(props.lonlat.longitude) && !isNaN(props.lonlat.latitude) &&
    props.lonlat.longitude > -180 && props.lonlat.longitude < 180 && props.lonlat.latitude > -90 && props.lonlat.latitude < 90
  );
});

const themeContext = useTheme();
const markers = computed(() => {
  return (props.markers || []).concat(isValidLonlat.value ? [
    {
      id: 1,
      longitude: props.lonlat.longitude,
      latitude: props.lonlat.latitude,
      width: 30,
      height: 30,
      iconPath: ImagesUrls.IconMarker,
    } 
  ] : []);
});
</script>

<style lang="scss">
.mini-village-map {
  position: relative;
  width: 100%;
  height: 300rpx;
  border-radius: 20rpx;
  overflow: hidden;
  border-style: solid;
  border-width: 1px;

  .mini-village-map-map {
    width: 100%;
    height: 340rpx;
  }
}
</style>