<template>
	<!--  :polyline="polyline" -->
  <map
    v-if="isMap"
    @markertap="goMap($event, covers[1].latitude, covers[1].longitude)"
    @callouttap="goMap($event, covers[1].latitude, covers[1].longitude)"
    style="width: 100vw; flex: 1"
    :longitude="midCovers[0]"
    :latitude="midCovers[1]"
    :markers="covers"
    :scale="scale"
  >
  </map>
</template>

<script lang="ts" setup >
import { cleatStorage, getStorage } from '@/utils/storage'
import toast from '@/utils/toast'
import { onLoad,onUnload } from '@dcloudio/uni-app'
import { ref } from 'vue'

const scale = ref<number>(14) // 地图缩放
/***************************************************************
 * 收集传递信息
 */
const vendorID = ref<number>(0)
const vendorOrderID = ref<number>(0)
onLoad(async (options: any) => {
  vendorID.value = options.vendorID
  vendorOrderID.value = options.vendorOrderID
  await getOrderInfo(options.vendorOrderID) // 获取订单详情
  // await getExpress()
})

let timer = ref<any>(null)

onUnload(() => {
  if (timer.value) clearTimeout(timer.value)
})

/*************************************************
 * 获取骑手位置（实时）
 */
async function getExpress(riderInfo:AnyObject) {
	if (orderInfo.value.waybillVendorID < 0) {
		covers.value.pop()
		return false
	}
	
    if (riderInfo.courier_coordinate && riderInfo.courier_coordinate.length>1) {
	  covers.value = [
		{
		  ...covers.value[0]
		},
		{
			...covers.value[1]
		},
		{
			...covers.value[2],
			latitude:riderInfo.courier_coordinate.split(',')[1],
			longitude:riderInfo.courier_coordinate.split(',')[0],
			callout:{
				...covers.value[2].callout,
				content:riderInfo.courierName != '' ? riderInfo.courierName : '骑手'
			}
		}
	  ]
      if (orderInfo.value.status === 20) {
        timer.value = setTimeout(() => {
          getExpress({})
        },30000)
      }
    } else {
      let res = await getSToURidingDistance(
        getStorage('lat'),
        getStorage('lng'),
        covers.value[1].latitude,
        covers.value[1].longitude
      )
	  
      if (res.code === '0' && res.data) getExpress(res.data)
      else {
        if (timer.value) clearTimeout(timer.value)
        await getRoderLng()
      }
    }
}

/*************************************************
 * 获取骑手位置（原来的接口,骑手位置不会改变）
 */
async function getRoderLng() {
  if (orderInfo.value.waybillVendorID < 0) {
    covers.value.pop()
    return false
  }
  let data = {
    orderId: vendorOrderID.value,
    deliveryId: orderInfo.value.vendorWaybillID,
    waybillVendorId: orderInfo.value.waybillVendorID,
    orderVendorId: orderInfo.value.vendorID,
  }
  let res =await mapRequest('/v2/order/GetRiderLng', data, 'POST')
  if (res.code == 0) {
    let newData = res.data
    covers.value[2].latitude = +newData.latitude - 0.0002
    covers.value[2].longitude = +newData.longitude
    covers.value[2].callout.content =
      newData.courier_name != '' ? newData.logistics_context : '骑手'
  } else {
    toast('获取骑手位置异常')
  }
}

/*************************************************
 * 获取形成轨迹(包含骑手当前位置，实时)
 */
async function getSToURidingDistance(lat1: any, lng1: any, lat2: any, lng2: any) {
  let data = {
    sLng: lng1 * 1000000,
    sLat: lat1 * 1000000,
    uLng: lng2 * 1000000,
    uLat: Math.ceil(lat2 * 1000000),
    orderId: vendorOrderID.value
  }
  let res =await mapRequest('/v2/cms/GetSToURidingDistance2', data)	// 骑行轨迹  骑手位置
  return res
}

/*************************************************
 * 经纬度参数
 */
const covers = ref<Array<AnyObject>>([
  {
    id: 1,
    latitude: getStorage('lat'),
    longitude: getStorage('lng'),
    iconPath: 'https://image.jxc4.com/image/f68d3785990263a4877ef8e2c4cb3412.png',
    width: 45,
    height: 45,
    callout: {
      content: getStorage('storeName'),
      color: '#fff',
      fontSize: '16',
      borderWidth: '2',
      borderColor: '#fff',
      borderRadius: '4',
      bgColor: '#f73d7a',
      padding: '4',
      textAlign: 'center',
      display: 'ALWAYS',
    },
  },
  {
    id: 2,
    latitude: '',
    longitude: '',
    iconPath: 'https://image.jxc4.com/image/0290331b1be31d7c327a6e60fcf353ea.png',
    width: 45,
    height: 45,
    callout: {
      content: '',
      color: '#000',
      fontSize: '16',
      borderWidth: '2',
      borderColor: '#fff',
      borderRadius: '4',
      bgColor: '#fbcf53',
      padding: '4',
      textAlign: 'center',
      display: 'ALWAYS',
    },
  },
  {
    id: 3,
    latitude: '',
    longitude: '',
    iconPath: 'https://image.jxc4.com/image/6114b7e2e9738d3a4bc6eb9cd1ecb6a5.png',
    width: 45,
    height: 45,
    alpha: 0.8,
    callout: {
      content: '',
      color: '#fff',
      fontSize: '16',
      borderWidth: '2',
      borderColor: '#fff',
      borderRadius: '4',
      bgColor: '#207ce0',
      padding: '4',
      textAlign: 'center',
      display: 'ALWAYS',
    },
  },
])
const isMap = ref<boolean>(false)

/*************************************************
 * 中心经纬度
 */
const midCovers = ref<Array<any>>([])
const consigneeAddress = ref<string>('') // 客户地址
const orderInfo = ref<AnyObject>({}) // 订单信息

/*************************************************
 * 获取商家经纬度
 */
async function getOrderInfo(vendorOrderID: number) {
  let res =await mapRequest('/v2/order/GetOrders', { vendorOrderID })
  if (res.code == 0 && res.data.totalCount > 0) {
    let newData = res.data.data[0]
    consigneeAddress.value = newData.consigneeAddress
    orderInfo.value = newData
    covers.value[1].latitude = newData.consigneeLat / 1000000
    covers.value[1].longitude = newData.consigneeLng / 1000000
    // 地图中点
    midCovers.value = getCenterLonLat(
      getStorage('lng'),
      getStorage('lat'),
      covers.value[1].longitude,
      covers.value[1].latitude
    )
    // 距离客户直线距离
    getUserDistance(
      getStorage('lat'),
      getStorage('lng'),
      covers.value[1].latitude,
      covers.value[1].longitude
    )
  } else {
    uni.jxAlert({
      title: '提示',
      content: '获取订单数据失败',
      success: () => {
        uni.navigateBack()
      },
    })
  }
}

/*************************************************
 * 获取经纬度中间距离
 */
function getCenterLonLat(
  oneLon: string,
  oneLat: string,
  twoLon: string,
  twoLat: string
) {
  //oneLon：第一个点的经度；oneLat：第一个点的纬度；twoLon：第二个点的经度；twoLat：第二个点的纬度；
  let aLon = 0,
    aLat = 0
  let bLon = Number(oneLon) - Number(twoLon)
  let bLat = Number(oneLat) - Number(twoLat)
  //Math.abs()绝对值
  if (bLon > 0) {
    aLon = Number(oneLon) - Math.abs(bLon) / 2
  } else {
    aLon = Number(twoLon) - Math.abs(bLon) / 2
  }
  if (bLat > 0) {
    aLat = Number(oneLat) - Math.abs(bLat) / 2
  } else {
    aLat = Number(twoLat) - Math.abs(bLat) / 2
  }
  return [
    +(aLon * 1000000).toFixed(0) / 1000000,
    +(aLat * 1000000).toFixed(0) / 1000000,
  ]
}

/*************************************************
 * 距离客户距离
 */
async function getUserDistance(lat1: any, lng1: any, lat2: any, lng2: any) {
	// if (orderInfo.value.vendorWaybillID) {
	    let res = await getSToURidingDistance(lat1, lng1, lat2, lng2)
	    if (res.code === '0') {
	      // 判断地图缩放
	      let scaleMap = res.data.distance
	      if (scaleMap < 1000) {
	        scale.value = 16
	      }
	      if (scaleMap > 1000 && scaleMap < 2000) {
	        scale.value = 15
	      }
	
	      // 距离客户距离
	      covers.value[1].callout.content = `距离门店 ${(
	        res.data.distance / 1000
	      ).toFixed(2)}km,点击导航`
	
	      // 数据格式化
	      let arr = (res.data.original_data as string).split(';')
	      arr.forEach(item => {
	        polyline.value[0].points.push(transformFromBaiduToGCJ(Number(item.split(',')[1]), Number(item.split(',')[0])))
	      })
	
	      // // 设置骑手位置 配送总才获取骑手位置
	    
	      // if(orderInfo.value.status === 20) await getExpress(res.data)
	      await getExpress(res.data)
	
	      // 地图展示
	      isMap.value = true 
	    } 
	// else {
	//       let data = {
	//         sLng: lng1 * 1000000,
	//         sLat: lat1 * 1000000,
	//         uLng: lng2 * 1000000,
	//         uLat: Math.ceil(lat2 * 1000000)
	//       }

	// 	  let res1 =await mapRequest('/v2/cms/GetSToURidingDistance', data)
	//       if (res1.code == 0) {
	//         // if (JSON.parse(res1.data).status != 0) {
	//         //   uni.jxConfirm({
	//         //     title: '提示',
	//         //     content: '获取骑行地图失败，建议选择三方地图使用其他出行方式',
	//         //     cancelText: '算了',
	//         //     confirmText: '三方导航',
	//         //     success: () => {
	//         //       let event: any = { markerId: 2 }
	//         //       goMap(event, lat2, lng2)
	//         //     },
	//         //     fail: () => {
	//         //       uni.navigateBack({})
	//         //     },
	//         //   })
	//         //   return
	//         // }
	//         // 格式化数据
	//         // let distanceData = JSON.parse(res1.data).result.routes[0]
	// 		let distanceData = res1.data.routes[0]
	//         // 判断地图缩放
	//         let scaleMap = distanceData.distance
	//         if (scaleMap < 1000) {
	//           scale.value = 16
	//         }
	//         if (scaleMap > 1000 && scaleMap < 2000) {
	//           scale.value = 15
	//         }
	//         // 距离客户距离
	//         covers.value[1].callout.content = `距离门店 ${(
	//           distanceData.distance / 1000
	//         ).toFixed(2)}km,点击导航`
	        
	//         // 第一次格式化数据
	//         let distanceArr1: Array<any> = []
	//         distanceData.steps.forEach((item: AnyObject) => {
	//           distanceArr1.push(...item.path.split(';'))
	//         })
	//         // console.log('距离客户的距离',distanceArr1)
	//         // 第二次格式化数据
	//         let distanceArr2: Array<any> = []
	//         distanceArr1.forEach((item: any) => {
	//           let obj = {
	//             longitude: item.split(',')[0],
	//             latitude: item.split(',')[1],
	//           }
	//           distanceArr2.push(transformFromBaiduToGCJ(obj.latitude, obj.longitude))
	//         })
	//         // 格式化完成数据
	//         polyline.value[0].points = distanceArr2
	
	//         // 获取骑手信息
	//         await getRoderLng()
	
	//         isMap.value = true
	//       } else {
	//         toast('获取用户距离失败')
	//       }
	//     }
	//   } else {
	//     let data = {
	//         sLng: lng1 * 1000000,
	//         sLat: lat1 * 1000000,
	//         uLng: lng2 * 1000000,
	//         uLat: Math.ceil(lat2 * 1000000)
	//       }

	// 	  let res1 =await mapRequest('/v2/cms/GetSToURidingDistance', data)
	//       if (res1.code == 0) {
	//         // if (JSON.parse(res1.data).status != 0) {
	//         //   uni.jxConfirm({
	//         //     title: '提示',
	//         //     content: '获取骑行地图失败，建议选择三方地图使用其他出行方式',
	//         //     cancelText: '算了',
	//         //     confirmText: '三方导航',
	//         //     success: () => {
	//         //       let event: any = { markerId: 2 }
	//         //       goMap(event, lat2, lng2)
	//         //     },
	//         //     fail: () => {
	//         //       uni.navigateBack({})
	//         //     },
	//         //   })
	//         //   return
	//         // }
	//         // 格式化数据
	//         // let distanceData = JSON.parse(res1.data).result.routes[0]
	// 		let distanceData = res1.data.routes[0]
	//         // 判断地图缩放
	//         let scaleMap = distanceData.distance
	//         if (scaleMap < 1000) {
	//           scale.value = 16
	//         }
	//         if (scaleMap > 1000 && scaleMap < 2000) {
	//           scale.value = 15
	//         }
	//         // 距离客户距离
	//         covers.value[1].callout.content = `距离门店 ${(
	//           distanceData.distance / 1000
	//         ).toFixed(2)}km,点击导航`
	        
	//         // 第一次格式化数据
	//         let distanceArr1: Array<any> = []
	//         distanceData.steps.forEach((item: AnyObject) => {
	//           distanceArr1.push(...item.path.split(';'))
	//         })
	//         // console.log('距离客户的距离',distanceArr1)
	//         // 第二次格式化数据
	//         let distanceArr2: Array<any> = []
	//         distanceArr1.forEach((item: any) => {
	//           let obj = {
	//             longitude: item.split(',')[0],
	//             latitude: item.split(',')[1],
	//           }
	//           distanceArr2.push(transformFromBaiduToGCJ(obj.latitude, obj.longitude))
	//         })
	//         // 格式化完成数据
	//         polyline.value[0].points = distanceArr2
	
	//         // 获取骑手信息
	//         await getRoderLng()
	
	//         isMap.value = true
	//       } else {
	//         toast('获取用户距离失败')
	//       }
	//   }
}
const polyline = ref<any>([
  {
    points: [],
    color: '#00cafa',
    width: 12,
    arrowLine: true,
    borderColor: '#087ab8',
    borderWidth: 3,
  },
])

/*************************************************
 *  将百度坐标转为GCJ-02(火星坐标):
 */
function transformFromBaiduToGCJ(latitude: any, longitude: any) {
  var xPi = (3.14159265358979323846264338327950288 * 3000.0) / 180.0
  var x = longitude - 0.0065
  var y = latitude - 0.006
  var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * xPi)
  var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * xPi)
  var a_latitude = z * Math.sin(theta)
  var a_longitude = z * Math.cos(theta)
  return { latitude: a_latitude, longitude: a_longitude }
}

/*************************************************
 * 跳转到第三方地图导航
 */
function goMap(event: any, latitude: number, longitude: number) {
  if (event.detail.markerId == 1 || event.detail.markerId == 3) return
  uni.openLocation({
    latitude: latitude,
    longitude: longitude,
    name: consigneeAddress.value,
    address: '客户地址',
    scale: 16,
  })
}

type methodsType =
  | 'GET'
  | 'OPTIONS'
  | 'HEAD'
  | 'POST'
  | 'PUT'
  | 'DELETE'
  | 'TRACE'
  | 'CONNECT'
  | undefined
/*************************************************
 * 封装公共数据请求方法（nvue页面不支持api封装的，请勿更改后果自负）
 */
function mapRequest(
  newUrl: string,
  data?: any,
  m: methodsType = 'GET'
): AnyObject {
  let basUrl = 'https://wx.jxc4.com'
  if (getStorage('terrace') == 'jxgy') newUrl = '/jxgy' + newUrl
  else if (getStorage('terrace') == 'gblm') newUrl = '/gblm' + newUrl
  return new Promise((resolve, reject) => {
    uni.request({
      url: basUrl + newUrl,
      method: m,
      timeout: 3000 * 10,
      data: data,
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        token: getStorage('token') ? getStorage('token') : 'jxcs',
      },
      success: (res: any) => {
        if (res.statusCode >= 200 && res.statusCode < 300) {
          if ((res.data as AnyObject).code == '-2') {
            uni.jxAlert({
              title: '提示',
              content: '登录信息已过期',
              confirmText: '重新登录',
              success: () => {
                cleatStorage()
                uni.reLaunch({ url: '/subPages/login/wxLogin/wxLogin' })
              },
            })
          } else {
            let newRes: AnyObject = res.data
            newRes.data = JSON.parse(newRes.data) || newRes.data
            resolve(newRes)
          }
        } else {
          uni.jxAlert({
            title: '提示',
            content: '获取订单数据失败',
            success: () => {
              uni.navigateBack()
            },
          })
        }
      },
    })
  })
}
</script>

<style lang="scss" scoped>
</style>