<template>
  <div>
    <div class="imgCon">
      <div class="echartTitle">
        <div class="block-title">监测类型情况</div>
      </div>
      <div class="imgList">
        <div
          class="imgDiv"
          v-for="(item, i) in monitorList"
          :key="i"
          :class="i == imgIndex ? 'higImg' : ''"
          @click="clickImg(i)"
          @mouseenter="handleMouseEnter(item, i)"
          @mouseleave="handleMouseLeave(item, i)"
        >
          <span class="imgindexspan">{{ i + 1 }}</span>
          <img :src="item.fjPreview" />
          <p>{{ item.fjDatetime }}</p>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="图片查看"
      width="30%"
      :modal="false"
      :fullscreen="false"
      draggable
      class="imgdialog"
      :append-to-body="true"
    >
      <div class="">
        <el-carousel
          v-if="dialogVisible"
          trigger="click"
          height="332px"
          indicator-position="none"
          :autoplay="false"
          :initial-index="imgIndex"
          v-model="imgIndex"
          ref="carousel"
          @change="(v) => (imgIndex = v)"
        >
          <el-carousel-item
            v-for="(item, i) in monitorList"
            :key="i"
            class="carouImg"
            @mouseenter="handleMouseEnter(item, i)"
            @mouseleave="handleMouseLeave(item, i)"
          >
            <img :src="item.fjPreview" />
            <span class="imgindexspan">{{ i + 1 }}</span>
            <div class="text">
              <div>
                拍摄时间:{{ item.fjDatetime }} 拍摄人:{{ item.createBy }}
              </div>
              <div>
                拍摄坐标:{{ Number(item.fjLongitude).toFixed(6) }},
                {{ Number(item.fjLatitude).toFixed(6) }}
                拍摄方位:{{ item.fjDirection }}
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getJctbhcInfo, getTiffPath } from "@/api/ghss/jctb.js";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
let vectorLayer = null;
export default {
  props: {},
  components: {},
  data() {
    return {
      imgUrl: "",
      monitorList: [],
      // primitive: null,
      // selectId: null,
      // primitivesArray: [],
      // jtArr:[],//箭头id数组
      // dwArr:[],//
      idArr: [], //id数组
      handler: {},
      dialogVisible: false,
      imgIndex: 0,
    };
  },
  mounted() {
    this.inputAction();
  },
  methods: {
    inputAction() {
      // 为viewer添加鼠标移动的监听事件
      // viewer.screenSpaceEventHandler.setInputAction(function (movement) {
      //   // movement.endPosition是一个Cesium.Cartesian2对象，表示鼠标在屏幕上的位置

      // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      // this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      // this.handler.setInputAction(function (movement) {
      //   let pickedFeature = scene.pick(movement.position);
      //   console.log(movement,pickedFeature,'////');
      //   // that[queryName](movement);
      // },  Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      // 鼠标移动事件
      // this.handler.setInputAction(function (movement) {
      //   console.log(movement, "movement");
      //   // 通过pick方法获取鼠标下的实体
      //   // var pickedObject = viewer.scene.pick(movement.endPosition);
      //   // if (
      //   //   Cesium.defined(pickedObject) &&
      //   //   scene.pickPositionSupported &&
      //   //   pickedObject != null
      //   // ) {
      //   //   console.log(pickedObject,'pickedObject'); // 打印实体的ID
      //   // }
      // }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      var higFeature = null; // 用于跟踪当前高亮的特征。
      let _this = this;
      window.map.mapDiv.on("pointermove", function (evt) {
        window.map.mapDiv.forEachFeatureAtPixel(evt.pixel, function (feature) {
          if (feature.id_ && feature.id_.includes("jt")) {
            if (feature !== higFeature) {
              if (higFeature) _this.updateStyle(higFeature, null, "-2");
              // 进入新的feature
              _this.updateStyle(feature, null, "");
              _this.imgIndex = _this.monitorList.findIndex(
                (m) => "jt" + m.id == feature.id_
              );
              _this.dialogVisible = true;
              higFeature = feature;
            }
          }
        });
      });

      window.map.mapDiv.on("pointerout", function () {
        if (higFeature) {
          // 如果存在高亮的特征，则恢复其样式。
          _this.updateStyle(higFeature, null, "-2");
          higFeature = null; // 重置高亮特征。
        }
      });
    },
    handleMouseEnter(a, b) {
      this.ceshi(a, true);
    },
    handleMouseLeave(a, b) {
      this.ceshi(a, false);
    },

    clickImg(val) {
      this.imgIndex == val;
      this.dialogVisible = true;
    },

    // 加载图片
    ddd(obj) {
      if (!vectorLayer) {
        vectorLayer = new VectorLayer({
          source: new VectorSource(),
        });
        window.map.mapDiv.addLayer(vectorLayer);
      }
      // 添加一个特征，并设置其旋转角度
      var feature = new Feature({
        geometry: new Point([obj.fjLongitude, obj.fjLatitude]), // 设置位置
        // geometry: new Point([114.763493, 37.610727]),
      });
      feature.setId("jt" + obj.id);
      this.updateStyle(feature, obj, "-2");
      feature.on("mouseenter", function (evt) {
        console.log("鼠标移入特征");
      });

      feature.on("mouseleave", function (evt) {
        console.log("鼠标移出特征");
      });

      // 将点Feature添加到矢量图层
      vectorLayer.getSource().addFeature(feature);
      this.flyto(obj);
    },
    flyto(obj) {
      window.map["mapDiv"].getView().animate({
        center: [obj.fjLongitude, obj.fjLatitude],
        zoom: 16.5,
        duration: 2000, // 动画持续时间，单位毫秒
      });
    },
    ceshi(obj, hig) {
      let aaa = this.getFeatureById("jt" + obj.id);
      this.updateStyle(aaa, null, hig ? "" : "-2");
    },
    getFeatureById(id) {
      var features = vectorLayer.getSource().getFeatures();
      console.log(features);
      return features.find((fi) => fi.getId() === id);
    },
    updateStyle(feature, obj, evtName = "") {
      let rotation = obj
        ? (Number(obj.fjDirection) / 180) * Math.PI
        : feature.getStyle().image_.rotation_;
      feature.setStyle(
        new Style({
          image: new Icon({
            scale: 0.7, // 设置图标缩放
            anchor: [0.5, 46], // 保持锚点设置不变
            anchorXUnits: "fraction",
            anchorYUnits: "pixels",
            src: `/static/images/路径@3x${evtName}.png`, // 替换为你的箭头图片路径
            rotation, // 设置旋转角度，例如45度角，Math.PI / 4 表示 π/4 弧度，即45度角。可以根据需要调整角度值 Math.P 及180度
          }),
        })
      );
    },
    delatePoi() {
      var features = vectorLayer.getSource().getFeatures();
      features.forEach((item) => {
        vectorLayer.getSource().removeFeature(item);
      });
      window.map.mapDiv.removeLayer(vectorLayer);
      vectorLayer = null;
    },
    init(imgList) {
      this.idArr = [];
      this.monitorList = imgList;
      this.monitorList.forEach((item, i) => {
        this.ddd(item);
        this.idArr.push(item.id);
      });
    },
  },
  watch: {},
  beforeDestroy() {
    console.log("----");
    this.delatePoi("jt");
    // this.delatePoi("dw");
  },
};
</script>

<style lang="scss" scoped>
.imgindexspan {
  width: 26px;
  height: 26px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background: #dbad70;
  text-align: center;
  line-height: 26px;
}
.imgCon {
  .imgList {
    width: 100%;
    // height: 300px;
    max-height: 400px;
    display: flex;
    flex-wrap: wrap;
    // background-color: rgba(255, 192, 203, 0.372);
    .imgDiv {
      width: 130px;
      height: 87px;
      margin-right: 10px;
      // background-color: rgba(0, 255, 255, 0.413);
      position: relative;
      margin: 4px 4px;
      img {
        width: 126px;
        height: 83px;
      }
      p {
        position: absolute;
        bottom: 0;
        font-size: 10px;
        color: #33ccff;
        text-align: center;
        width: 100%;
        height: 30px;
        line-height: 30px;
      }
    }
    .higImg {
      border: 2px solid #dbad70;
    }
  }
}

.carouImg {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
  .text {
    width: 100%;
    height: 60px;
    line-height: 30px;
    text-align: left;
    padding-left: 20px;
    font-size: 18px;
    background: #dbad70;
    position: absolute;
    bottom: 0;
    color: #33ccff;
  }
}
.el-overlay-dialog {
  z-index: 2000; /* 根据需要调整 */
}
</style>
