<template>
  <view class="map-container" :style="{ height: height + 'px' }">
    <map
      v-if="showMap"
      :style="{ width: '100%', height: '100%' }"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      :scale="scale"
      :show-location="showLocation"
      @markertap="onMarkerTap"
    />
    <view v-else class="flex items-center justify-center h-full bg-gray-100">
      <text class="text-gray-400">地图加载中...</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  latitude: number
  longitude: number
  height?: number
  scale?: number
  showLocation?: boolean
  title?: string
  address?: string
}

const props = withDefaults(defineProps<Props>(), {
  height: 200,
  scale: 15,
  showLocation: true,
  title: '',
  address: '',
})

const showMap = computed(() => {
  return props.latitude !== 0 && props.longitude !== 0
})

const markers = computed(() => {
  return [{
    id: 1,
    latitude: props.latitude,
    longitude: props.longitude,
    title: props.title,
    iconPath: '/static/images/location.png',
    width: 32,
    height: 32,
  }]
})

function onMarkerTap() {
  // 打开导航
  uni.openLocation({
    latitude: props.latitude,
    longitude: props.longitude,
    name: props.title,
    address: props.address,
  })
}
</script>
