<template>
  <view class="location-select">
    <view class="map">
      <map
        id="myMap"
        ref="mapRef"
        class="map-box"
        @poitap="locationChange"
        scale="16"
        :latitude="latitud.latitude"
        :longitude="latitud.longitude"
        :markers="markers"
        :circles="circles"
        show-location
        show-compass
      >
        <view class="place-add">
          <view style="add-text: 20rpx">可以在当前范围内点击重新选择打卡地点</view>
        </view>
      </map>
    </view>
    <view class="location">
      <view class="address"> {{ address }}</view>
      <!-- 打卡 -->
      <view class="sign-box">
        <view class="sign-in" @click="signFn">
          <view>打卡</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { getCurrentInstance, ref, reactive } from 'vue'
import { getWxLocationApi } from '@/wxUtils/index'
import { qqmapsdk } from '@/wxUtils/QQMapWX'
import { getDistance } from '@/utils/index'
import { useTask } from '@/store/task'

const { ctx }: any = getCurrentInstance()

const taskStore = useTask()

const mapRef = ref()

const latitud = reactive({
  latitude: 39.909,
  longitude: 116.39742
})
const markers = ref<any[]>([])
const circles = ref<any[]>([])
const myMap = ref()
const taskFiledKey = ref()
onLoad(async (e: any) => {
  taskFiledKey.value = e?.taskFiledKey
  myMap.value = uni.createMapContext('myMap', ctx)
  await getLocation()
})

const address = ref()
const getLocation = async () => {
  try {
    const res: any = await getWxLocationApi()
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: res?.latitude,
        longitude: res?.longitude
      },
      success: function (res: any) {
        const result = res.result
        address.value = result.address
      }
    })
    latitud.latitude = res?.latitude
    latitud.longitude = res?.longitude
    setMarkers()
    setRegion()
  } catch (e) {
    uni.showToast({
      title: '获取定位失败',
      icon: 'none'
    })
    console.log(e)
  }
}
//  设置marker
const setMarkers = () => {
  markers.value = [
    {
      id: Number(new Date()),
      latitude: latitud.latitude,
      longitude: latitud.longitude,
      width: 25,
      height: 35
    }
  ]
}
// 打卡半径
const mapRadius = 100
const setRegion = () => {
  myMap.value.getRegion({
    success() {
      circles.value = [
        {
          latitude: latitud.latitude,
          longitude: latitud.longitude,
          color: '#ffffff',
          fillColor: '#7cb5ec88',
          radius: mapRadius,
          strokeWidth: 2
        }
      ]
    }
  })
}

const signFn = () => {
  const obj = {
    sendParamsKey: taskFiledKey.value,
    value: address.value
  }
  // 将选中的地址存在store中
  taskStore.setLocationSelect(obj)
  uni.navigateBack()
}
const locationChange = async (e: any) => {
  console.log('e', e)
  let point = e.detail
  if (point.longitude && point.latitude) {
    let distance =
      getDistance(point.longitude, point.latitude, latitud.longitude, latitud.latitude) * 1000
    // 超出打卡范围
    if (distance > mapRadius) {
      return uni.showToast({
        title: '不能超出打卡范围',
        icon: 'none'
      })
    }
    // 根据打卡地点获取对应名称
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: point?.latitude,
        longitude: point?.longitude
      },
      success: function (r: any) {
        let locationInfo: string
        const res = r.result
        let ad = res.address_component
        let ar = res.address_reference
        if (ad.province === ad.city) {
          locationInfo = ad.city + ad.district + ar.town.title
        } else {
          locationInfo = ad.province + ad.city + ad.district + ar.town.title
        }
        address.value = locationInfo + point.name
      },
      fail(err: any) {
        console.log('err', err)
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.location-select {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .map {
    height: 800rpx;
    .map-box {
      width: 100%;
      height: 800rpx;
      position: relative;
      .place-add {
        box-sizing: border-box;
        position: absolute;
        width: 700rpx;
        text-align: center;
        bottom: 50rpx;
        left: 25rpx;
        background-color: #fff;
        box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        line-height: 80rpx;
        display: flex;
        padding: 0 30rpx;
        font-size: 26rpx;
        color: #666;
      }
    }
  }
  .location {
    background: #fff;
    padding: 42rpx;
    position: relative;
    height: calc(100vh - 800rpx);
    .address {
      margin-top: 50rpx;
      font-size: 28rpx;
      color: #000;
      text-align: center;
    }
    .sign-box {
      margin-top: 150rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .sign-in {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        background-color: #6eb657;
        text-align: center;
        line-height: 160rpx;
        font-size: 36rpx;
        color: #fff;
        font-weight: 600;
      }
    }
  }
}
</style>
