<template>
  <view class="map-container">
    <map
      style="width: 100%; height: 100vh"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
    >
      <cover-view class="map-cover">
        <view class="address">
          <text class="address__detail">{{ addressInfo.title }}</text>
          <text class="address__area">{{ addressInfo.address }}</text>
        </view>
        <view
          class="navigation"
          @tap="handleAddressGo"
          :data-addressinfo="addressInfo"
        >
          <image
            class="navagation-icon"
            src="/static/images/home/navigation.png"
          ></image>
        </view>
      </cover-view>
    </map>
  </view>
</template>

<script>
export default {
  name: "map",
  components: {},
  props: {},
  data() {
    return {
      title: "map",
      latitude: 0,
      longitude: 0,
      markers: [],
      addressInfo: {
        title: "",
        address: "",
        latitude: 29.65945,
        longitude: 121.4405,
      },
    };
  },
  onLoad(options) {
    const data = JSON.parse(options.data);
    this.addressInfo = {
      title: data.title,
      address: data.address,
      latitude: data.y,
      longitude: data.x,
    };
    this.longitude = data.x;
    this.latitude = data.y;
    this.markers = [
      {
        id: 10,
        width: 32,
        height: 52,
        title: data.title,
        longitude: data.x,
        latitude: data.y,
        iconPath: "/static/images/common/point_common.png",
      },
    ];
  },
  methods: {
    handleAddressGo(e) {
      const targetAddress = e.currentTarget.dataset["addressinfo"];
      uni.openLocation({
        latitude: targetAddress.latitude,
        longitude: targetAddress.longitude,
        scale: 5,
        name: targetAddress.title,
        address: targetAddress.address,

        success(res) {
          console.log(res, "wx.getLocation");
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.map {
  .image {
    width: 100%;
    height: 30vh;
  }
}
.map-cover {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: auto;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  white-space: normal; /* 关键，如果父元素flex布局，子元素换行效果 */
  .address {
    display: flex;
    flex-direction: column;
    &__detail {
      font-size: 36rpx;
      line-height: 56rpx;
      font-weight: bold;
    }
    &__area {
      font-size: 26rpx;
      line-height: 48rpx;
    }
  }
  .navigation {
    image {
      width: 96rpx;
      height: 96rpx;
    }
  }
}
</style>
