<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-12 13:11:05
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-29 10:41:32
 * @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\components\road-view.vue
 * @Description: 交安事件-查看弹窗
-->

<template>
  <div class="view-content">
    <div>
      <!-- 上半部分 -->
      <div style="display: flex; height: 50%">
        <!-- 左侧病害信息 -->
        <div style="flex: 1; padding: 10px">
          <p>上报日期：{{ new Date(viewForm.createdTime).toLocaleString() }}</p>
          <p>路段名称：{{ viewForm.segmentName }}</p>
          <!-- <p>病害坐标：{{ viewForm.geometry.coordinates }}</p> -->
          <p>路产类型：{{ filterDefect(viewForm.equipmentType) }}</p>
        </div>

        <!-- 右侧图片展示 -->
        <div style="width: 27rem; padding: 10px">
          <el-carousel class="view-carousel" height="15rem">
            <el-carousel-item
              v-for="(img, index) in viewForm.media"
              :key="index"
            >
              <img :src="img.img" alt="病害图片" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <!-- 下半部分显示天地图 -->
      <fssm-map
        style="height: 300px; margin-top: 20px"
        ref="viewMap"
      ></fssm-map>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">关闭</el-button>
    </div>
  </div>
</template>

<script>
// 地图
import FssmMap from "@/components/map/fssm-map.vue";
import { Feature } from "ol";
import { Point } from "ol/geom";
import { Style } from "ol/style";
import * as styleExports from "ol/style";
import VectorLayer from "ol/layer/Vector";
import { Vector as VectorSource } from "ol/source";
export default {
  name: "RoadView",
  components: {
    FssmMap,
  },
  props: {
    dialogItem: {
      type: Object,
      default: () => {},
    },
    roadType: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 列表数据
      viewForm: {},
      // 地图中心点
      centerPoint: [123.30297096718999, 41.87942945541742],
      // 地图点位
      markers: [],
    };
  },
  watch: {
    dialogItem: {
      handler(val) {
        if (val.title === "查看路产") {
          this.viewForm = JSON.parse(JSON.stringify(val));
          this.$nextTick(() => {
            const map = this.$refs.viewMap.instance.get("map");
            map.getView().setCenter(val.geometry.coordinates);
            this.markers = val.geometry.coordinates;
            this.drawMapPoint();
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},
  methods: {
    /**
     * @description: 过滤列表路产类型
     * @param {*} value
     * @return {*}
     */
    filterDefect(value) {
      let a = null;
      [a] = this.roadType.filter((item) => {
        return item.value === value;
      });
      if (a) {
        return a.label;
      }
    },

    /**
     * @description: 绘制地图点位
     * @param {*} val
     * @return {*}
     */
    drawMapPoint() {
      const features = [];
      const point = new Point(this.markers); // 修改坐标格式
      const feature = new Feature({
        geometry: point,
        type: "icon", //  自己设置一个标识
      });
      feature.setStyle([
        new Style({
          image: new styleExports.Circle({
            //点样式
            radius: 6,
            stroke: new styleExports.Stroke({
              color: "#9a9c9e",
              width: 4,
            }),
            fill: new styleExports.Fill({
              color: "blue",
            }),
          }),
        }),
      ]);
      features.push(feature);
      //设置地图的数据源
      const pointSource = new VectorSource({
        features,
      });
      this.markLayerPoints = new VectorLayer({
        source: pointSource,
        properties: {
          type: "point",
        },
      });
      this.$nextTick(() => {
        const map = this.$refs.viewMap.instance.get("map");
        map.addLayer(this.markLayerPoints);
      });
    },

    /**
     * @description: 关闭弹窗
     * @return {*}
     */
    closeDialog() {
      this.$emit("cancel");
    },
  },
};
</script>

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

/* 查看弹窗-图片框样式 */
.view-carousel {
  height: 15rem;
  // .el-carousel__item{
  //   height: 12rem;

  img {
    max-height: 15rem;
    max-width: 25rem;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>