<template>
  <div id="streetscape">
    <!-- <el-carousel height="150px" style="z-index: 999">
      <el-carousel-item v-for="item in AllData.poiImages" :key="item">
        <img :src="item.imagesUrl" />
      </el-carousel-item>
    </el-carousel> -->
  </div>
</template>

<script setup name="streetscape">
import { ref, reactive, toRefs, onMounted, nextTick } from 'vue';
import bus from '@/bus';
import request from '@/utils/request';
import dialogTabsStore from '@/store/modules/dialogTabs';

const useDialogTabs = dialogTabsStore();
const { proxy } = getCurrentInstance();
const AllData = reactive({
  panorama: null,
  poiCircle: null,
  poiImages: [],
});
// 初始化街景地图
const initePanoramaMap = () => {
  AllData.panorama = BMapGL.Panorama('streetscape');
  AllData.panorama.setPov({
    // 修改全景的视角
    pitch: 10,
    heading: 0,
  });
  AllData.panorama.setOptions({
    linksControl: true, // 隐藏道路指示控件，默认true
    navigationControl: true, // 隐藏导航控件，默认true
  });
};
//根据中心点查找poi
// const searchPoiByLonlat = async () => {
//   let poiData = await request({
//     url: `/bdApi/baiduservice/placeSearch`,
//     method: 'GET',
//     params: {
//       location: `${AllData.poiCircle[1]},${AllData.poiCircle[0]}`,
//       radius: 200,
//       query: '公交站$商场$著名景点$学校',
//     },
//   });
//   if (poiData & poiData.data.length) {
//     console.log('poiData---', poiData);
//     element.image = getStreetImg([element.location.lng, element.location.lat]);
//     poiData.data.forEach(element => {
//       AllData.poiImages.push({
//         name: element.name,
//         lonlat: [element.location.lng, element.location.lat],
//         imagesUrl: element.image,
//       });
//     });
//   }
// };
//获取全景静态图
const getStreetImg = async lonlat => {
  let data = await request({
    url: `/bdApi/baiduservice/panorama`,
    method: 'GET',
    params: {
      location: `${lonlat[0]},${lonlat[1]}`,
      fov: 180,
      height: 256,
      width: 512,
    },
  });
  if (data && data.data) {
    data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
    return data.data.base64;
  }
};

// 全局事件监听
const showAllStreet = e => {
  console.log('streetPosition---', e);
  let position_Street = turf.point(e);
  gcoord.transform(position_Street, gcoord.WGS84, gcoord.BD09);
  AllData.poiCircle = position_Street.geometry.coordinates;
  AllData.panorama.setPosition(
    new BMapGL.Point(position_Street.geometry.coordinates[0], position_Street.geometry.coordinates[1])
  );
  //searchPoiByLonlat();
  gcoord.transform(position_Street, gcoord.BD09, gcoord.WGS84);
};

onMounted(() => {
  initePanoramaMap();
  // AllData.panorama.addEventListener('position_changed', function (pos) {
  //   console.log('pos---', pos);
  //   // AllData.panorama.setPosition(new BMapGL.Point(pos.lng, pos.lat));
  // });
  console.log('useDialogTabs.pointLocation',useDialogTabs.pointLocation);
  
  showAllStreet(useDialogTabs.pointLocation);
  bus.on('streetPosition', e => {
    showAllStreet(e);
    // console.log('streetPosition---', e);
    // let position_Street = turf.point(e);
    // gcoord.transform(position_Street, gcoord.WGS84, gcoord.BD09);
    // AllData.poiCircle = position_Street.geometry.coordinates;
    // AllData.panorama.setPosition(
    //   new BMapGL.Point(position_Street.geometry.coordinates[0], position_Street.geometry.coordinates[1])
    // );
    // //searchPoiByLonlat();
    // gcoord.transform(position_Street, gcoord.BD09, gcoord.WGS84);
  });
});
  console.log("🚀 ~ onMounted ~ useDialogTabs.pointLocation:", useDialogTabs.pointLocation)
  console.log("🚀 ~ onMounted ~ useDialogTabs.pointLocation:", useDialogTabs.pointLocation)
  console.log("🚀 ~ onMounted ~ useDialogTabs.pointLocation:", useDialogTabs.pointLocation)
onBeforeUnmount(() => {
  bus.off('xxinformationList');
});
</script>

<style lang="scss" scoped>
#streetscape {
  width: 100%;
  height: 100%;
}
</style>