<template>
  <view class="store-address" @click="openMap">
    <view class="text-container">
      <text class="location-label"
        >位于 [{{ orderData.commodityAddress }}]</text
      >
      <text class="address-text">{{ orderData.commodityAddress }}</text>
    </view>
    <image
      class="loc-icon"
      src="./images/loc_icon_img.png"
      mode="aspectFit"
    ></image>
  </view>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  orderData: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

// 打开地图
const openMap = () => {
  const address = props.orderData.commodityAddress;
  const latitude = Number(props.orderData.commodityLatitude);
  const longitude = Number(props.orderData.commodityLongitude);

  uni.getLocation({
    type: "gcj02", //返回可以用于uni.openLocation的经纬度
    success: (res) => {
      console.log("当前经纬度", latitude, longitude);

      uni.openLocation({
        latitude: latitude,
        longitude: longitude,
        address: address,
        success: () => {
          console.log("success");
        },
      });
    },
  });
};
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
