<template>
  <div class="container">
    <div class="main-map">
      <div class="left-map">
        <div id="container">
          <div class="map-btn">
            <div class="Driving" @click.stop="Driving">驾车方案</div>
            <div class="Ride" @click.stop="Ride">骑行方案</div>
          </div>
        </div>
        <div id="panel"></div>
      </div>
      <div class="right-info">
        <div class="top">
          <div class="icon" @click.stop="close">
            <el-icon><Close /></el-icon>
          </div>
        </div>
        <div class="price">
          <div class="label">订单金额:</div>
          <div class="money">{{goodsInfo.otPrice}}元</div>
        </div>
        <div class="address">
          <el-icon><LocationFilled /></el-icon>{{ goodsInfo.province }} {{ goodsInfo.city }} {{ goodsInfo.detail
          }}{{ goodsInfo.street }}{{ goodsInfo.detail }}
        </div>
        <div class="receipt-time">
          <div class="label">收货时间变化:</div>
          <div class="time">{{ goodsInfo.createTime }}</div>
        </div>
        <div class="receipt-time">
          <div class="label">商品类型:</div>
          <div class="time">{{ goodsInfo.productType }}</div>
        </div>
        <div class="receipt-time">
          <div class="label">商品总数:</div>
          <div class="time">1</div>
        </div>
        <div class="line"></div>
        <div class="address-ipt-box">
          <div style="width: 80%; display: flex; flex-direction: column; justify-content: space-between">
            <el-input v-model="startingPoint" placeholder="Please input" @keydown="startingPointEvent">
              <template #prepend>起点:</template>
            </el-input>
            <el-input v-model="terminal" placeholder="Please input" @keydown="startingPointEvent">
              <template #prepend>终点:</template>
            </el-input>
          </div>
          <div class="btn" @click.stop="viewMap">查看</div>
        </div>
        <div class="tisp" v-if="TravelOptions">{{ TravelOptions }}：{{ routes.time }} 约{{ routes.distance }}公里</div>
        <div class="submit">
          <placerBtn :goodsinfo="goodsInfo" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// @ts-ignore
// 这是要被忽略类型检查的代码
window._AMapSecurityConfig = {
  securityJsCode: '0c4dce68b8380eb47ad26dbea2cff570',
}
// 地图map
import feedback from '~/utils/feedback'
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, reactive, ref, toRefs, watch, defineEmits, defineProps } from 'vue'
import { Close, LocationFilled } from '@element-plus/icons-vue'
const emits = defineEmits(['closeChange'])
const props = defineProps(['goodsinfo'])
const close = () => {
  emits('closeChange', false)
}
const goodsInfo = <any>ref({})
goodsInfo.value = props.goodsinfo
console.log(goodsInfo.value)

const startingPoint = <any>ref('')
startingPoint.value = goodsInfo.value.sendAddressObj.detailAddress

const terminal = <any>ref('')
terminal.value =
  goodsInfo.value.province +
  goodsInfo.value.city +
  goodsInfo.value.detail +
  goodsInfo.value.street +
  goodsInfo.value.detail
// 37b09e9ef9458d8e987b9351420563ab
let map: any = null
let amap: any = null
let marker: any = null
let driving: any = null
let Riding: any = null
const routes = <any>ref({
  time: '',
  distance: '',
})
//进行地图初始化
function initMap() {
  AMapLoader.load({
    key: '37b09e9ef9458d8e987b9351420563ab', // 申请好的Web端开发者Key，首次调用 load 时必填
    plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Driving', 'AMap.DragRoute', 'AMap.Riding'],
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

    Loca: {
      version: '2.0.0',
    },
  })
    .then((AMap) => {
      amap = AMap
      map = new AMap.Map('container', {
        //设置地图容器id
        plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Driving', 'AMap.DragRoute', 'AMap.Riding'],
        center: [goodsInfo.value.longitude, goodsInfo.value.latitude], //地图中心点
        zoom: 10, //地图显示的缩放级别
      })
      //点标记显示内容
      const markerContent = `<div class="custom-content-marker">
                                  <img src="https://a.amap.com/jsapi/static/image/plugin/marker/end.png">
                                  <div class="close-btn" onclick="clearMarker()"></div>
                              </div>`
      const position = new AMap.LngLat(goodsInfo.value.longitude, goodsInfo.value.latitude) //Marker 经纬度
      marker = new AMap.Marker({
        position: position,
        content: markerContent, //将 html 传给 content
        offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
      })
      map.add(marker)

      // goView() // 获取线路规划
    })
    .catch((e) => {
      console.log(e)
    })
}

initMap()
const TravelOptions = <any>ref('')
const goView = () => {
  map.remove(marker)
  // eslint-disable-next-line no-undef
  driving = new amap.Driving({
    map: map,
    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
    policy: amap.DrivingPolicy.LEAST_TIME,
    // // panel 指定将结构化的路线详情数据显示的对应的DOM上，传入值需是DOM的ID
    // panel: 'panel',
  })
  // 根据起终点经纬度规划驾车导航路线
  driving.search(
    // [
    //   { keyword: goodsInfo.value.sendAddressObj.detailAddress, city: goodsInfo.value.city },
    //   { keyword: goodsInfo.value.province, city: goodsInfo.value.city },
    // ],
    // 起点经纬度
    [goodsInfo.value.sendAddressObj.longitude, goodsInfo.value.sendAddressObj.latitude],
    // 终点经纬度
    [goodsInfo.value.longitude, goodsInfo.value.latitude],
    function (status: any, result: any) {
      // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
      if (status === 'complete') {
        routes.value.distance = metersToKilometers(result.routes[0].distance)
        routes.value.time = formatTime(result.routes[0].time)
        console.log('绘制驾车路线完成', result)
        TravelOptions.value = '驾车'
        routes.value.time = formatTime(result.routes[0].time)
      } else {
        console.log('获取驾车数据失败：' + result)
      }
    },
  )
}
const viewMap = () => {
  goView()
}
const Driving = () => {
  TravelOptions.value = '驾车'
  if (Riding) {
    Riding.clear()
  }
  if (driving) {
    driving.clear()
  }
  goView()
}
const Ride = () => {
  TravelOptions.value = '骑行'
  if (driving) {
    driving.clear()
  }
  if (Riding) {
    Riding.clear()
  }
  map.clearMap()
  // eslint-disable-next-line no-undef
  Riding = new amap.Riding({
    map: map,
    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
    policy: 0,
    // // panel 指定将结构化的路线详情数据显示的对应的DOM上，传入值需是DOM的ID
    // panel: 'panel',
  })
  // 根据起终点经纬度规划驾车导航路线
  Riding.search(
    // 起点经纬度
    [goodsInfo.value.sendAddressObj.longitude, goodsInfo.value.sendAddressObj.latitude],
    // 终点经纬度
    [goodsInfo.value.longitude, goodsInfo.value.latitude],
    function (status: any, result: any) {
      // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
      if (status === 'complete') {
        routes.value.distance = metersToKilometers(result.routes[0].distance)
        routes.value.time = formatTime(result.routes[0].time)
        console.log('绘制骑行路线完成', result)

      } else {
        feedback.msgError('获取骑行数据失败')
        console.log('获取骑行数据失败：' + result)
      }
    },
  )
}
const dialogTableVisible = ref(false)

const changeDialog = () => {
  dialogTableVisible.value = !dialogTableVisible.value
}

//暴露方法
defineExpose({
  changeDialog,
  initMap,
})
function formatTime(seconds: any) {
  console.log(seconds)

  let hours = Math.floor(seconds / 3600)
  let minutes = Math.floor((seconds % 3600) / 60)
  let remainingSeconds = seconds % 60

  return `${hours}时${minutes}分${remainingSeconds}秒`
}
function metersToKilometers(meters: any) {
  let kilometers = meters / 1000
  return kilometers
}
const startingPointEvent = (event:any) => {
  if (event.keyCode !== 37 && event.keyCode !== 39) {
        event.preventDefault();
      }
      
}
</script>

<style lang="scss" scoped>
.custom-content-marker {
  position: relative;
  width: 25px;
  height: 34px;
}

.custom-content-marker img {
  width: 100%;
  height: 100%;
}

.custom-content-marker .close-btn {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  background: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 15px;
  box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
}

.custom-content-marker .close-btn:hover {
  background: #666;
}
.container {
  position: fixed;
  left: 10%;
  top: 0;
  z-index: 1010;
  width: 100%;
  height: 100%;
  #container {
    width: 100%;
    height: 100%;
  }
  .main-map {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.5833rem;
    height: 2.6042rem;
    background-color: #fff;
    z-index: 1;
    transform: translate(-50%, -50%);
    display: flex;
    box-shadow: 0px 0px 58px rgba(0, 0, 0, 0.1);
    .left-map {
      width: 2.7083rem;
      height: 100%;
      background-color: skyblue;
      #container {
        position: relative;
      }
      .map-btn {
        position: absolute;
        bottom: 0.1563rem;
        left: 0.1042rem;
        z-index: 1;
        display: flex;
        .Driving {
          margin-right: 0.1042rem;
          width: 0.4167rem;
          height: 0.1563rem;
          text-align: center;
          line-height: 0.1563rem;
          color: #fff;
          border-radius: 0.026rem;
          background-color: #ff4e8d;
          cursor: pointer;
        }
        .Ride {
          margin-right: 0.1042rem;
          width: 0.4167rem;
          height: 0.1563rem;
          text-align: center;
          line-height: 0.1563rem;
          color: #fff;
          border-radius: 0.026rem;
          background-color: #ff4e8d;
          cursor: pointer;
        }
      }
    }
    .right-info {
      flex: 1;
      padding: 0.0781rem;
      .top {
        width: 100%;
        display: flex;
        justify-content: end;
        align-items: center;
        i {
          font-size: 0.125rem;
          cursor: pointer;
        }
      }
      .label {
        font-size: 0.1042rem;
        font-weight: 600;
        margin-right: 0.0521rem;
      }
      .price {
        display: flex;
        align-items: center;

        .money {
          color: #ff4e8d;
          font-size: 0.1042rem;
          font-weight: 600;
        }
      }
      .address {
        margin-top: 0.1042rem;
        font-size: 0.0833rem;
        color: #575d6c;
        margin-bottom: 0.1042rem;
      }
      .receipt-time {
        display: flex;
        align-items: center;
        color: #2d3646;
        margin: 0.0521rem 0;
        .label {
          font-size: 0.0833rem;
          font-weight: 400;
        }
        .time {
          font-size: 0.0833rem;
        }
      }
      .line {
        margin-top: 0.1042rem;
        width: 100%;
        height: 1px;
        background-color: #c2c5cc;
      }
      .address-ipt-box {
        display: flex;
        margin-top: 0.1042rem;

        height: 0.4063rem;
        .btn {
          padding: 0.0521rem 0.026rem;
          width: 0.1875rem;
          height: 0.4063rem;
          background-color: #ff4e8d;
          margin-left: 0.0521rem;
          color: #fff;
          font-size: 20px;
          text-align: center;
          line-height: 0.151rem;
          cursor: pointer;
        }
      }
      .tisp {
        margin-top: 0.0521rem;
        font-size: 0.0625rem;
        color: #575d6c;
      }
      .submit {
        margin-top: 0.1563rem;
        display: flex;
      }
    }
  }
}
</style>
