import { Image } from 'ant-design-vue';

<template>
  <div>
    <a-button
      type="link"
      target="_blank"
      :href="
        'https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=' +
        locationY +
        '&pointy=' +
        locationX +
        '&name=' +
        label +
        '&ref=yudao'
      "
    >
      <Image
        :src="
          'https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|' +
          locationX +
          ',' +
          locationY +
          '&key=' +
          qqMapKey +
          '&size=250*180'
        "
      />
      <Icon icon="ep:location" />
      {{ label }}
    </a-button>
  </div>
</template>
<script lang="ts" setup name="WxLocation">
import { Image } from 'ant-design-vue'
import Icon from '@/components/Icon'

const props = defineProps({
  locationX: {
    required: true,
    type: Number
  },
  locationY: {
    required: true,
    type: Number
  },
  label: {
    // 地名
    required: true,
    type: String
  },
  qqMapKey: {
    // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
    required: false,
    type: String,
    default: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E' // 需要自定义
  }
})
defineExpose({
  locationX: props.locationX,
  locationY: props.locationY,
  label: props.label,
  qqMapKey: props.qqMapKey
})
</script>