<template>
  <!-- <headers title="考勤地点设置" :is-button="false" @submit="submit" /> -->
  <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"
        size="mini"
        @tap="submit"
        style="margin-right: 30rpx"
        >下一步</u-button
      >
    </view>
  </view>
</template>

<script setup lang="ts">
import headers from "@/components/header/index.vue"
import { toast, zconfirm } from "@/utils/util"
import { useMapStore } from "@/store/modules/mapStore"

const mapStore = useMapStore()

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

const src = ref()
const flag = ref(false)
const addrDetail = ref()

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

const submit = () => {
  if (!addrDetail.value) return toast("请选择地址")
  console.log("location", addrDetail.value)
  uni.navigateTo({
    url: "/pages/setPositioning/setAttendance",
    success() {
      const Longitude =
        addrDetail.value.latlng.lat + "," + addrDetail.value.latlng.lng
      mapStore.setMapData({
        ...mapStore.mapData,
        ...{ hitArea: addrDetail.value.poiaddress, Longitude },
      })
    },
  })
  setTimeout(function () {
    console.log(mapStore.mapData, "mapStore.mapData")
  }, 10)
}

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)
        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)
      },
    })
  }
})
</script>

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

  .complete {
    position: absolute;
    top: 5.5%;
    right: -3%;
  }
}
</style>
