<!--
  Description: 高德地图
  Author: 李亚光
  Date: 2023-04-21
 -->
<script lang="ts" setup name="GuadMap">
import AMapLoader from '@amap/amap-jsapi-loader'
import { getSceneListPage } from '@/api/scene'
const loading = ref(true)
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: '56bf9671d4b3517d294caec4751889a1', // 后期需替换
}
const activeNames = ref('0')
const sceneList = ref([])
// map.setCenter(position);
// 地图实例
const map = shallowRef()
//  用来画区域的
const polygon = ref()
//  画图工具实例
const mouseTool = ref()
// 区域数组
const pathArr = ref([
  [111.737806, 40.83386],
  [111.736806, 40.83686],
  [111.739906, 40.83686],
  [111.739906, 40.83386],
])
// 区域点数组
const markerArr = ref([
  [111.738956, 40.83476],
  [111.738956, 40.83676],
])
// 折现节点坐标
// const lineArr = ref([
//   [116.368904, 39.913423],
//   [116.382122, 39.901176],
//   [116.387271, 39.912501],
//   [116.398258, 39.904600],
// ])
// 初始化地图
const initMap = () => {
  AMapLoader.load({
    key: '40849e82b4e33f5255b17372520c954d', // 后期需替换
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale', 'AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      // 初始化地图
      map.value = new AMap.Map('map', {
        viewMode: '2D', //  是否为3D地图模式
        zoom: 17, // 初始化地图级别
        // center: [111.737906, 40.83576],
        resizeEnable: true,
      })
      // 用来画区域的
      // polygon.value = new AMap.Polygon({
      //   map: map.value,
      //   fillOpacity: 0.2,
      //   path: pathArr.value, // 区域数组
      // })
      // 画图工具
      // mouseTool.value = new AMap.MouseTool(map.value)
      // mouseTool.value.rectangle({
      //   strokeColor: '#1E9FFF',
      //   strokeWeight: 2,
      //   strokeStyle: 'dashed',
      //   strokeOpacity: 1,
      //   fillOpacity: 0.1,
      //   fillColor: '#1E9FFF',
      //   // zIndex: 50,
      //   // 同Polygon的Option设置
      // })
      // var overlays = []
      // 监听draw事件可获取画好的覆盖物
      // mouseTool.value.on('draw', (e) => {
      // // 绘制多边形;
      //   overlays.push(e.obj)
      //   // 获取坐标;
      //   console.log(e.obj.getPath())
      //   // 格式化坐标;
      //   var polyPoints = e.obj.getPath()
      //   var arr = ''
      //   for (var i = 0; i < polyPoints.length; i++) {
      //     arr += `${polyPoints[i].lng},${polyPoints[i].lat};`
      //   }
      //   console.log(arr)// 121.540994,29.870174;121.55138,29.858116;121.55756,29.874193;
      // })
      // 标记点绘制
      // for (let i = 0; i < markerArr.value.length; i++) {
      //   const icon = new AMap.Icon({
      //     size: new AMap.Size(36, 36), // 图标尺寸
      //     image: 'https://img1.baidu.com/it/u=783564618,4142196075&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', // Icon的图像
      //     imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
      //     imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
      //   })
      //   // const content = '<div>111</div>'
      //   const marker = new AMap.Marker({
      //     position: markerArr.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      //     map: map.value,
      //     title: '测试坐标',
      //     icon,
      //     offset: new AMap.Pixel(-20, -20),
      //   })
      //   map.value.add([marker])
      //   // 自动适应显示想显示的范围区域
      //   // map.value.setFitView()
      // }
      // 折现
      // const path = [
      //   new AMap.LngLat(111.737506, 40.83476),
      //   new AMap.LngLat(111.738956, 40.83476),
      //   new AMap.LngLat(111.738956, 40.83676),
      // ]
      // const polyline = new AMap.Polyline({
      //   path,
      //   borderWeight: 1, // 线条宽度，默认为 1
      //   strokeColor: '#008d68', // 线条颜色
      //   lineJoin: 'round', // 折线拐点连接处样式
      //   strokeStyle: 'solid',
      // })
      // polyline.setMap(map.value)
      // map.value.add(polyline)
      // 地图图块加载完成后触发
      map.value.on('complete', () => {
        //  修改loading状态
        console.log('地图加载完成')
        loading.value = false
      })
    })
    .catch((e) => {
      console.log(e)
    })
}
// 获取作业现场列表
const fetchSceneList = () => {
  getSceneListPage({ limit: 9999, offset: 1 }).then((res) => {
    sceneList.value = res.data.rows
  })
}
fetchSceneList()
// 选择作业现场
const checkScene = (index: number) => {
  activeNames.value = '0'
}
onMounted(() => {
  loading.value = true
  initMap()
})
onBeforeUnmount(() => {
  if (map.value) {
    map.value.destroy()
  }
})
</script>

<template>
  <div class="container">
    <!-- 地图 -->
    <div id="map" v-loading="loading" />
    <!-- 现场列表下拉 -->
    <div class="collapse">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="作业现场列表" name="1">
          <div v-if="!sceneList.length" class="message-content" style="text-align: center;">
            暂无数据
          </div>
          <el-scrollbar v-else max-height="400px">
            <div v-for="(message, index) of sceneList" :key="index" class="message-item">
              <div class="message-content" @click="checkScene(index)">
                <div class="message">
                  {{ index + 1 }}.{{ message.workTitle }}
                </div>
              </div>
            </div>
          </el-scrollbar>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;

  .collapse {
    position: absolute;
    top: 5px;
    right: 5px;
  }

  :deep(.el-collapse-item) {
    width: 260px;
  }

  :deep(.el-collapse-item__header) {
    font-size: 16px;
    font-weight: 700;
    text-align: center !important;
    // padding-left: 70px;
    background-color: transparent;
  }

  :deep(.el-collapse-item__content) {
    background-color: transparent !important;
    padding-bottom: 0;
  }

  .message-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 8px 5px;
    cursor: pointer;
    position: relative;

    &:hover {
      background-color: #f6f6f6;
    }
  }

  .message-content {
    flex: 1;
    font-size: 14px;

    .time {
      margin-top: 3px;
      font-size: 12px;
      color: #888;
    }
  }
}

#map {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}
</style>

<style>
/* 隐藏高德logo  */
.amap-logo {
  display: none !important;
}

/* 隐藏高德版权  */
.amap-copyright {
  display: none !important;
}
</style>