<template>
  <view v-if="flag" class="map">
    <iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="src">
    </iframe>
    <view class="complete">
      <u-button type="primary" @tap="submit" style="margin-right: 30rpx"
        >完成</u-button
      >
    </view>
  </view>
  <positionPopup ref="positionRef" v-model:show="show" />
</template>

<script setup lang="ts">
import { toast } from "@/utils/util";
import { useMapStore } from "@/stores/modules/mapStore";
import positionPopup from "./components/positionPopup.vue";

const mapStore = useMapStore();

const state = reactive({
  key: "3M5BZ-SFCRJ-AHSF7-XRA5Q-Y6NIJ-DXBH4",
  coord: "",
});

const src = ref();
const flag = ref(false);
const show = ref(false);
const addrDetail = ref();
const positionRef = ref();

const submit = () => {
  console.log(addrDetail.value, "addrDetail.value");

  if (!addrDetail.value) return toast("请选择地址");
  const Longitude =
    addrDetail.value.latlng.lat + "," + addrDetail.value.latlng.lng;
  mapStore.setMapData({
    ...mapStore.mapData,
    ...{ hitArea: addrDetail.value.poiaddress, Longitude },
  });
  show.value = true;
  setTimeout(() => {
    positionRef.value.init();
    console.log("location", addrDetail.value);
  }, 100);
  // uni.navigateTo({
  //   url: "/pagesTeach/setPositioning/setAttendance",
  //   success() {
  //     const Longitude =
  //       addrDetail.value.latlng.lat + "," + addrDetail.value.latlng.lng;
  //     mapStore.setMapData({
  //       ...mapStore.mapData,
  //       ...{ hitArea: addrDetail.value.poiaddress, Longitude },
  //     });
  //   },
  // });
};

const setPosition = (event: any) => {
  // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
  var loc = event.data;
  if (loc && loc.module == "locationPicker") {
    //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
    addrDetail.value = loc;
  }
};

onReady(() => {
  // positionRef.value.initRules();
});

onMounted(() => {
  if (mapStore.mapData.StateType) {
    state.coord = mapStore.mapData.Longitude;
    console.log(mapStore.mapData, state.coord, "state.coord ");
    src.value = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${state.key}&referer=XBRLPX&coord=${state.coord}&zoom=18`;
    setTimeout(() => {
      flag.value = true;
    }, 300);
  } else {
    uni.getLocation({
      type: "gcj02",
      success(res: any) {
        console.log(res, "gcj02");
        state.coord = res.latitude + "," + res.longitude;
        src.value = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${state.key}&referer=XBRLPX&coord=${state.coord}&zoom=18`;
        setTimeout(() => {
          flag.value = true;
        }, 300);
      },
      fail: function (res: any) {
        console.log(res);
      },
    });
  }
  setTimeout(() => {
    window.addEventListener("message", setPosition, false);
  }, 100);
});

onBackPress(() => {
  window.removeEventListener("message", setPosition, false);
  flag.value = false;
});
</script>

<style lang="scss" scoped>
.map {
  position: relative;
  width: 100%;
  height: 100vh;

  .complete {
    position: absolute;
    top: 46%;
    right: -2%;
    z-index: 9;
    .u-btn {
      padding: 12rpx;
      height: 58rpx;
      background: #04a7ff;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      opacity: 1;
    }
  }
}
</style>
