<template>
  <tlbs-map
      ref="mapRef"
      api-key="3SVBZ-6MYYZ-Q75X5-7YN43-BMIBZ-YABND"
      :center="center"
      :zoom="zoom"
      :control="control"
      class="mapBox"
      @click="onClick"
      @map_inited="onMapInited"
  >
    <tlbs-multi-marker
        ref="markerRef"
        :geometries="geometries"
        :styles="styles"
        :options="options"
        @click="openInfo"
    />
  </tlbs-map>
  <el-dialog v-model="dialogVisible" width="250px" title="隧道信息" align-center>
    <el-form>
      <el-form-item label="名称：">
        <el-text size="large">{{dialogData.name}}</el-text>
      </el-form-item>
      <el-form-item label="类型：">
        <el-text size="large">{{dialogData.switchType}}</el-text>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="callParentMethod">查看数据</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { defineComponent, ref } from 'vue-demi';
import {useScreenStore} from "@/pinia/modules/screen";
const useScreen = useScreenStore()
export default defineComponent({
  name: 'MarkerDemo',
  setup() {
    const mapRef = ref(null);
    const markerRef = ref(null);
    const center = ref({ lat: 28.7052848, lng: 113.5759597 });
    const zoom = ref(10);
    const geometries = ref(useScreen.placeList)
    const dialogVisible = ref(false)
    const dialogData = ref({})
    const onClick = (e) => {
      console.log(e.latLng);
      // geometries.value = [
      //   {
      //     styleId: 'marker',
      //     position: { lat: 28.7052848, lng: 113.5759597 } ,
      //   },
      //   {
      //     styleId: 'marker',
      //     position: { lat: e.latLng.lat, lng: e.latLng.lng } ,
      //   },
      // ]
    };

    const onMapInited = () => {
      // 地图加载完成后，可以获取地图实例、点标记实例，调用地图实例、点标记实例方法
      console.log(mapRef.value.map);
      console.log(markerRef.value.marker);
    };

    const getLayerInstance = () => {
      // 可以获取点标记实例，调用点标记实例方法
      console.log(markerRef.value.marker);
    };
    const openInfo = (e) => {
      dialogVisible.value = true
      const id = e.geometry.styleId
      const list = useScreen.tunnelList
      list.forEach(item => {
        if (item.ID === id) {
          dialogData.value = item
        }
      })
    }
    const callParentMethod = () => {
      useScreen.setCurrentTunnel(dialogData.value)
      dialogVisible.value = false
    }
    return {
      center,
      zoom,
      onClick,
      onMapInited,
      getLayerInstance,
      control: {
        scale: {},
        zoom: {
          position: 'topRight',
        },
      },
      mapRef,
      markerRef,
      geometries,
      styles: {
        marker: {
          width: 20,
          height: 30,
          anchor: { x: 10, y: 30 },
        },
      },
      options: {
        minZoom: 5,
        maxZoom: 15,
      },
      openInfo,
      dialogVisible,
      dialogData,
      callParentMethod,
    };
  },
});
</script>

<style scoped lang="less">
.mapBox{
  width: 1150px;
  height: 800px;
}

.infoDialog{
  width: 300px;
  height: 100px;
}
</style>
