<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-14 14:49:21
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2025-01-07 15:56:50
 * @FilePath: \znxjxt-ui\src\views\xj\inspection\surface-management\components\surface-map.vue
 * @Description: 路面病害管理-地图组件
-->

<template>
  <div class="div-all">
    <div class="div-map">
      <span>
        {{ mapObject.title }}
      </span>
      <fssm-map
        ref="contentMap"
        :mapId="id"
        @feature-click="featureClick"
        :showZoom="false"
      ></fssm-map>
      <div class="map-clean">
        <i @click="cleanLayer" class="el-icon-delete-solid"></i>
      </div>
    </div>
    <div class="div-form">
      <div v-if="mapObject.scale" ref="echart" class="echart-div"></div>
    </div>
  </div>
</template>

<script>
import FssmScroll from "@/components/scroll/fssm-scroll";
import FssmMap from "@/components/map/fssm-map";
import { Point } from "ol/geom";
import { Style, Icon } from "ol/style";
import { Vector as VectorSource } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import { Feature } from "ol";
import * as echarts from "echarts";

export default {
  components: { FssmScroll, FssmMap },
  name: "SurfaceMap",
  props: {
    id: {
      type: String,
      default: "",
    },
    mapObject: {
      type: Object,
      default: () => {},
    },
    mapLogeList: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 弹窗显隐控制
      viewVisible: false,
      //
    };
  },
  watch: {
    mapObject: {
      handler(val) {
        if (this.$refs.contentMap && Object.keys(val).length > 0) {
          this.drawMapPoints();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  created() {},
  methods: {
    /**
     * @description: 绘制点位
     * @return {void}
     */
    drawMapPoints() {
      this.$refs.contentMap.clearMapFeature();
      const features = [];
      console.log(this.mapObject.data, "dsdfd");

      this.mapObject.data.forEach((element) => {
        const point = new Point([element.geometry[0], element.geometry[1]]); // 修改坐标格式
        const feature = new Feature({
          geometry: point,
          custom: {
            imageUrl: element.imageUrl,
            rect: element.rect,
            snapshotId: element.snapshotId,
          }, //  可以放一些自己的数据
          type: "icon", //  自己设置一个标识
        });
        feature.setStyle([
          new Style({
            image: new Icon({
              crossOrigin: "anonymous",
              src: require(`@/assets/screen/index/${
                this.mapLogeList[element.iconType] || "龟裂"
              }.png`),
              // size: [40, 40],
              scale: 0.5, // 图标缩放比例
              displacement: [0, 30],
            }),
          }),
        ]);
        features.push(feature);
      });
      // 修改地图中心点位
      const pointArray = this.mapObject.data.map((item) => {
        if (item.geometry) {
          return [item.geometry[0], item.geometry[1]];
        }
        return [];
      });
      this.fitMapToPoints(pointArray);
      //设置地图的数据源
      const pointSource = new VectorSource({
        features,
      });
      let markLayerPoints = new VectorLayer({
        source: pointSource,
        properties: {
          type: "point",
        },
      });
      this.$nextTick(() => {
        const map = this.$refs.contentMap.instance.get("map");
        map.addLayer(markLayerPoints);
        this.initEchart();
      });
    },

    /**
     * @description: 根据点位计算地图中心点
     * @return {void}
     */
    fitMapToPoints(points) {
      if (points.length > 0) {
        // 创建一个空的 extent
        let extent = [Infinity, Infinity, -Infinity, -Infinity];
        // 计算所有点的边界框（extent）
        points.forEach((point) => {
          extent = [
            Math.min(extent[0], point[0]),
            Math.min(extent[1], point[1]),
            Math.max(extent[2], point[0]),
            Math.max(extent[3], point[1]),
          ];
        });

        // 获取地图实例
        const map = this.$refs.contentMap.instance.get("map");

        // 使用 fit 方法根据边界框计算最佳缩放级别
        map.getView().fit(extent, {
          duration: 500, // 动画持续时间
          padding: [10, 10, 10, 10], // 边缘填充
        });
      }
    },

    /**
     * @description: 清除地图图层
     * @return {void}
     */
    cleanLayer() {
      this.$emit("clearMap");
      this.$refs.contentMap.clearMapFeature();
    },

    /**
     * @description: 图层点击事件
     * @return {void}
     */
    featureClick(feature) {
      if (feature && feature.get("type")) {
        this.$emit("send-img", {
          data: feature.get("custom"),
          // id: this.mapObject.id,
        });
      }
    },

    /**
     * @description: 绘制柱状图
     * @return {void}
     */
    initEchart() {
      const xData = this.mapObject.scale.map((item) => {
        return item.label;
      });
      const yData = this.mapObject.scale.map((item) => {
        return item.value;
      });
      if (this.$refs.echart) {
        const chart = echarts.init(this.$refs.echart);
        chart.setOption({
          //图例样式
          legend: {
            icon: "circle",
            bottom: "0%",
            left: "center",
            itemHeight: 10,
          },
          //图表位置
          grid: {
            top: "25%",
            bottom: "17%",
            left: "5%",
            right: "5%",
          },
          //提示框组件
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          xAxis: {
            type: "category",
            data: xData,
            //坐标轴刻度
            axisTick: {
              show: false,
            },
            //坐标轴轴线
            axisLine: {
              show: true,
              lineStyle: {
                color: "#D2D2D2",
              },
            },
            //坐标轴刻度标签
            axisLabel: {
              interval: 0,
              show: true,
              color: "#616367",
            },
          },
          yAxis: [
            {
              type: "value",
              name: "单位：个",
              nameTextStyle: {
                color: "#616367",
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#D2D2D2",
                },
              },
              axisLabel: {
                show: true,
                color: "#616367",
              },

              silent: false, // 坐标轴是否是静态无法交互
              triggerEvent: true, // 坐标轴的标签是否响应和触发鼠标事件，默认不响应
            },
            {
              type: "value",
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#D2D2D2",
                },
              },
            },
          ],
          series: [
            {
              //该柱状图颜色
              // color:"",
              // name: "1111",
              //柱状图的粗细--可以”20%“
              barWidth: "20%",
              color: "#72A1FF",
              data: yData,
              type: "bar",
            },
          ],
          dataZoom: [
            {
              // 设置滚动条的隐藏与显示
              show: false,
              // 设置滚动条类型
              type: "slider",
              // 设置背景颜色
              backgroundColor: "rgba(225,225,225,0.2)",
              // 设置选中范围的填充颜色
              fillerColor: "#ccc",
              // 设置边框颜色
              borderColor: "rgba(225,225,225,0.2)",
              // 是否显示detail，即拖拽时候显示详细数值信息
              showDetail: false,
              // 数据窗口范围的起始数值
              startValue: 0,
              // 数据窗口范围的结束数值（一页显示多少条数据）
              endValue: 10,
              // empty：当前数据窗口外的数据，被设置为空。
              // 即不会影响其他轴的数据范围
              filterMode: "empty",
              // 设置滚动条宽度，相对于盒子宽度
              width: "80%",
              // 设置滚动条高度
              height: 5,
              // 设置滚动条显示位置
              left: "center",
              // 是否锁定选择区域（或叫做数据窗口）的大小
              zoomLoxk: true,
              // 控制手柄的尺寸
              handleSize: 10,
              // dataZoom-slider组件离容器下侧的距离
              bottom: 0,
            },
            {
              // 没有下面这块的话，只能拖动滚动条，
              // 鼠标滚轮在区域内不能控制外部滚动条
              type: "inside",
              // 滚轮是否触发缩放
              zoomOnMouseWheel: false,
              // 鼠标滚轮触发滚动
              moveOnMouseMove: true,
              moveOnMouseWheel: true,
            },
          ],
        });
        window.addEventListener("resize", () => {
          chart.resize();
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.div-all {
  width: 100%;
  height: 100%;
}

.div-map {
  width: 100%;
  height: 65%;
  position: relative;

  span {
    position: absolute;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

  .map-clean {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;

    i {
      cursor: pointer;
    }
  }
}

.div-form {
  width: 100%;
  height: 35%;
  padding: 1rem 0;

  .echart-div {
    width: 100%;
    height: 100%;
  }
}

// 弹窗图片框
.dialog-div {
  display: flex;
  .img-div {
    width: 50%;
    height: 30rem;
    padding: 0 1rem;

    img {
      height: 30rem;
      width: 32rem;
    }
  }
}
</style>
