<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<script setup name="AMap">
import { Delete, Plus } from '@element-plus/icons-vue'
import { toRefs } from '@vueuse/shared'
import { reactive, ref } from '@vue/reactivity'
import { defineProps, getCurrentInstance } from '@vue/runtime-core'
import { computed } from 'vue'

// const {proxy} = getCurrentInstance()
const props = defineProps({
  toParentsMap: {
    type: Object, // 父组件传来的默认数据
    default: () => {
      return {}
    },
  },
  isShowAMap: {
    type: Boolean, // 控制是否展示搜索框
    default: false,
  },
  refreshMarker: {
    type: Boolean, // 控制是否展示搜索框
    default: true,
  },
  zoom: {
    type: Number,
    default: 16,
  },
  points: {
    type: Array,
    default: () => [],
  },
  btnId: {
    type: Array,
    default: () => [],
  },
  btnEvent: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['mapData', 'clickRecall'])

// 加载离线地图（瓦片部署在同一路径下的static/tiles）,瓦片下载地址http://wmksj.com/amap.html，100+收费
function createTile(x, y, z, success, fail) {
  const c = document.createElement('canvas')
  c.width = c.height = 256
  const cxt = c.getContext('2d')
  var img = new Image()
  img.src = `/static/tiles/${z}/${x}/${y}.png`
  // img.src = `//www.baidu.com/img/flexible/logo/pc/result.png`;
  img.onload = function () {
    cxt.drawImage(img, 0, 0, 256, 256)
  }
  cxt.font = '15px Verdana'
  cxt.fillStyle = '#ff0000' // 字颜色
  cxt.fillText(`(${[x, y, z].join(',')})`, 10, 30)
  success(c)
}

const currentWindow = reactive({
  position: [116.4, 39.9],
  visible: false,
  content: '',
  offset: [0, 100],
})

const showOffline = ref(true)
const center = computed(() => {
  return [props.toParentsMap.lng || 113.887902, props.toParentsMap.lat || 22.554732]
})
function clickMarker(marker) {
  marker = JSON.parse(JSON.stringify(marker))
  currentWindow.visible = false
  currentWindow.position = [Number(marker.longitude), Number(marker.latitude)]
  center.value = [Number(marker.longitude), Number(marker.latitude)]
  currentWindow.visible = true
  currentWindow.content = marker.message
  emit('clickRecall', marker)
}

const componentMarker = ref({
  position: [
    props.toParentsMap.lng || 116.4,
    props.toParentsMap.lat || 39.9,
  ],
  visible: true,
  draggable: false,
})
const toParentsMapInfo = ref({})
const infoWindow = ref()

/** 接受父组件传值进行赋值 初始化地图数据 */
function initMapInfo() {
  toParentsMapInfo.value = props.toParentsMap
}

/** 初始化地图 */
function initMap(e) {
}

// /** 选取定位地图*/
// function selectPoi(e) {
//   let poi = e.poi
//   if (poi.address.length > 0 && poi.location != undefined &&
//     poi.location != null && poi.location != '') {
//     let position = [e.poi.location.lng, e.poi.location.lat]
//     center.value = position
//     componentMarker.value.position = position
//     toParentsMapInfo.value = {
//       id: poi.id,
//       lng: poi.location.lng, //经度
//       lat: poi.location.lat, //纬度
//       districtCode: poi.adcode, //区编码
//       //address: poi.address, //地址
//       //district: poi.district, //省名称 市名称 区名称
//       //name: poi.name, //查询地址
//       province: '', //省地址
//       city: '', //市地址
//       zone: '', //区地址
//       detailedAddress: '' //详细地址
//     }
//
//     let reg = /.+?(省|市|自治区|自治州|盟|旗|县|区)/g // 截取地图地址
//     let detailedAddress = poi.district + poi.address + poi.name
//     let districtList = detailedAddress.match(reg)
//     if (districtList.length < 3) {
//       toParentsMapInfo.value.city = districtList[0]
//       toParentsMapInfo.value.zone = districtList[1]
//     } else {
//       toParentsMapInfo.value.city = districtList[1]
//       toParentsMapInfo.value.zone = districtList[2]
//     }
//     toParentsMapInfo.value.province = districtList[0]
//     toParentsMapInfo.value.detailedAddress = detailedAddress
//
//     console.log(toParentsMapInfo.value)
//     emit('mapData', toParentsMapInfo.value) // 传值到父组件
//   } else {
//     proxy.$modal.msgWarning('输入的位置定位失败, 请输入详细位置进行定位!')
//   }
// }

initMapInfo()

onBeforeUnmount(() => {
  showOffline.value = false
})
</script>

<template>
  <div class="aMapMain">
    <div class="aMap">
      <el-amap ref="mapRef" vid="amap" :center="center" :zoom="zoom" :zooms="[10, 15]" @init="initMap">
        <!--        <el-amap-layer-flexible :v-if="showOffLine" :create-tile="createTile"/> -->
        <el-amap-layer-tile tile-url="/static/tiles/[z]/[x]/[y].png" z-index="70000" />
        <div v-if="refreshMarker">
          <el-amap-marker
            v-for="(item, index) of points" :key="`point${index}`" top-when-click="true"
            :position="[item.longitude, item.latitude]" :icon="item.icon" :ext-data="item" :size="30"
            :label="item.label"
            @click="clickMarker(item)"
          />
        </div>
        <el-amap-info-window
          v-if="currentWindow" :position="currentWindow.position" :visible="currentWindow.visible"
          :content="currentWindow.content" :close-when-click-map="true"
        />
      </el-amap>
    </div>
  </div>
</template>

<style scoped>
/deep/.bottom-center .amap-info-sharp {
  margin-bottom: 30px !important;
  display: none;
}

/deep/.amap-info-content {
  margin-bottom: 30px !important;
}

/deep/.amap-icon img {
  max-width: 2rem !important;
  max-height: 2rem !important;
}
</style>

<style lang="scss">
.amap-sug-result {
  z-index: 2099;
}

.amap-copyright {
  height: 24px;
}

.el-vue-search-box-container,
.el-vue-search-box-container input {
  height: 29px;
  border-radius: 8px;
}

.aMapMain {
  width: 100%;

  .aMap {
    width: 100%;
    height: calc(100vh - var(--g-topbar-height) - var(--g-header-height));
  }

  .aMapAddress {
    text-align: left;

    p {
      margin-top: 5px;
      margin-bottom: 0;
    }
  }
}

.el-vue-search-box-container {
  border: 1px solid #e2e2e2;
  height: 36px;
  box-shadow: none;
}
</style>