<template>
  <div
    class="map-container"
    style="width: auto; height: auto;"
  >
    <tlbs-map
      ref="mapRef"
      api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
      :center="center"
      :zoom="zoom"
      :control="control"
      @click="onClick"
      @map_inited="onMapInited"
    >
      <tlbs-multi-polyline
        ref="polylineRef"
        :geometries="geometriesLine"
        :styles="styles"
        :options="options"
      />
      <tlbs-multi-marker
        ref="markerRef"
        :geometries="geometriesPoint"
        :styles="styles"
        :options="options"
      />
      <div class="control-container">
        <button @click.stop="getLayerInstance">
          打印折线实例
        </button>
      </div>
    </tlbs-map>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps } from 'vue'
import { callOperate } from '@/apis/call.js'
import { message } from 'ant-design-vue'
import config from '@/utils/config.js'
import { getGUID } from '@/utils/tools'
const props = defineProps({
  onCallBack: {
    type: Function,
    required: true
  },
  orderParams: {
    type: Object,
    required: true
  }
});

const mapRef = ref(null);
const polylineRef = ref(null);
const center = ref({ lat: 0, lng: 0 });
const zoom = ref(16);

const control = ref({
  scale: {},
  zoom: {
    position: 'topRight',
  },
});

const geometriesLine = ref([]);
const geometriesPoint = ref([]);

const styles = ref({
  polyline: {
    color: '#2C68FF', // 线填充色
    borderWidth: 1, // 边线宽度
    borderColor: '#004EE1', // 边线颜色
  },
  markerStart: {
    width: 40,
    height: 40,
    src: '/src/assets/startPoint.png'
  },
  markerEnd: {
    width: 40,
    height: 40,
    src: '/src/assets/endPoint.png'
  },
});

const options = ref({
  zIndex: 1,
});

const onMapInited = () => {
  if (mapRef.value) {
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
    const calculatedWidth = windowWidth - 60;
    const calculatedHeight = windowHeight;
    // 调用地图实例的 resize 方法
    const map = mapRef.value.map;
    if (map) {
      map.resize(calculatedWidth, calculatedHeight);
      const params = {
        ebikeCode: props.orderParams.ebikeCode,
        startTime: props.orderParams.startTime,
        endTime: props.orderParams.endTime,
        interval: "30s"
      }
      callOperate("/ebikeTracking/query", params).then((res) => {
        if (res.code != 200) {
          message.error(res.message)
          return
        }
        if (res.data) {
          center.value = { lat: props.orderParams.ridePoint.split(",")[1], lng: props.orderParams.ridePoint.split(",")[0] }
          const trajectory = [{ lat: props.orderParams.ridePoint.split(",")[1], lng: props.orderParams.ridePoint.split(",")[0] }];
          res.data.map(item => {
            trajectory.push({ lat: item['latitude'], lng: item['longitude'] })
          })
          trajectory.push({ lat: props.orderParams.returnPoint.split(",")[1], lng: props.orderParams.returnPoint.split(",")[0] })
          geometriesLine.value = [
            {
              id: 'polyline1',
              styleId: 'polyline',
              paths: trajectory,
              properties: {
                title: 'polyline',
              },
            }
          ]
          geometriesPoint.value = [
            {
              styleId: 'markerStart', position: {
                lat: parseFloat(props.orderParams.ridePoint.split(",")[1]),
                lng: parseFloat(props.orderParams.ridePoint.split(",")[0])
              }
            },
            {
              styleId: 'markerEnd', position: {
                lat: parseFloat(props.orderParams.returnPoint.split(",")[1]),
                lng: parseFloat(props.orderParams.returnPoint.split(",")[0])
              }
            },
          ]
        }
      });
    }
  }
};

</script>

<style>
.full-modal .ant-modal {
  max-width: 100%;
  top: 0;
  padding-bottom: 0;
  margin: 0;
}
.full-modal .ant-modal-content {
  display: flex;
  flex-direction: column;
  height: calc(100vh);
  border-radius: 0 !important;
}
.full-modal .ant-modal-body {
  flex: 1;
}

.button-panel {
  position: absolute;
  bottom: 55px;
  right: 35px;
  z-index: 2000;
  width: 300px;
  height: 105px;
  background-color: rgb(255, 255, 255, 0.8);
  padding: 15px;
}
.button-panel button {
  width: 100%;
  border-radius: 0px !important;
  margin-bottom: 10px;
}
</style>