<template>
  <div id="streetscape"></div>
  <div class="carouselClas">
    <el-carousel type="card" style="z-index: 999" height="150px" motion-blur>
      <el-carousel-item
        v-for="item in AllData.poiImages"
        :key="item"
        @click="selectPoiImgUrl(item)"
        style="height: 150px"
      >
        <el-image :src="item.imagesUrl" style="width: 100%; height: 150px" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup name="streetscape">
import { ref, reactive, toRefs, onMounted, nextTick, defineProps, watch } from "vue";
import bus from "@/bus";
import request from "@/utils/request";
import axios from "axios";
const props = defineProps({
  // 数据id
  location: {
    type: Array,
    // default: () => [114.45370037156442, 30.525710664701975],
  },
});
const { proxy } = getCurrentInstance();
const AllData = reactive({
  panorama: null,
  poiCircle: null,
  poiImages: [],
  poiData: [],
});
// 初始化街景地图
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 () => {
  AllData.poiImages = [];

  let poiData = await axios({
    url: `/bdApi/baiduservice/placeSearch`,
    method: "GET",
    params: {
      location: `${parseFloat(AllData.poiCircle[1].toFixed(6))},${parseFloat(
        AllData.poiCircle[0].toFixed(6)
      )}`,
      radius: 1000,
      query: "公交站$商场$著名景点$学校",
    },
  });
  if (poiData && poiData.data.data.length) {
    AllData.poiData = poiData.data.data;
    getStreetImg();
  }
};
//获取全景静态图
const getStreetImg = async () => {
  AllData.poiImages = [];
  console.log("AllData.poiData---", AllData.poiData);
  AllData.poiData.forEach(async (element) => {
    let data = await axios({
      url: `/bdApi/baiduservice/panorama`,
      method: "GET",
      params: {
        location: `${element.location.lng},${element.location.lat}`,
        fov: 180,
        height: 256,
        width: 512,
      },
    });
    if (data.data && data.data.data && data.data.data.status == 200) {
      data.data.data.base64 = "data:image/jpeg;base64," + data.data.data.base64;
      AllData.poiImages.push({
        name: element.name,
        lonlat: [element.location.lng, element.location.lat],
        imagesUrl: data.data.data.base64,
      });
    }
  });
  console.log("AllData.poiImages---", AllData.poiImages);
};

// 全局事件监听
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;
  console.log("🚀 ~ showAllStreet ~ AllData.poiCircle:", AllData.poiCircle);
  setTimeout(() => {
    AllData.panorama.setPosition(
      new BMapGL.Point(
        position_Street.geometry.coordinates[0],
        position_Street.geometry.coordinates[1]
      )
    );
  }, 2000);
  searchPoiByLonlat();
  gcoord.transform(position_Street, gcoord.BD09, gcoord.WGS84);
};
//轮播图点击事件
const selectPoiImgUrl = (item) => {
  AllData.panorama.setPosition(new BMapGL.Point(item.lonlat[0], item.lonlat[1]));
};

watch(
  () => props.location,
  (newV) => newV.length && showAllStreet(newV)
);

onMounted(() => {
  initePanoramaMap();
  if (props.location.length) showAllStreet(props.location);
});
onBeforeUnmount(() => {});
</script>

<style lang="scss" scoped>
#streetscape {
  width: 100%;
  height: 100%;
  // background: red;
}
.carouselClas {
  // display: none;
  width: 50%;
  height: 150px;
  // background: red;
  position: absolute;
  bottom: 25px;
  left: 25%;

  .el-carousel__container {
    height: 150px;
  }
}
</style>